/*
 * Workpay Design System CSS Framework
 * Version: 1.0.0
 *
 * Usage: Include this stylesheet in any project to enforce
 * Workpay's design tokens and component styles.
 *
 * <link rel="stylesheet" href="workpay.css">
 * Or paste the contents inline in a <style> tag.
 */

/* Licensed font files: place under /fonts/ (see docs/DECISIONS.md). Paths resolve
 * relative to this stylesheet. */
@font-face {
  font-family: 'Tomato Grotesk';
  src: url('fonts/Tomato_Grotesk/Tomato-Grotesk-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Tomato Grotesk';
  src: url('fonts/Tomato_Grotesk/Tomato-Grotesk-Medium-Slanted.otf') format('opentype');
  font-weight: 500;
  font-style: oblique;
  font-display: swap;
}

@font-face {
  font-family: 'Moderat';
  src: url('fonts/Moderat/Moderat-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Moderat';
  src: url('fonts/Moderat/Moderat-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Moderat';
  src: url('fonts/Moderat/Moderat-Regular-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Moderat';
  src: url('fonts/Moderat/Moderat-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* ========================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ======================================== */

:root {
  /* --- Primary Colors --- */
  --wpy-green: #62A446;
  --wpy-chrome: #F3B744;
  --wpy-dark-green: #387E1B;

  /* --- Secondary Colors --- */
  --wpy-red: #F14B3B;
  --wpy-sea: #3E8BEF;
  --wpy-navy: #003049;

  /* --- Background Colors --- */
  --wpy-bg-1: #FFFFFF;
  --wpy-bg-2: #F9FAFA;

  /* --- Text Colors --- */
  --wpy-text-primary: #003049;
  --wpy-text-charcoal: #253545;
  --wpy-text-body: #536171;
  --wpy-text-placeholder: #CED1D4;
  --wpy-text-inverse: #FFFFFF;

  /* --- Border Colors --- */
  --wpy-border-1: #BBBFC4;
  --wpy-border-2: #E4E5E7;
  --wpy-border-3: #E3E9EC;

  /* --- Green Palette --- */
  --wpy-green-50: #EEF6EA;
  --wpy-green-100: #DEEDD6;
  --wpy-green-200: #BFD8B1;
  --wpy-green-300: #9EC68B;
  --wpy-green-400: #7CB563;
  --wpy-green-500: #62A446;
  --wpy-green-600: #4B7A36;
  --wpy-green-700: #385E29;
  --wpy-green-800: #2C4223;
  --wpy-green-900: #1B2914;

  /* --- Chrome Palette --- */
  --wpy-chrome-50: #FEF9F1;
  --wpy-chrome-100: #FDF1DA;
  --wpy-chrome-200: #FAE3B7;
  --wpy-chrome-300: #F6CB79;
  --wpy-chrome-400: #F3B744;
  --wpy-chrome-500: #EDA418;
  --wpy-chrome-600: #D58D01;
  --wpy-chrome-700: #B77901;
  --wpy-chrome-800: #865B08;
  --wpy-chrome-900: #5D3E04;

  /* --- Navy Palette --- */
  --wpy-navy-50: #E3E9EC;
  --wpy-navy-100: #B6CCD7;
  --wpy-navy-200: #6EA0BA;
  --wpy-navy-300: #3A7492;
  --wpy-navy-350: #19455B;
  --wpy-navy-400: #003049;
  --wpy-navy-500: #00283D;
  --wpy-navy-600: #002031;
  --wpy-navy-700: #031D2B;
  --wpy-navy-800: #001825;
  --wpy-navy-900: #000A0F;

  /* --- Red Palette --- */
  --wpy-red-100: #F4DCDA;
  --wpy-red-200: #ECBBB6;
  --wpy-red-300: #EA928A;
  --wpy-red-400: #F14B3B;
  --wpy-red-500: #C52516;
  --wpy-red-600: #A12317;
  --wpy-red-700: #862118;
  --wpy-red-800: #541812;
  --wpy-red-900: #310E0A;

  /* --- Sea Palette --- */
  --wpy-sea-50: #ECF3FD;
  --wpy-sea-100: #D8E8FC;
  --wpy-sea-200: #B2D1F9;
  --wpy-sea-300: #8BB9F6;
  --wpy-sea-400: #65A2F3;
  --wpy-sea-500: #3E8BEF;
  --wpy-sea-600: #276CC5;
  --wpy-sea-700: #205396;
  --wpy-sea-800: #1B3F6E;
  --wpy-sea-900: #112642;

  /* --- Semantic Variants (Figma Variants/*) --- */
  --wpy-green-50-variant: #F1FDEB;
  --wpy-red-50: #FAEEED;
  --wpy-sea-50-variant: #F0F4F9;

  /* --- Grey Palette --- */
  --wpy-grey-100: #F4F5F6;
  --wpy-grey-200: #E4E5E7;
  --wpy-grey-300: #D4D6D8;
  --wpy-grey-400: #BBBFC4;
  --wpy-grey-500: #A9ADB2;
  --wpy-grey-600: #91969C;
  --wpy-grey-700: #787C82;
  --wpy-grey-800: #676B70;
  --wpy-grey-900: #56595D;

  /* --- Typography --- */
  --wpy-font-heading: 'Tomato Grotesk', system-ui, -apple-system, sans-serif;
  --wpy-font-body: 'Moderat', system-ui, -apple-system, sans-serif;
  --wpy-font-ui: 'Tomato Grotesk', system-ui, -apple-system, sans-serif;

  /* --- Spacing Scale --- */
  --wpy-space-1: 2px;
  --wpy-space-2: 4px;
  --wpy-space-3: 6px;
  --wpy-space-4: 8px;
  --wpy-space-5: 12px;
  --wpy-space-6: 16px;
  --wpy-space-7: 20px;
  --wpy-space-8: 24px;
  --wpy-space-9: 32px;
  --wpy-space-10: 40px;
  --wpy-space-11: 48px;
  --wpy-space-12: 56px;
  --wpy-space-13: 64px;
  --wpy-space-14: 72px;
  --wpy-space-15: 80px;
  --wpy-space-16: 96px;
  --wpy-space-17: 112px;
  --wpy-space-18: 128px;

  /* --- Shadows --- */
  --wpy-shadow-1: 0 1px 3px 0 rgba(11, 15, 20, 0.12);
  --wpy-shadow-2: 0 2px 7px -1px rgba(11, 15, 20, 0.15);
  --wpy-shadow-3: 0 5px 23px -2px rgba(11, 15, 20, 0.13);
  --wpy-shadow-4: 0 14px 43px -1px rgba(11, 15, 20, 0.13);
  --wpy-shadow-5: 0 16px 56px 0 rgba(11, 15, 20, 0.13);
  --wpy-shadow-6: 0 29px 64px 0 rgba(11, 15, 20, 0.14);

  /* --- Border Radius --- */
  --wpy-radius-sm: 4px;
  --wpy-radius-md: 8px;
  --wpy-radius-lg: 12px;
  --wpy-radius-full: 9999px;
}


/* ========================================
   2. BASE RESET & DEFAULTS
   ======================================== */

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

body {
  font-family: var(--wpy-font-ui);
  font-size: 16px;
  line-height: 22px;
  color: var(--wpy-text-primary);
  background-color: var(--wpy-bg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ========================================
   3. TYPOGRAPHY CLASSES
   ======================================== */

/* --- Adaptive (Product/App) --- */
.wpy-h1 {
  font-family: var(--wpy-font-heading);
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  color: var(--wpy-text-primary);
}

.wpy-h2 {
  font-family: var(--wpy-font-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 30px;
  color: var(--wpy-text-primary);
}

.wpy-h3 {
  font-family: var(--wpy-font-heading);
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  color: var(--wpy-text-primary);
}

.wpy-subheading {
  font-family: var(--wpy-font-heading);
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: var(--wpy-text-primary);
}

.wpy-body-lg {
  font-family: var(--wpy-font-ui);
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
}

.wpy-body-md {
  font-family: var(--wpy-font-ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 22px;
}

.wpy-body-sm {
  font-family: var(--wpy-font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}

.wpy-caption {
  font-family: var(--wpy-font-ui);
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}

/* --- Emotive (Website/Marketing) --- */
.wpy-emotive-h1 {
  font-family: var(--wpy-font-heading);
  font-weight: 500;
  font-size: 64px;
  line-height: 72px;
  color: var(--wpy-text-primary);
}

.wpy-emotive-h2 {
  font-family: var(--wpy-font-heading);
  font-weight: 500;
  font-size: 48px;
  line-height: 56px;
  color: var(--wpy-text-primary);
}

.wpy-emotive-h3 {
  font-family: var(--wpy-font-heading);
  font-weight: 500;
  font-size: 32px;
  line-height: 40px;
  color: var(--wpy-text-primary);
}

.wpy-emotive-sub {
  font-family: var(--wpy-font-heading);
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
  color: var(--wpy-text-primary);
}

.wpy-emotive-body-lg {
  font-family: var(--wpy-font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
}

.wpy-emotive-body-md {
  font-family: var(--wpy-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.wpy-emotive-body-sm {
  font-family: var(--wpy-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}


/* ========================================
   4. UTILITY CLASSES
   ======================================== */

/* --- Text Colors --- */
.wpy-text-primary { color: var(--wpy-text-primary); }
.wpy-text-body { color: var(--wpy-text-body); }
.wpy-text-placeholder { color: var(--wpy-text-placeholder); }
.wpy-text-inverse { color: var(--wpy-text-inverse); }
.wpy-text-success { color: var(--wpy-green); }
.wpy-text-error { color: var(--wpy-red); }
.wpy-text-info { color: var(--wpy-sea); }
.wpy-text-warning { color: var(--wpy-chrome); }

/* --- Background Colors --- */
.wpy-bg-page { background-color: var(--wpy-bg-1); }
.wpy-bg-surface { background-color: var(--wpy-bg-2); }
.wpy-bg-primary { background-color: var(--wpy-green); }
.wpy-bg-navy { background-color: var(--wpy-navy); }
.wpy-bg-error { background-color: var(--wpy-red); }
.wpy-bg-warning { background-color: var(--wpy-chrome); }
.wpy-bg-info { background-color: var(--wpy-sea); }

/* --- Shadows --- */
.wpy-shadow-1 { box-shadow: var(--wpy-shadow-1); }
.wpy-shadow-2 { box-shadow: var(--wpy-shadow-2); }
.wpy-shadow-3 { box-shadow: var(--wpy-shadow-3); }
.wpy-shadow-4 { box-shadow: var(--wpy-shadow-4); }
.wpy-shadow-5 { box-shadow: var(--wpy-shadow-5); }
.wpy-shadow-6 { box-shadow: var(--wpy-shadow-6); }

/* --- Border Radius --- */
.wpy-rounded-sm { border-radius: var(--wpy-radius-sm); }
.wpy-rounded-md { border-radius: var(--wpy-radius-md); }
.wpy-rounded-lg { border-radius: var(--wpy-radius-lg); }
.wpy-rounded-full { border-radius: var(--wpy-radius-full); }


/* ========================================
   5. COMPONENT CLASSES
   ======================================== */

/* --- Buttons --- */
.wpy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* icon-to-label gap — Figma: 8px for icon variants */
  padding: 10px 20px; /* md default — Figma: 10px 20px, h=40px */
  font-family: var(--wpy-font-body); /* Moderat — Figma: Adaptive/Headings/Fluid Header */
  font-size: 16px;
  font-weight: 500;
  line-height: 1.625em;
  border: 1px solid transparent;
  border-radius: var(--wpy-radius-sm); /* 4px */
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  min-height: 40px;
  text-decoration: none;
}

.wpy-btn-primary {
  background-color: var(--wpy-green); /* #62A446 — Variants/Green/400 */
  color: #FFFFFF;
}
.wpy-btn-primary:hover {
  background-color: var(--wpy-dark-green); /* #387E1B — Variants/Green/600 */
}
.wpy-btn-primary:focus-visible,
.wpy-btn-primary:active {
  background-color: #236609; /* Variants/Green/700 */
}

.wpy-btn-secondary {
  background-color: transparent;
  color: var(--wpy-green); /* #62A446 */
  border-color: var(--wpy-green);
}
.wpy-btn-secondary:hover {
  background-color: #D6F1CA; /* Variants/Green/100 */
  border-color: var(--wpy-green);
}
.wpy-btn-secondary:focus-visible,
.wpy-btn-secondary:active {
  background-color: #ADDE98; /* Variants/Green/200 */
  border-color: var(--wpy-green);
}

.wpy-btn-destructive {
  background-color: var(--wpy-red); /* #F14B3B — Variants/Red/400 */
  color: #FFFFFF;
}
.wpy-btn-destructive:hover {
  background-color: var(--wpy-red-500); /* #C52516 — Variants/Red/500 */
}
.wpy-btn-destructive:focus-visible,
.wpy-btn-destructive:active {
  background-color: #A12317; /* Variants/Red/600 */
}

.wpy-btn-ghost {
  background-color: transparent;
  color: var(--wpy-green);
  border-color: transparent;
}
.wpy-btn-ghost:hover {
  background-color: #D6F1CA; /* Variants/Green/100 */
}
.wpy-btn-ghost:focus-visible,
.wpy-btn-ghost:active {
  background-color: #ADDE98; /* Variants/Green/200 */
}

.wpy-btn-link {
  background-color: transparent;
  color: var(--wpy-green);
  border-color: transparent;
  text-decoration: underline;
}
.wpy-btn-link:hover {
  background-color: #D6F1CA; /* Variants/Green/100 */
  color: var(--wpy-dark-green); /* #387E1B — Variants/Green/600 */
}
.wpy-btn-link:focus-visible,
.wpy-btn-link:active {
  background-color: #ADDE98; /* Variants/Green/200 */
}

.wpy-btn:disabled,
.wpy-btn[disabled] {
  opacity: 0.6; /* Figma: opacity 0.6 over active-state colors */
  cursor: not-allowed;
  pointer-events: none;
}

.wpy-btn-sm {
  padding: 8px 16px; /* Figma: 8px 16px, h=32px */
  font-size: 14px; /* Adaptive/Headings/Table header */
  line-height: 1.5714em;
  min-height: 32px;
}

.wpy-btn-lg {
  padding: 14px 24px; /* Figma: 14px 24px, h=48px */
  font-size: 16px;
  line-height: 1.625em;
  min-height: 48px;
}

/* Combo Button */
.wpy-btn-combo {
  display: inline-flex;
  align-items: stretch;
}
.wpy-btn-combo-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  font-family: var(--wpy-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.625em;
  background-color: var(--wpy-green);
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  min-height: 48px;
  text-decoration: none;
}
.wpy-btn-combo-dropdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  background-color: var(--wpy-green);
  color: #FFFFFF;
  border: 1px solid transparent;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.wpy-btn-combo-main:hover,
.wpy-btn-combo-dropdown:hover {
  background-color: var(--wpy-dark-green);
}
.wpy-btn-combo-main:focus-visible,
.wpy-btn-combo-main:active,
.wpy-btn-combo-dropdown:focus-visible,
.wpy-btn-combo-dropdown:active {
  background-color: #236609;
}
.wpy-btn-combo-sm .wpy-btn-combo-main {
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1.5714em;
  min-height: 32px;
}
.wpy-btn-combo-sm .wpy-btn-combo-dropdown {
  width: 32px;
}
.wpy-btn-combo[aria-disabled="true"] .wpy-btn-combo-main,
.wpy-btn-combo[aria-disabled="true"] .wpy-btn-combo-dropdown {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}


/* --- Inputs --- */

/* Field wrapper — stacks label + input + help/error text with 4px gap */
.wpy-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Label — Moderat 500 14px, Charcoal */
.wpy-field-label {
  display: block;
  font-family: var(--wpy-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.571em;
  color: #253545;
}

/* Input box border wrapper */
.wpy-input-wrap {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid #BBBFC4;
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

/* Focus ring — green border, no box-shadow */
.wpy-input-wrap:focus-within {
  border-color: #62A446;
}

/* Error state */
.wpy-input-wrap.wpy-input-error {
  border-color: #F14B3B;
}
.wpy-input-wrap.wpy-input-error:focus-within {
  border-color: #F14B3B;
}

/* Disabled state */
.wpy-input-wrap.wpy-input-disabled {
  background: #F9FAFA;
  border-color: #BBBFC4;
  cursor: not-allowed;
}
.wpy-input-wrap.wpy-input-disabled .wpy-input {
  color: #A9ADB2;
  pointer-events: none;
  background: transparent;
}

/* Core input / textarea element — Moderat 400 16px */
.wpy-input {
  flex: 1;
  width: 100%;
  padding: 14px 16px;
  font-family: var(--wpy-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5em;
  color: #253545;
  background: transparent;
  border: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.wpy-input::placeholder {
  color: #CED1D4;
}

/* Textarea — same token base, vertical resize only */
.wpy-textarea {
  resize: vertical;
  min-height: 100px;
}

/* Input with icon — reduced vertical padding so icon+text stay optically centred */
.wpy-input-icon {
  padding: 12px 16px;
  gap: 8px;
}

/* Phone / Currency prefix section */
.wpy-input-prefix {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  border-right: 1px solid #BBBFC4;
  border-radius: 4px 0 0 4px;
  background: #FFFFFF;
  cursor: pointer;
  flex-shrink: 0;
}
.wpy-input-disabled .wpy-input-prefix {
  background: #F9FAFA;
}

/* Help text — Moderat 400 14px, Ash */
.wpy-field-help {
  font-family: var(--wpy-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.571em;
  color: #536171;
}

/* Error message row — icon + text inline */
.wpy-field-error {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--wpy-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.571em;
  color: #F14B3B;
}

/* Deprecated aliases — do not use in new code */
.wpy-label { display: block; font-family: var(--wpy-font-body); font-size: 14px; font-weight: 500; line-height: 1.571em; color: #253545; }
.wpy-helper-text { font-family: var(--wpy-font-body); font-size: 14px; line-height: 1.571em; color: #536171; }
.wpy-error-text { font-family: var(--wpy-font-body); font-size: 14px; line-height: 1.571em; color: #F14B3B; }
.wpy-input-success { border-color: #62A446; }


/* --- Cards --- */
.wpy-card {
  background-color: var(--wpy-bg-1);
  border: 1px solid var(--wpy-border-2);
  border-radius: var(--wpy-radius-lg);
  padding: var(--wpy-space-8);
  box-shadow: var(--wpy-shadow-1);
  transition: box-shadow 0.2s ease;
}

.wpy-card:hover {
  box-shadow: var(--wpy-shadow-2);
}

.wpy-card-flat {
  box-shadow: none;
}
.wpy-card-flat:hover {
  box-shadow: none;
}


/* --- Tags / Badges --- */
.wpy-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--wpy-space-2);
  padding: var(--wpy-space-2) var(--wpy-space-5);
  font-family: var(--wpy-font-ui);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  border-radius: var(--wpy-radius-full);
  white-space: nowrap;
}

.wpy-tag-default {
  background-color: var(--wpy-grey-100);
  color: var(--wpy-grey-800);
}

.wpy-tag-success {
  background-color: var(--wpy-green-50-variant);
  color: var(--wpy-green-700);
}

.wpy-tag-warning {
  background-color: var(--wpy-chrome-50);
  color: var(--wpy-chrome-800);
}

.wpy-tag-error {
  background-color: var(--wpy-red-100);
  color: var(--wpy-red-700);
}

.wpy-tag-info {
  background-color: var(--wpy-sea-50);
  color: var(--wpy-sea-700);
}

.wpy-tag-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  opacity: 0.6;
}
.wpy-tag-dismiss:hover {
  opacity: 1;
}


/* --- Toasts --- */
.wpy-toast {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 16px 16px 24px;
  border-radius: 4px;
  border: 1px solid transparent;
  box-shadow: 0px 5px 23px -2px rgba(11, 15, 20, 0.13);
  max-width: 368px;
  font-family: var(--wpy-font-body);
}

.wpy-toast-body {
  display: flex;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.wpy-toast-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wpy-toast-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wpy-toast-icon {
  flex-shrink: 0;
}

.wpy-toast-success {
  background: #F1FDEB;
  border-color: #62A446;
}
.wpy-toast-success .wpy-toast-icon { color: #62A446; }

.wpy-toast-warning {
  background: #FEF9F1;
  border-color: #D58D01;
}
.wpy-toast-warning .wpy-toast-icon { color: #D58D01; }

.wpy-toast-critical,
.wpy-toast-error {
  background: #FAEEED;
  border-color: #EA928A;
}
.wpy-toast-critical .wpy-toast-icon,
.wpy-toast-error .wpy-toast-icon { color: #F14B3B; }

.wpy-toast-informational,
.wpy-toast-info {
  background: #F0F4F9;
  border-color: #3E8BEF;
}
.wpy-toast-informational .wpy-toast-icon,
.wpy-toast-info .wpy-toast-icon { color: #3E8BEF; }

.wpy-toast-title {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.625em;
  color: #253545;
}

.wpy-toast-message {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.57em;
  color: #253545;
}

.wpy-toast-close {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #253545;
}
.wpy-toast-close:hover { color: #62A446; }
.wpy-toast-close img { display: block; }


/* --- Progress Bar --- */
.wpy-progress-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wpy-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wpy-progress {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 8px;
  background-color: #E4E5E7;
  border-radius: 9999px;
  overflow: hidden;
}

.wpy-progress-fill {
  height: 100%;
  background-color: #62A446;
  border-radius: 9999px;
  transition: width 0.3s ease;
}

.wpy-progress-error .wpy-progress-fill {
  background-color: #F14B3B;
}

.wpy-progress-label {
  font-family: var(--wpy-font-body);
  font-size: 16px;
  font-weight: 400;
  color: #253545;
}

.wpy-progress-value {
  font-family: var(--wpy-font-body);
  font-size: 16px;
  font-weight: 400;
  color: #253545;
  min-width: 36px;
}

.wpy-progress-error-msg {
  font-family: var(--wpy-font-body);
  font-size: 14px;
  font-weight: 400;
  color: #F14B3B;
}

.wpy-progress-icon {
  flex-shrink: 0;
}

.wpy-progress-icon-check {
  color: #62A446;
}

.wpy-progress-icon-error {
  color: #F14B3B;
}


/* --- Toggle / Switch --- */
.wpy-toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}

.wpy-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.wpy-toggle-track {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--wpy-grey-300);
  border-radius: var(--wpy-radius-full);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.wpy-toggle-track::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  top: 3px;
  left: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: var(--wpy-shadow-1);
}

.wpy-toggle input:checked + .wpy-toggle-track {
  background-color: var(--wpy-green);
}

.wpy-toggle input:checked + .wpy-toggle-track::after {
  transform: translateX(16px);
}


/* --- Tooltip --- */
.wpy-tooltip {
  position: relative;
  display: inline-block;
}

.wpy-tooltip-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: 1000;
  width: max-content;
  max-width: 267px;
  background: #003049;
  color: #FFFFFF;
  font-family: var(--wpy-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.57em;
  padding: 8px 10px;
  border-radius: 4px;
  box-shadow: 0px 2px 7px -1px rgba(11,15,20,0.15);
  white-space: normal;
  transition: opacity 150ms ease;
  pointer-events: none;
}

.wpy-tooltip-content::after {
  content: "";
  position: absolute;
  border: solid transparent;
}

.wpy-tooltip:hover .wpy-tooltip-content,
.wpy-tooltip:focus-within .wpy-tooltip-content {
  visibility: visible;
  opacity: 1;
}

/* Right: tooltip to the right of trigger, arrow points left */
.wpy-tooltip-right .wpy-tooltip-content {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}
.wpy-tooltip-right .wpy-tooltip-content::after {
  right: 100%;
  top: 50%;
  margin-top: -8px;
  border-width: 8px 9px 8px 0;
  border-right-color: #003049;
}

/* Left: tooltip to the left of trigger, arrow points right */
.wpy-tooltip-left .wpy-tooltip-content {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}
.wpy-tooltip-left .wpy-tooltip-content::after {
  left: 100%;
  top: 50%;
  margin-top: -8px;
  border-width: 8px 0 8px 9px;
  border-left-color: #003049;
}

/* Top: tooltip above trigger, arrow points down */
.wpy-tooltip-top .wpy-tooltip-content {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}
.wpy-tooltip-top .wpy-tooltip-content::after {
  left: 50%;
  top: 100%;
  margin-left: -8px;
  border-width: 9px 8px 0 8px;
  border-top-color: #003049;
}

/* Bottom: tooltip below trigger, arrow points up */
.wpy-tooltip-bottom .wpy-tooltip-content {
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}
.wpy-tooltip-bottom .wpy-tooltip-content::after {
  left: 50%;
  bottom: 100%;
  margin-left: -8px;
  border-width: 0 8px 9px 8px;
  border-bottom-color: #003049;
}


/* --- Tables --- */
.wpy-table-wrap {
  border-radius: 8px;
  border: 1px solid #E3E9EC;
  overflow: hidden;
  background: #FFFFFF;
}

.wpy-table-content {
  background: #F4F5F6;
  padding: 0 24px 0 16px;
}

.wpy-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--wpy-font-body);
  font-size: 14px;
  line-height: 1.57;
}

.wpy-table thead th {
  background: #F4F5F6;
  color: #253545;
  font-weight: 500;
  text-align: left;
  padding: 19px 8px 19px 24px;
  border-bottom: 1px solid #E3E9EC;
}

.wpy-table thead th:first-child {
  padding-left: 24px;
}

.wpy-table thead th:last-child {
  padding: 19px 24px;
}

.wpy-table tbody td {
  padding: 14px 8px 14px 24px;
  border-bottom: 1px solid #E3E9EC;
  color: #253545;
  background: #FFFFFF;
}

.wpy-table tbody td:first-child {
  padding-left: 24px;
}

.wpy-table tbody td:last-child {
  padding-right: 24px;
}

.wpy-table tbody tr:hover td {
  background-color: #F4F5F6;
}

.wpy-table-row-selected td,
.wpy-table tbody tr.wpy-table-row-selected td {
  background-color: #F1FDEB;
}

.wpy-table-header {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Toolbar aligned right per Figma */
  gap: 16px; /* Figma layout_UKPOY4 */
  padding: 16px 24px;
  background: #FFFFFF;
  border-bottom: 1px solid #E3E9EC;
}

/* Table search input — Figma: 205×32, icon + placeholder "Search" */
.wpy-table-search-wrap {
  display: flex;
  align-items: center;
  width: 205px;
  height: 32px;
  padding: 12px 10px;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid #BBBFC4;
  border-radius: 4px;
}
.wpy-table-search-wrap:focus-within {
  border-color: #62A446;
}
.wpy-table-search-wrap .wpy-table-search-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--wpy-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.57;
  color: #253545;
  outline: none;
}
.wpy-table-search-wrap .wpy-table-search-input::placeholder {
  color: #CED1D4;
}

/* Table toolbar outline buttons — Figma: white fill, Border/Border-1, Typography/Charcoal */
.wpy-btn-outline {
  background: #FFFFFF;
  border: 1px solid #BBBFC4;
  color: #253545;
}
.wpy-btn-outline:hover {
  background: #F4F5F6;
  border-color: #BBBFC4;
  color: #253545;
}

/* Customize column icon button — Figma: 32×32 */
.wpy-table-customize-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: #FFFFFF;
  border: 1px solid #BBBFC4;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.wpy-table-customize-btn:hover {
  background: #F4F5F6;
}

.wpy-table-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  background: #F4F5F6;
  font-size: 14px;
  color: #253545;
}

.wpy-table-batch-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 16px 24px;
  height: 64px;
  background: #003049;
  color: #FFFFFF;
  border-radius: 8px 8px 0 0;
}

.wpy-table-batch-bar button {
  color: inherit;
}

.wpy-table-pagination {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: #253545;
  background: #FFFFFF;
  flex-wrap: wrap;
}

.wpy-table-scroll-wrap {
  max-height: 400px;
  overflow-y: auto;
}

.wpy-table-scroll-wrap .wpy-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #F4F5F6;
  box-shadow: 0 1px 0 #E3E9EC;
}

.wpy-table-pagination-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 24px;
  font-size: 14px;
  color: #253545;
  background: #FFFFFF;
  border-top: 1px solid #E3E9EC;
}


/* --- Tabs --- */
.wpy-tabs {
  display: flex;
  gap: var(--wpy-space-8);
  border-bottom: 1px solid var(--wpy-border-2);
}

.wpy-tab {
  padding: var(--wpy-space-5) var(--wpy-space-2);
  font-family: var(--wpy-font-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  color: var(--wpy-text-body);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  margin-bottom: -1px;
}

.wpy-tab:hover {
  color: var(--wpy-text-primary);
}

.wpy-tab-active {
  color: var(--wpy-green);
  border-bottom-color: var(--wpy-green);
}


/* --- Accordion --- */
.wpy-accordion {
  border-radius: var(--wpy-radius-sm);
  background-color: var(--wpy-bg-1);
  overflow: hidden;
}

.wpy-accordion-item {
  border-bottom: 0.5px solid var(--wpy-border-1);
}
.wpy-accordion-item:last-child {
  border-bottom: none;
}

.wpy-accordion-header {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: var(--wpy-space-7) var(--wpy-space-6);
  font-family: var(--wpy-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wpy-text-charcoal);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.wpy-accordion-header:hover {
  background-color: var(--wpy-grey-100);
}

/* Header content wrapper — used for supporting-text and icon variants */
.wpy-accordion-header-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.wpy-accordion-header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.wpy-accordion-subtitle {
  font-size: 14px;
  line-height: 1.5714;
  color: var(--wpy-text-body);
}
.wpy-accordion-item-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.wpy-accordion-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  font-size: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23253545' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s ease;
}
.wpy-accordion-expanded .wpy-accordion-icon {
  transform: rotate(180deg);
}

.wpy-accordion-content {
  display: none;
  padding: 0 var(--wpy-space-6) var(--wpy-space-7) var(--wpy-space-6);
  font-family: var(--wpy-font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--wpy-text-body);
}
.wpy-accordion-expanded .wpy-accordion-content {
  display: block;
}


/* --- Navigation --- */
.wpy-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wpy-nav-side {
  width: 100%;
  max-width: 216px;
  background-color: var(--wpy-bg-2);
  border-right: 1px solid var(--wpy-border-3);
  padding: var(--wpy-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--wpy-space-2);
}

.wpy-nav-header {
  display: flex;
  align-items: center;
  padding-bottom: var(--wpy-space-6);
  margin-bottom: var(--wpy-space-2);
  position: relative;
}
/* Expanded: toggle at sidebar boundary (straddles right edge, like collapsed) */
.wpy-nav-header .wpy-nav-sidebar-toggle {
  position: absolute;
  right: calc(-12px - var(--wpy-space-6));
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.wpy-nav-side .wpy-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  min-height: 40px;
  font-family: var(--wpy-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.03em;
  color: var(--wpy-text-charcoal);
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wpy-nav-side .wpy-nav-item img {
  flex-shrink: 0;
  color: currentColor;
}
.wpy-nav-side .wpy-nav-item:hover {
  background-color: var(--wpy-border-3);
  color: var(--wpy-text-charcoal);
}

.wpy-nav-side .wpy-nav-item-active {
  background-color: #FFFFFF;
  color: var(--wpy-green);
  border: 1px solid var(--wpy-border-3);
  padding: 8px;
}

/* Expanded submenu — entire block is one white card */
.wpy-nav-side .wpy-nav-list > li.wpy-nav-item-expanded {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  width: 184px;
  padding: 0 0 6px;
  background-color: #FFFFFF;
  border: 1px solid var(--wpy-border-3);
  border-radius: 6px;
  box-shadow: 0px 1px 3px 0px rgba(11, 15, 20, 0.12);
}
.wpy-nav-side .wpy-nav-item-expanded > .wpy-nav-item-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 184px;
  padding: 8px;
  min-height: 40px;
  background-color: transparent;
  color: var(--wpy-green);
  border: none;
  border-radius: 6px 6px 0 0;
  font-family: var(--wpy-font-body);
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.wpy-nav-side .wpy-nav-item-expanded > .wpy-nav-item-trigger:hover {
  background-color: transparent;
  color: var(--wpy-green);
}
.wpy-nav-side .wpy-nav-item-expanded > .wpy-nav-item-trigger .wpy-nav-chevron {
  margin-left: auto;
  transform: rotate(180deg);
}
.wpy-nav-submenu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: 0 10px 0 0;
}
.wpy-nav-submenu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px 8px 8px;
  min-width: 142px;
  min-height: 38px;
  border-radius: 6px;
  font-family: var(--wpy-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.57;
  color: var(--wpy-text-charcoal);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.wpy-nav-submenu-item:hover {
  background-color: var(--wpy-border-3);
  color: var(--wpy-text-charcoal);
}
.wpy-nav-submenu-item-active {
  background-color: #F1FDEB;
  color: var(--wpy-text-charcoal);
}

.wpy-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  height: 72px;
  background: #FFFFFF;
  border-bottom: 1px solid var(--wpy-border-3);
  box-shadow: var(--wpy-shadow-1);
  gap: var(--wpy-space-8);
}
.wpy-nav-top-left,
.wpy-nav-top-right {
  display: flex;
  align-items: center;
  gap: var(--wpy-space-8);
}
/* Help = icon + "Help" text, gap 5px (Figma layout_9UGV5C) */
.wpy-nav-help-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--wpy-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.625;
  color: var(--wpy-text-charcoal);
  text-decoration: none;
  cursor: pointer;
}
.wpy-nav-help-wrap:hover {
  color: var(--wpy-green);
}
.wpy-nav-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 300px;
  height: 32px;
  padding: 12px 10px;
  background: #FFFFFF;
  border: 1px solid var(--wpy-border-1);
  border-radius: 4px;
}
.wpy-nav-search {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--wpy-font-body);
  font-size: 14px;
  color: var(--wpy-text-charcoal);
}
.wpy-nav-search::placeholder {
  color: var(--wpy-text-placeholder);
}
.wpy-nav-search:focus {
  outline: none;
}
/* Profile = avatar-group (avatar + name/role) + caret-down. Use .wpy-avatar-group from avatars component */
.wpy-nav-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.wpy-nav-user .wpy-avatar-group {
  gap: 10px;
}
.wpy-nav-user .wpy-avatar-details {
  flex-direction: column;
  gap: 4px;
}
.wpy-nav-user .wpy-avatar-name {
  font-family: var(--wpy-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  color: var(--wpy-text-charcoal);
}
.wpy-nav-user .wpy-avatar-support {
  font-family: var(--wpy-font-body);
  font-size: 14px;
  line-height: 1.2;
  color: var(--wpy-green);
}
.wpy-nav-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--wpy-text-charcoal);
}
.wpy-nav-icon-btn:hover {
  color: var(--wpy-green);
}
.wpy-nav-top .wpy-nav-item {
  font-family: var(--wpy-font-ui);
  font-size: 16px;
  color: var(--wpy-text-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}
.wpy-nav-top .wpy-nav-item:hover {
  color: var(--wpy-green);
}
.wpy-nav-top .wpy-nav-item-active {
  color: var(--wpy-green);
  font-weight: 500;
}

/* Side nav collapsed state */
.wpy-nav-side.wpy-nav-collapsed {
  width: 72px;
  max-width: 72px;
  padding: 16px 8px;
}
.wpy-nav-side.wpy-nav-collapsed .wpy-nav-search-wrap {
  display: none;
}

/* Sidebar expand/collapse toggle — circular button */
.wpy-nav-sidebar-toggle {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--wpy-border-2);
  color: var(--wpy-text-charcoal);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--wpy-shadow-1);
}
.wpy-nav-sidebar-toggle:hover {
  background-color: var(--wpy-border-3);
  color: var(--wpy-green);
}
/* Collapsed: toggle at sidebar boundary */
.wpy-layout-sidebar-collapsed .wpy-nav-sidebar-toggle {
  position: absolute;
  right: -12px;
  top: 32px;
  transform: translateY(-50%);
  z-index: 10;
}
.wpy-nav-side.wpy-nav-collapsed .wpy-nav-item {
  justify-content: center;
  padding: 8px;
  min-width: 40px;
  min-height: 40px;
}
.wpy-nav-side.wpy-nav-collapsed .wpy-nav-chevron,
.wpy-nav-side.wpy-nav-collapsed .wpy-nav-item-dropdown .wpy-nav-chevron {
  display: none;
}
.wpy-nav-label-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- App Grid Layout --- */
/* Figma: Sidebar full height to top; top bar beside sidebar (not full width) */
.wpy-app-layout {
  display: flex;
  flex-direction: row;
  min-height: 100vh;
}
.wpy-layout-sidebar {
  width: 216px;
  flex-shrink: 0;
  min-height: 100vh;
  overflow: visible;
  background-color: var(--wpy-bg-2);
}
.wpy-layout-sidebar.wpy-layout-sidebar-collapsed {
  width: 72px;
  position: relative;
  overflow: visible;
}
.wpy-layout-right {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.wpy-layout-main {
  flex: 1;
  min-width: 0;
}
.wpy-layout-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 216px;
  height: 100vh;
  z-index: 100;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}
.wpy-layout-sidebar-overlay.open {
  transform: translateX(0);
  box-shadow: var(--wpy-shadow-2);
}

/* Tablet 768–1039: top bar per Figma 978-15735 — hamburger + logo left; Help + Bell + Profile right (no search) */
.wpy-layout-tablet .wpy-nav-top-left .wpy-nav-search-wrap {
  display: none;
}
/* Tablet Help: icon above "Help" text (vertical stack) */
.wpy-layout-tablet .wpy-nav-help-wrap {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 12px;
}

/* Phone 0–489: top bar per Figma 7593:65286 — hamburger + centered logo + avatar only (no Help, Search, Bell) */
.wpy-layout-phone .wpy-nav-top-left {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
}
.wpy-layout-phone .wpy-nav-top-left .wpy-nav-logo-center {
  flex: 1;
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
.wpy-layout-phone .wpy-nav-top-left .wpy-nav-logo-center img {
  pointer-events: auto;
}
.wpy-layout-phone .wpy-nav-top-right .wpy-nav-help-wrap,
.wpy-layout-phone .wpy-nav-top-right .wpy-nav-icon-btn {
  display: none;
}

/* --- Page Headers --- */
.wpy-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--wpy-space-8) var(--wpy-space-9);
  background-color: var(--wpy-bg-1);
  border-bottom: 1px solid var(--wpy-border-2);
  min-height: 58px;
}

.wpy-page-header-title {
  display: flex;
  flex-direction: column;
  gap: var(--wpy-space-2);
}


/* --- Radio Buttons --- */
.wpy-radio {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.wpy-radio input[type="radio"],
.wpy-radio-input {
  display: none;
}

.wpy-radio-custom {
  width: 20px;
  height: 20px;
  border: 1px solid #BBBFC4;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s ease;
}

.wpy-radio-custom::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #62A446;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.wpy-radio input[type="radio"]:checked + .wpy-radio-custom,
.wpy-radio-input:checked + .wpy-radio-custom {
  border-color: #62A446;
}

.wpy-radio input[type="radio"]:checked + .wpy-radio-custom::after,
.wpy-radio-input:checked + .wpy-radio-custom::after {
  opacity: 1;
  transform: scale(1);
}

/* Disabled */
.wpy-radio:has(input[type="radio"]:disabled),
.wpy-radio:has(.wpy-radio-input:disabled) {
  opacity: 0.6;
  cursor: not-allowed;
}

.wpy-radio input[type="radio"]:disabled + .wpy-radio-custom,
.wpy-radio-input:disabled + .wpy-radio-custom {
  border-color: #A9ADB2;
}

.wpy-radio input[type="radio"]:checked:disabled + .wpy-radio-custom::after,
.wpy-radio-input:checked:disabled + .wpy-radio-custom::after {
  background-color: #A9ADB2;
}

/* Small size */
.wpy-radio-sm .wpy-radio-custom {
  width: 16px;
  height: 16px;
}

.wpy-radio-sm .wpy-radio-custom::after {
  width: 8px;
  height: 8px;
}

.wpy-radio-label {
  color: var(--wpy-text-primary);
}


/* --- Alerts Modals --- */
.wpy-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

/* Alert modal container */
.wpy-alert-modal {
  background: var(--wpy-bg-1);
  border-radius: var(--wpy-radius-sm);
  box-shadow: var(--wpy-shadow-3);
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 24px 24px 32px;
}
.wpy-alert-modal-sm { max-width: 440px; }
.wpy-alert-modal-md { max-width: 680px; }

/* Content section — icon+title row and body text */
.wpy-alert-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Header row: [icon+title group] [close button] */
.wpy-alert-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.wpy-alert-modal-header-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Status icon — 56×56 nested-circle SVG */
.wpy-alert-status-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

/* Modal title */
.wpy-alert-title {
  font-family: var(--wpy-font-body);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--wpy-text-charcoal);
  margin: 0;
}

/* Body copy */
.wpy-alert-body-text {
  font-family: var(--wpy-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wpy-text-charcoal);
  margin: 0;
}

/* Close (X) button */
.wpy-alert-modal-close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--wpy-text-charcoal);
}
.wpy-alert-modal-close:hover { opacity: 0.7; }

/* Actions row */
.wpy-alert-modal-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}


/* --- Avatars --- */
.wpy-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border-radius: var(--wpy-radius-full);
  background: var(--wpy-green-100);
  color: var(--wpy-green-700);
  font-family: var(--wpy-font-body);
  font-weight: 500;
  overflow: hidden;
  border: 2px solid transparent;
}

.wpy-avatar img, .wpy-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--wpy-radius-full);
}

.wpy-avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.wpy-avatar-md { width: 32px; height: 32px; font-size: 14px; }
.wpy-avatar-lg { width: 48px; height: 48px; font-size: 19.2px; }

.wpy-avatar-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wpy-avatar-details {
  display: flex;
  flex-direction: column;
}

.wpy-avatar-name {
  color: #253545;
  font-family: var(--wpy-font-body);
  font-size: 14px;
  line-height: 1.5714;
}

.wpy-avatar-lg + .wpy-avatar-details .wpy-avatar-name {
  font-size: 16px;
  line-height: 1.5;
}

.wpy-avatar-support {
  color: #387E1B;
  font-family: var(--wpy-font-body);
  font-size: 14px;
  line-height: 1.5714;
}


/* --- Badges --- */
.wpy-badge {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 22px;
  padding: 2px 8px 4px;
  border-radius: 14px;
  font-family: var(--wpy-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5714;
  white-space: nowrap;
  background: var(--wpy-badge-bg, #E4E5E7);
  color: var(--wpy-badge-fg, #253545);
}

/* Size modifier */
.wpy-badge-md { height: 26px; }

/* Dot modifier — 8×8px circle absolutely positioned at left: 8px */
.wpy-badge-dot { padding: 4px 8px 4px 20px; }
.wpy-badge-dot::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--wpy-badge-dot, #56595D);
}

/* Variants — exact Figma hex values (Variants/* tokens, differ from main palette) */
.wpy-badge-dormant       { --wpy-badge-bg: #E4E5E7; --wpy-badge-fg: #253545; --wpy-badge-dot: #56595D; }
.wpy-badge-positive      { --wpy-badge-bg: #D6F1CA; --wpy-badge-fg: #0E2E01; --wpy-badge-dot: #62A446; }
.wpy-badge-negative      { --wpy-badge-bg: #F4DCDA; --wpy-badge-fg: #862118; --wpy-badge-dot: #F14B3B; }
.wpy-badge-pending       { --wpy-badge-bg: #FAE3B7; --wpy-badge-fg: #5C3D00; --wpy-badge-dot: #EDA418; }
.wpy-badge-informational { --wpy-badge-bg: #DBE6F5; --wpy-badge-fg: #064393; --wpy-badge-dot: #3E8BEF; }
.wpy-badge-number        { --wpy-badge-bg: #62A446; --wpy-badge-fg: #FFFFFF; }

/* Backward-compat aliases for pre-audit class names */
.wpy-badge-success { --wpy-badge-bg: #D6F1CA; --wpy-badge-fg: #0E2E01; --wpy-badge-dot: #62A446; }
.wpy-badge-warning { --wpy-badge-bg: #FAE3B7; --wpy-badge-fg: #5C3D00; --wpy-badge-dot: #EDA418; }
.wpy-badge-error   { --wpy-badge-bg: #F4DCDA; --wpy-badge-fg: #862118; --wpy-badge-dot: #F14B3B; }
.wpy-badge-info    { --wpy-badge-bg: #DBE6F5; --wpy-badge-fg: #064393; --wpy-badge-dot: #3E8BEF; }


/* --- Banners --- */
.wpy-banner {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 16px 40px 24px 16px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-family: var(--wpy-font-body);
}
.wpy-banner-dismissable {
  padding: 16px 16px 24px;
  justify-content: space-between;
  gap: 40px;
}
.wpy-banner-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: block;
}
.wpy-banner-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.wpy-banner-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.625;
  color: #253545;
}
.wpy-banner-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #253545;
}
.wpy-banner-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
}
.wpy-banner-close {
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Banner variants — exact Figma Variants/* hex tokens */
.wpy-banner-default       { background: #F9FAFA; border-color: #BBBFC4; }
.wpy-banner-informational { background: #F0F4F9; border-color: #3E8BEF; }
.wpy-banner-success       { background: #F1FDEB; border-color: #62A446; }
.wpy-banner-warning       { background: #FEF9F1; border-color: #D58D01; }
.wpy-banner-critical      { background: #FAEEED; border-color: #EA928A; }
/* Deprecated aliases — do not use in new code */
.wpy-banner-error { background: #FAEEED; border-color: #EA928A; }
.wpy-banner-navy  { background: #F9FAFA; border-color: #BBBFC4; }


/* --- Breadcrumbs --- */
.wpy-breadcrumb ol {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0;
  font-family: var(--wpy-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

.wpy-breadcrumb a {
  color: #536171; /* Typography/Ash */
  text-decoration: none;
}

.wpy-breadcrumb a:hover {
  color: #253545; /* Typography/Charcoal */
  text-decoration: underline;
}

.wpy-breadcrumb-separator {
  display: inline-flex;
  align-items: center;
  color: #536171; /* Typography/Ash */
  line-height: 0;
}

.wpy-breadcrumb-separator img {
  width: 4px;
  height: 13px;
}

.wpy-breadcrumb-active {
  color: #62A446; /* Primary/Green */
  font-weight: 400;
}


/* --- Checkboxes --- */
.wpy-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: var(--wpy-font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--wpy-text-body);
  user-select: none;
}

.wpy-checkbox input[type="checkbox"] {
  display: none;
}

/* Visual box — medium (default) */
.wpy-checkbox-box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #BBBFC4;
  border-radius: 2px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  position: relative;
}

/* Small size */
.wpy-checkbox-sm .wpy-checkbox-box {
  width: 16px;
  height: 16px;
}

/* Large size */
.wpy-checkbox-lg .wpy-checkbox-box {
  width: 24px;
  height: 24px;
}

/* Icon images inside box */
.wpy-checkbox-box img {
  display: none;
  pointer-events: none;
}

/* Medium icon sizes */
.wpy-checkbox-box .wpy-checkbox-icon-check,
.wpy-checkbox-box .wpy-checkbox-icon-minus {
  width: 15px;
  height: 15px;
}

/* Small icon sizes */
.wpy-checkbox-sm .wpy-checkbox-box .wpy-checkbox-icon-check,
.wpy-checkbox-sm .wpy-checkbox-box .wpy-checkbox-icon-minus {
  width: 12px;
  height: 12px;
}

/* Large icon sizes */
.wpy-checkbox-lg .wpy-checkbox-box .wpy-checkbox-icon-check,
.wpy-checkbox-lg .wpy-checkbox-box .wpy-checkbox-icon-minus {
  width: 18px;
  height: 18px;
}

/* Checked state */
.wpy-checkbox input[type="checkbox"]:checked + .wpy-checkbox-box {
  background: #62A446;
  border-color: #62A446;
}

.wpy-checkbox input[type="checkbox"]:checked + .wpy-checkbox-box .wpy-checkbox-icon-check {
  display: block;
}

/* Indeterminate state */
.wpy-checkbox input[type="checkbox"]:indeterminate + .wpy-checkbox-box,
.wpy-checkbox.wpy-checkbox-indeterminate .wpy-checkbox-box {
  background: #62A446;
  border-color: #62A446;
}

.wpy-checkbox input[type="checkbox"]:indeterminate + .wpy-checkbox-box .wpy-checkbox-icon-minus,
.wpy-checkbox.wpy-checkbox-indeterminate .wpy-checkbox-box .wpy-checkbox-icon-minus {
  display: block;
}

/* Disabled state */
.wpy-checkbox input[type="checkbox"]:disabled ~ .wpy-checkbox-box,
.wpy-checkbox:has(input[type="checkbox"]:disabled) .wpy-checkbox-box {
  border-color: #D4D6D8;
  cursor: not-allowed;
  opacity: 0.6;
}

.wpy-checkbox input[type="checkbox"]:disabled ~ .wpy-checkbox-box {
  background: #FFFFFF;
}

.wpy-checkbox input[type="checkbox"]:disabled:checked + .wpy-checkbox-box,
.wpy-checkbox input[type="checkbox"]:disabled:indeterminate + .wpy-checkbox-box {
  background: #D4D6D8;
  border-color: #D4D6D8;
}

.wpy-checkbox:has(input[type="checkbox"]:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Deprecated alias — kept for backward compat */
.wpy-checkbox-custom {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #BBBFC4;
  border-radius: 2px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}

.wpy-checkbox input[type="checkbox"]:checked + .wpy-checkbox-custom {
  background: #62A446;
  border-color: #62A446;
}


/* --- Dropdown Boxes (Select) --- */
/* Figma: node 3963:59259 — Dropdown Boxes component set              */
/* Five types: single select · multi select · combo box single ·      */
/*             combo box multiselect · creatable select               */

/* Wrapper */
.wpy-select {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Label */
.wpy-select-label {
  font-family: var(--wpy-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5714em;
  color: #253545;
}

/* Trigger (input box) */
.wpy-select-trigger {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 4px;
  border: 1px solid #BBBFC4;
  background: #FFFFFF;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.wpy-select-trigger:hover {
  background: #F9FAFA;
}

/* Open state — green border */
.wpy-select--open .wpy-select-trigger {
  border-color: #62A446;
}

/* Disabled state */
.wpy-select--disabled .wpy-select-trigger {
  background: #F9FAFA;
  border-color: #A9ADB2;
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}

/* Value and placeholder text */
.wpy-select-value,
.wpy-select-placeholder,
.wpy-select-search {
  font-family: var(--wpy-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5em;
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
}

.wpy-select-value {
  color: #253545;
}

.wpy-select-placeholder {
  color: #CED1D4;
}

.wpy-select-search::placeholder {
  color: #CED1D4;
}

.wpy-select-search {
  color: #253545;
}

/* Chevron icon */
.wpy-select-chevron {
  flex-shrink: 0;
  color: #253545;
  transition: transform 0.2s ease;
}

.wpy-select--open .wpy-select-chevron {
  transform: rotate(180deg);
}

/* Clear button */
.wpy-select-clear {
  flex-shrink: 0;
  color: #A9ADB2;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}

.wpy-select-clear:hover {
  opacity: 1;
}

/* Trigger actions group (clear + chevron) */
.wpy-select-trigger-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Trigger with tags — reduce vertical padding */
.wpy-select-trigger--has-tags {
  padding: 8px 16px;
  flex-wrap: wrap;
  gap: 8px;
}

/* Tags inside trigger */
.wpy-select-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

/* Combo box divider (thin vertical bar before chevron) */
.wpy-select-combo-divider {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: #253545;
  flex-shrink: 0;
  opacity: 0.2;
}

/* Dropdown menu */
.wpy-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #FFFFFF;
  border: 1px solid #E4E5E7;
  border-radius: 4px;
  box-shadow: 0px 2px 7px -1px rgba(11, 15, 20, 0.15);
  padding: 4px 0;
  z-index: 1000;
  overflow: hidden;
}

/* Menu item */
.wpy-select-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  height: 48px;
  font-family: var(--wpy-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5em;
  color: #253545;
  cursor: pointer;
  transition: background 0.1s ease;
  box-sizing: border-box;
}

.wpy-select-menu-item:hover {
  background: #F9FAFA;
}

/* Selected menu item */
.wpy-select-menu-item--selected {
  background: #F1FDEB;
  gap: 13px;
  padding: 14px 16px 14px 0;
}

.wpy-select-menu-item--selected:hover {
  background: #F1FDEB;
}

/* 3px left indicator bar for selected item */
.wpy-select-menu-item-bar {
  display: inline-block;
  width: 3px;
  height: 48px;
  background: #62A446;
  flex-shrink: 0;
  margin: -14px 0;
}

/* Checkbox menu items (multi-select / combo-multiselect) */
.wpy-select-menu-item--checkbox {
  gap: 12px;
}

/* Creatable "Create new item" footer button */
.wpy-select-create-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  height: 40px;
  width: 100%;
  border: none;
  border-top: 1px solid #E4E5E7;
  background: transparent;
  color: #62A446;
  font-family: var(--wpy-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.625em;
  cursor: pointer;
  transition: background 0.15s ease;
  box-sizing: border-box;
}

.wpy-select-create-btn:hover {
  background: #D6F1CA;
}

.wpy-select-create-btn img {
  color: #62A446;
}

/* Loading spinner within trigger */
.wpy-select-loader {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 2px solid #E4E5E7;
  border-top-color: #62A446;
  border-radius: 50%;
  animation: wpy-select-spin 0.7s linear infinite;
}

@keyframes wpy-select-spin {
  to { transform: rotate(360deg); }
}

/* Deprecated aliases — old .wpy-dropdown-* classes kept for back-compat */
.wpy-dropdown { position: relative; display: inline-block; }
.wpy-dropdown-menu {
  position: absolute; top: 100%; left: 0; min-width: 180px;
  background: var(--wpy-bg-1); border: 1px solid #E4E5E7;
  border-radius: 4px; padding: 4px 0; margin-top: 4px; z-index: 1000;
}
.wpy-dropdown-item {
  display: block; padding: 14px 16px;
  font-family: var(--wpy-font-body); font-size: 16px;
  color: #253545; text-decoration: none;
  transition: background 0.15s ease;
}
.wpy-dropdown-item:hover { background: #F9FAFA; }
.wpy-dropdown-divider { height: 1px; background: #E4E5E7; margin: 4px 0; }


/* --- Date Pickers --- */

/* Input trigger */
.wpy-datepicker-field {
  position: relative;
  display: inline-block;
}
.wpy-datepicker-input {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid #BBBFC4;
  border-radius: 4px;
  background: #FFFFFF;
  cursor: pointer;
  min-width: 157px;
  font-family: var(--wpy-font-body);
  font-size: 16px;
  color: #CED1D4;
  box-sizing: border-box;
}
.wpy-datepicker-input__icon {
  flex-shrink: 0;
  color: #253545;
}

/* Calendar popover */
.wpy-datepicker-calendar {
  display: inline-block;
  width: 336px;
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #E4E5E7;
  box-shadow: 0px 2px 7px -1px rgba(11, 15, 20, 0.15);
  overflow: hidden;
  vertical-align: top;
  box-sizing: border-box;
  padding: 15px;
}
/* Popover positioning when attached to a field */
.wpy-datepicker-field .wpy-datepicker-calendar {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1000;
}

/* Calendar header */
.wpy-datepicker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 14px;
}
.wpy-datepicker-month-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--wpy-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.625em;
  color: #253545;
  padding: 0;
}
.wpy-datepicker-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: #253545;
  padding: 0;
  flex-shrink: 0;
}

/* Weekday labels */
.wpy-datepicker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 44px);
}
.wpy-datepicker-weekdays span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 32px;
  padding: 6px 7px;
  box-sizing: border-box;
  font-family: var(--wpy-font-body);
  font-size: 14px;
  line-height: 1.428em;
  color: #536171;
}

/* Day grid */
.wpy-datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 44px);
}
.wpy-datepicker-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 32px;
  padding: 6px 7px;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
  font-family: var(--wpy-font-body);
  font-size: 16px;
  color: #253545;
  line-height: 1;
}
.wpy-datepicker-day:hover                { background: #F4F5F6; }
.wpy-datepicker-day--today               { color: #62A446; padding-bottom: 2px; }
.wpy-datepicker-day__dot {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #62A446;
  flex-shrink: 0;
}
.wpy-datepicker-day--selected            { background: #62A446; color: #FFFFFF; border-radius: 4px; }
.wpy-datepicker-day--selected:hover      { background: #62A446; }
.wpy-datepicker-day--range-start         { background: #62A446; color: #FFFFFF; border-radius: 4px 0 0 4px; }
.wpy-datepicker-day--range-end           { background: #62A446; color: #FFFFFF; border-radius: 0 4px 4px 0; }
.wpy-datepicker-day--in-range            { background: #F1FDEB; color: #253545; border-radius: 0; }
.wpy-datepicker-day--in-range:hover      { background: #E2FBDA; }
.wpy-datepicker-day--disabled            { opacity: 0.5; cursor: default; }
.wpy-datepicker-day--disabled:hover      { background: transparent; }

/* Month / Year picker cells */
.wpy-datepicker-month {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 98px;
  padding: 8px 0;
  border: none;
  border-radius: 4px;
  background: #FFFFFF;
  cursor: pointer;
  font-family: var(--wpy-font-body);
  font-size: 16px;
  color: #253545;
}
.wpy-datepicker-month:hover              { background: #F4F5F6; }
.wpy-datepicker-month--selected          { background: #62A446; color: #FFFFFF; }
.wpy-datepicker-month--selected:hover    { background: #62A446; }

/* Preset sidebar */
.wpy-datepicker-preset-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  background: #FFFFFF;
  cursor: pointer;
  text-align: center;
  font-family: var(--wpy-font-body);
  font-size: 16px;
  color: #253545;
  box-sizing: border-box;
}
.wpy-datepicker-preset-item:hover        { background: #F4F5F6; }
.wpy-datepicker-preset-item--selected    { background: #62A446; color: #FFFFFF; }
.wpy-datepicker-preset-item--selected:hover { background: #62A446; }


/* --- Empty States --- */
.wpy-empty-state {
  padding: var(--wpy-space-12) var(--wpy-space-6);
  text-align: center;
  background: var(--wpy-bg-2);
  border-radius: var(--wpy-radius-md);
}

.wpy-empty-state-icon {
  font-size: 64px;
  margin-bottom: var(--wpy-space-5);
  opacity: 0.5;
}


/* --- File Uploader --- */
.wpy-file-uploader {
  width: 100%;
}

.wpy-upload-dropzone {
  border: 2px dashed var(--wpy-border-1);
  border-radius: var(--wpy-radius-md);
  padding: var(--wpy-space-9) var(--wpy-space-6);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  font-family: var(--wpy-font-ui);
  font-size: 14px;
  color: var(--wpy-text-body);
}

.wpy-upload-dropzone:hover {
  border-color: var(--wpy-green);
  background-color: var(--wpy-green-50);
}

.wpy-upload-list {
  list-style: none;
  padding: 0;
  margin-top: var(--wpy-space-5);
}

.wpy-upload-item {
  padding: var(--wpy-space-4) var(--wpy-space-5);
  background: var(--wpy-bg-1);
  border: 1px solid var(--wpy-border-2);
  border-radius: var(--wpy-radius-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: var(--wpy-space-2);
}


/* --- Menus --- */
.wpy-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.wpy-menu-item {
  display: flex;
  align-items: center;
  padding: var(--wpy-space-5) var(--wpy-space-6);
  font-family: var(--wpy-font-ui);
  font-size: 14px;
  color: var(--wpy-text-primary);
  text-decoration: none;
  border-radius: var(--wpy-radius-sm);
  transition: all 0.15s ease;
  margin-bottom: 4px;
}

.wpy-menu-item:hover {
  background-color: var(--wpy-bg-2);
}

.wpy-menu-active {
  background-color: var(--wpy-green-50);
  color: var(--wpy-green-700);
  font-weight: 600;
}


/* --- Standard Modals --- */
.wpy-modal {
  background: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0px 5px 23px -2px rgba(11, 15, 20, 0.13); /* Shadows/3 */
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 32px;
}

.wpy-modal-sm { max-width: 440px; }
.wpy-modal-md { max-width: 680px; }
.wpy-modal-lg { max-width: 920px; }

.wpy-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.wpy-modal-title {
  font-family: var(--wpy-font-body);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5em;
  color: #253545;
  margin: 0;
}

.wpy-modal-body {
  flex-grow: 1;
}

.wpy-modal-text {
  font-family: var(--wpy-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5em;
  color: #253545;
  margin: 0;
}

.wpy-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 40px;
}

.wpy-modal-close {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #253545;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wpy-modal-close:hover {
  color: #62A446;
}

/* Scrollable variant */
.wpy-modal-body-scroll {
  overflow-y: auto;
}


/* --- Table Filters — Figma node 9315:44026 (audited 2026-04-22) --- */

/* Toolbar row */
.wpy-table-filters {
  display: flex;
  align-items: center;
  gap: var(--wpy-space-4);
  padding: var(--wpy-space-4) 0;
  flex-wrap: wrap;
}

/* Filter trigger button — Closed state */
.wpy-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  height: 32px;
  background: #FFFFFF;
  border: 1px solid #BBBFC4; /* Border/Border-1 */
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--wpy-font-body);
  font-weight: 500;
  font-size: 14px;        /* Adaptive/Headings/Table header */
  line-height: 1.5714em;
  color: #253545;          /* Typography/Charcoal */
}

.wpy-filter-btn:hover {
  border-color: #62A446;
}

/* Filter trigger button — Selected state (has active filters) */
.wpy-filter-btn--selected {
  border-color: #BBBFC4;
}

/* Count badge on selected filter button */
.wpy-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #62A446;    /* Primary/Green */
  color: #FFFFFF;
  font-family: var(--wpy-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5714em;
  padding: 2px 6px;
  border-radius: 14px;
  min-width: 20px;
}

/* Filter panel (floating overlay) */
.wpy-filter-panel {
  background: #FFFFFF;
  border: 1px solid #E3E9EC;    /* Variants/Navy/50 */
  border-radius: 8px;
  box-shadow: 0px 5px 23px -2px rgba(11, 15, 20, 0.13); /* Shadows/3 */
  width: 478px;
  max-width: 100%;
}

.wpy-filter-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #E3E9EC; /* Border/Border-3 */
}

/* "FILTERS" — Moderat 500, 16px, uppercase, ash colour */
.wpy-filter-panel-title {
  font-family: var(--wpy-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5em;
  text-transform: uppercase;
  color: #536171;          /* Typography/Ash */
  margin: 0;
}

.wpy-filter-panel-close {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #253545;
}

.wpy-filter-panel-close:hover {
  color: #62A446;
}

.wpy-filter-panel-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px 24px;
  overflow-y: auto;
  max-height: 400px;
}

/* Single filter row: label (left) + control (right) */
.wpy-filter-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.wpy-filter-label {
  font-family: var(--wpy-font-body);
  font-weight: 400;
  font-size: 16px;          /* Adaptive/Body/Body Regular */
  line-height: 1.5em;
  color: #253545;
  flex-shrink: 0;
}

/* Dropdown select box within a filter item */
.wpy-filter-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  width: 259px;
  background: #FFFFFF;
  border: 1px solid #BBBFC4; /* Border/Border-1 */
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--wpy-font-body);
  font-weight: 400;
  font-size: 16px;
  color: #253545;
}

.wpy-filter-select-placeholder {
  color: #CED1D4;            /* Typography/Placeholder */
}

/* Date-range and amount rows: two side-by-side controls */
.wpy-filter-date-range {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 259px;
}

.wpy-filter-date-range .wpy-filter-select {
  flex: 1;
  width: auto;
}

/* Panel footer */
.wpy-filter-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  box-shadow: 0px 0px 7px -1px rgba(11, 15, 20, 0.15);
}

/* Apply Filters button — full width, green, Fluid Header font */
.wpy-filter-apply {
  flex: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  background: #62A446;       /* Variants/Green/400 */
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--wpy-font-body);
  font-weight: 500;
  font-size: 16px;            /* Adaptive/Headings/Fluid Header */
  line-height: 1.625em;
}

.wpy-filter-apply:hover {
  background: #4e8f35;
}

/* Reset Filters — ghost, green text, 60% opacity */
.wpy-filter-reset {
  background: none;
  border: none;
  padding: 8px 0px 8px 16px;
  cursor: pointer;
  font-family: var(--wpy-font-body);
  font-weight: 500;
  font-size: 14px;            /* Adaptive/Headings/Table header */
  line-height: 1.5714em;
  color: #62A446;
  opacity: 0.6;
}

.wpy-filter-reset:hover {
  opacity: 1;
}

/* Multi-select dropdown overlay */
.wpy-filter-multiselect-menu {
  background: #FFFFFF;
  border: 1px solid #E4E5E7;  /* Border/Border-2 */
  border-radius: 4px;
  box-shadow: 0px 2px 7px -1px rgba(11, 15, 20, 0.15); /* Shadows/2 */
  width: 259px;
  overflow: hidden;
}

.wpy-filter-multiselect-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  height: 40px;
}

.wpy-filter-search-placeholder {
  font-family: var(--wpy-font-body);
  font-weight: 400;
  font-size: 14px;            /* Emotive/Body Small */
  line-height: 1.714em;
  color: #536171;             /* Typography/Ash */
}

.wpy-filter-multiselect-divider {
  border: none;
  border-top: 1px solid #E4E5E7;
  margin: 0 4px;
}

.wpy-filter-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 176px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wpy-filter-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 24px 8px 12px;
  font-family: var(--wpy-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5714em;
  color: #253545;
  cursor: pointer;
}

.wpy-filter-menu-item:hover {
  background: #F9FAFA;
}

/* Checkbox inside a filter menu row fills the full row width */
.wpy-filter-menu-item .wpy-checkbox {
  width: 100%;
}

/* Active chip pills row */
.wpy-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


/* --- Progress Indicators --- */
.wpy-spinner {
  border: 3px solid var(--wpy-bg-2);
  border-top: 3px solid var(--wpy-green);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: wpy-spin 1s linear infinite;
}

.wpy-spinner-sm { width: 16px; height: 16px; border-width: 2px; border-top-width: 2px; }
.wpy-spinner-md { width: 24px; height: 24px; }
.wpy-spinner-lg { width: 32px; height: 32px; border-width: 4px; border-top-width: 4px; }

@keyframes wpy-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Figma-exact progress indicator (icon + label) */
.wpy-progress-indicator {
  display: flex;
  align-items: center;
  gap: 48px;
}

.wpy-progress-indicator-vertical {
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.wpy-progress-step {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wpy-progress-step-marker {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wpy-font-body);
  font-weight: 500;
  font-size: 14px;
}

.wpy-progress-step-inactive .wpy-progress-step-marker {
  background: #91969C;
  color: #253545;
}

.wpy-progress-step-active .wpy-progress-step-marker {
  background: #62A446;
  color: #FFFFFF;
}

.wpy-progress-step-complete .wpy-progress-step-marker {
  background: transparent;
  width: 24px;
  height: 24px;
}

.wpy-progress-step-label {
  font-family: var(--wpy-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.57;
  color: #253545;
}

.wpy-progress-step-active .wpy-progress-step-label {
  color: #62A446;
}

/* Legacy stepper (backward compat) */
.wpy-steps {
  display: flex;
  align-items: center;
  gap: var(--wpy-space-4);
}

.wpy-step {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--wpy-grey-600);
  color: #253545;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--wpy-font-body);
  font-size: 14px;
  font-weight: 500;
  border: none;
}

.wpy-step-active {
  background: #62A446;
  color: #FFFFFF;
}

.wpy-step-complete:not(:has(img)) {
  background: #62A446;
  color: #FFFFFF;
}

.wpy-step-complete:has(img) {
  background: transparent;
}

.wpy-step-complete img {
  display: block;
  width: 24px;
  height: 24px;
}

.wpy-step-line {
  height: 2px;
  background: var(--wpy-border-2);
  width: 40px;
}


/* --- Country Flags --- */
.wpy-flag {
  display: inline-block;
  width: 24px;
  height: 18px;
  background-size: cover;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.05);
  vertical-align: middle;
}


/* --- Global Search --- */
.wpy-global-search {
  display: flex;
  align-items: center;
  background: var(--wpy-bg-2);
  border: 1px solid var(--wpy-border-2);
  border-radius: var(--wpy-radius-sm);
  padding: 0 var(--wpy-space-5);
  width: 100%;
  max-width: 480px;
  height: 40px;
}

.wpy-global-search input {
  background: transparent;
  border: none;
  flex-grow: 1;
  padding-left: var(--wpy-space-4);
  font-size: 14px;
  outline: none;
}

.wpy-search-kbd {
  font-size: 12px;
  color: var(--wpy-text-placeholder);
  background: var(--wpy-bg-1);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--wpy-border-2);
}


/* --- Notifications Panel --- */
.wpy-notification-panel {
  width: 360px;
  background: var(--wpy-bg-1);
  border-radius: var(--wpy-radius-md);
  border: 1px solid var(--wpy-border-2);
  overflow: hidden;
}

.wpy-notification-header {
  padding: var(--wpy-space-5) var(--wpy-space-6);
  border-bottom: 1px solid var(--wpy-border-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--wpy-bg-1);
}

.wpy-notification-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 400px;
  overflow-y: auto;
}

.wpy-notification-item {
  padding: var(--wpy-space-5) var(--wpy-space-6);
  border-bottom: 1px solid var(--wpy-border-3);
  display: flex;
  gap: var(--wpy-space-4);
  cursor: pointer;
  transition: background 0.15s ease;
}

.wpy-notification-item:hover {
  background: var(--wpy-bg-2);
}

.wpy-notification-unread {
  background: var(--wpy-green-50);
}

.wpy-notification-dot {
  width: 8px;
  height: 8px;
  background: var(--wpy-green);
  border-radius: 50%;
  margin-top: 6px;
}

.wpy-notification-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--wpy-text-primary);
  margin-bottom: 2px;
}

.wpy-notification-time {
  font-size: 12px;
  color: var(--wpy-text-body);
}


/* --- Filter Iteraction (Chips / Table Tags) — Figma "Table tags" component set --- */

/* Tag closed — pill chip with label + remove button */
.wpy-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: #F1FDEB;       /* fill_YEYOUU — light green tint */
  border: 1px solid #62A446; /* fill_8NCOA6 — Primary/Green */
  border-radius: 32px;       /* pill shape */
  height: 32px;
  cursor: pointer;
}

/* Inner row: label + remove icon */
.wpy-filter-chip-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
}

.wpy-filter-chip-label {
  font-family: var(--wpy-font-body);
  font-weight: 400;
  font-size: 14px;            /* style_4DA89S */
  line-height: 1.5em;
  color: #253545;             /* fill_TDD2Z2 / Typography/Charcoal */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.wpy-filter-chip-remove {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Dropdown caret on the chip */
.wpy-filter-chip-caret {
  margin-right: 8px;
  flex-shrink: 0;
}

/* Tag open state — chip keeps its full pill shape; no border manipulation */
.wpy-filter-chip--open {
  /* intentionally empty — pill stays fully rounded when open */
}

/* Dropdown floats detached below the open chip */
.wpy-filter-chip-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;             /* visual gap — detached from the pill */
  background: #FFFFFF;
  border: 1px solid #E4E5E7;  /* Border/Border-2 */
  border-radius: 4px;          /* fully rounded, not merged with chip */
  box-shadow: 0px 2px 7px -1px rgba(11, 15, 20, 0.15); /* Shadows/2 */
  width: 259px;
  overflow: hidden;
  z-index: 100;
}

/* Deprecated alias — retained for backward compatibility */
.wpy-chip-remove {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  color: inherit;
  display: inline-flex;
  align-items: center;
}


/* ========================================
   6. LAYOUT UTILITIES
   ======================================== */

.wpy-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--wpy-space-8);
}

.wpy-flex {
  display: flex;
}

.wpy-flex-col {
  flex-direction: column;
}

.wpy-flex-center {
  align-items: center;
  justify-content: center;
}

.wpy-flex-between {
  justify-content: space-between;
}

.wpy-gap-2 { gap: var(--wpy-space-2); }
.wpy-gap-4 { gap: var(--wpy-space-4); }
.wpy-gap-6 { gap: var(--wpy-space-6); }
.wpy-gap-8 { gap: var(--wpy-space-8); }
.wpy-gap-9 { gap: var(--wpy-space-9); }

.wpy-grid {
  display: grid;
}

.wpy-grid-2 { grid-template-columns: repeat(2, 1fr); }
.wpy-grid-3 { grid-template-columns: repeat(3, 1fr); }
.wpy-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .wpy-grid-2,
  .wpy-grid-3,
  .wpy-grid-4 {
    grid-template-columns: 1fr;
  }
}