/* ============================================================================
   BFY UTILITY LIBRARY - Beneficy Design System
   ----------------------------------------------------------------------------
   Single source of truth for tokens + single-purpose utility classes.
   Load AFTER common.css and newportal.css (it must win on equal specificity).

   RULES
   1. No view-scoped CSS. Views compose utilities, they never declare styles.
   2. Every value comes from a token below. No raw px/hex in views or utilities.
   3. Utilities are single-purpose. Multi-property primitives exist only where
      CSS cannot be expressed as a utility (keyframes, pseudo-elements, shapes).

   INDEX
    1. Design tokens
    2. Legacy token aliases (PDR -> BFY)
    3. Display & position
    4. Flexbox & grid
    5. Sizing
    6. Spacing (padding / margin / gap)
    7. Surfaces & text colour
    8. Borders, radii, elevation
    9. Typography
   10. Effects & misc
   11. Primitives
   12. Responsive helpers
   ========================================================================== */

/* ============================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    /* ---- Spacing scale ------------------------------------------------- */
    --bfy-space-0: 0px;
    --bfy-space-3xs: 2px;
    --bfy-space-2xs: 4px;
    --bfy-space-xs: 6px;
    --bfy-space-sm: 8px;
    --bfy-space-md: 12px;
    --bfy-space-lg: 16px;
    --bfy-space-xl: 20px;
    --bfy-space-2xl: 24px;
    --bfy-space-3xl: 32px;
    --bfy-space-4xl: 40px;

    /* ---- Radius scale --------------------------------------------------- */
    --bfy-radius-xs: 4px;
    --bfy-radius-sm: 6px;
    --bfy-radius-md: 8px;
    --bfy-radius-lg: 12px;
    --bfy-radius-xl: 16px;
    --bfy-radius-pill: 999px;

    /* ---- Type scale ----------------------------------------------------- */
    --bfy-font-2xs: 0.68rem;
    --bfy-font-xs: 0.8rem;
    --bfy-font-sm: 0.875rem;
    --bfy-font-md: 0.95rem;
    --bfy-font-lg: 1.1rem;
    --bfy-font-xl: 1.2rem;
    --bfy-font-2xl: 1.45rem;
    --bfy-font-3xl: 1.6rem;

    /* ---- Line heights / weights ----------------------------------------- */
    --bfy-leading-tight: 1.2;
    --bfy-leading-normal: 1.4;
    --bfy-leading-relaxed: 1.6;
    --bfy-weight-regular: 400;
    --bfy-weight-medium: 500;
    --bfy-weight-semibold: 600;
    --bfy-weight-bold: 700;
    --bfy-weight-extrabold: 800;

    /* ---- Surfaces -------------------------------------------------------- */
    --bfy-surface: var(--card-bg-color);
    --bfy-surface-muted: #f7f8fa;
    --bfy-surface-sunken: var(--main-bg-color);
    --bfy-surface-invert: var(--footer-bg-color);

    /* ---- Text ------------------------------------------------------------ */
    --bfy-text-main: var(--main-text-color);
    --bfy-text-strong: #222222;
    --bfy-text-soft: #444444;
    --bfy-text-muted: #555555;
    --bfy-text-subtle: var(--gray-text-color);
    --bfy-text-invert: var(--reverse-text-color);

    /* ---- Lines ----------------------------------------------------------- */
    --bfy-border-color: #e0e0e0;
    --bfy-border-subtle: var(--lines-color-light);
    --bfy-border-strong: var(--lines-color);

    /* ---- Brand ----------------------------------------------------------- */
    --bfy-brand: var(--brand-color);
    --bfy-accent: var(--enphasys-color);

    /* ---- Intent: info (blue) --------------------------------------------- */
    --bfy-info-bg: #e3f2fd;
    --bfy-info-bg-soft: #f0f9ff;
    --bfy-info-border: #bae6fd;
    --bfy-info-fg: #1976d2;
    --bfy-info-fg-strong: #0369a1;
    --bfy-info-solid: #1565c0;

    /* ---- Intent: success (green) ----------------------------------------- */
    --bfy-success-bg: #e8f5e9;
    --bfy-success-border: #a5d6a7;
    --bfy-success-fg: #2e7d32;

    /* ---- Intent: warning (amber) ----------------------------------------- */
    --bfy-warning-bg: #fff8e6;
    --bfy-warning-border: #ffe082;
    --bfy-warning-icon: #f57c00;
    --bfy-warning-fg: #e65100;

    /* ---- Intent: danger (red) -------------------------------------------- */
    --bfy-danger-bg: var(--bg-error);
    --bfy-danger-fg: var(--error);
    --bfy-danger-soft: #e57373;

    /* ---- Tints (icon tiles, feature cards) -------------------------------- */
    --bfy-tint-green-bg: #eaf7ef;
    --bfy-tint-green-fg: #2e7d32;
    --bfy-tint-blue-bg: #eef4ff;
    --bfy-tint-blue-fg: #1565c0;
    --bfy-tint-violet-bg: #f4eefe;
    --bfy-tint-violet-fg: #7c4dff;
    --bfy-tint-orange-fg: #e07b39;

    /* ---- Elevation -------------------------------------------------------- */
    --bfy-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --bfy-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* ---- Primitive sizes --------------------------------------------------- */
    --bfy-avatar-size: 36px;
    --bfy-avatar-size-sm: 28px;
    --bfy-avatar-size-lg: 44px;
    --bfy-icon-box-size: 40px;
    --bfy-icon-box-size-sm: 32px;
    --bfy-step-index-size: 22px;
    --bfy-spinner-size: 44px;
    --bfy-spinner-width: 4px;
    --bfy-dialog-width: 440px;
    --bfy-dialog-width-wide: 560px;
    --bfy-dialog-max-height: 70vh;
}

/* ============================================================================
   2. LEGACY TOKEN ALIASES
   The ad-hoc --pdr-* tokens are now aliases of the semantic scale above.
   They exist only so untouched legacy rules keep rendering; do NOT use them in
   new code, and delete the duplicated block in common.css once the last
   consumer is migrated.
   ========================================================================== */
:root {
    --pdr-welfare-bg: var(--bfy-info-bg);
    --pdr-welfare-color: var(--bfy-info-fg);
    --pdr-incentivo-bg: var(--bfy-success-bg);
    --pdr-incentivo-color: var(--bfy-success-fg);
    --pdr-incentivo-border: var(--bfy-success-border);
    --pdr-deadline-bg: var(--bfy-warning-bg);
    --pdr-deadline-border: var(--bfy-warning-border);
    --pdr-deadline-icon-color: var(--bfy-warning-icon);
    --pdr-muted-text-color: var(--bfy-text-muted);
    --pdr-preview-exit-color: var(--bfy-tint-orange-fg);
    --pdr-dialog-title-color: var(--bfy-text-strong);
    --pdr-dialog-subtitle-color: var(--bfy-text-soft);
    --pdr-dialog-border-color: var(--bfy-border-color);
    --pdr-dialog-card-welfare-bg: var(--bfy-info-solid);
    --pdr-dialog-card-busta-bg: var(--bfy-info-bg-soft);
    --pdr-dialog-card-busta-accent: var(--bfy-info-border);
    --pdr-dialog-card-busta-text: var(--bfy-info-fg-strong);
    --pdr-dialog-badge-consigliato-bg: var(--bfy-accent);
    --pdr-dialog-badge-busta-bg: var(--bfy-info-fg-strong);
    --pdr-dialog-icon-negative-color: var(--bfy-danger-soft);
    --pdr-dialog-tbc-bg: var(--bfy-warning-bg);
    --pdr-dialog-tbc-icon-color: var(--bfy-warning-icon);
    --pdr-dialog-tbc-title-color: var(--bfy-warning-fg);
}

/* ============================================================================
   3. DISPLAY & POSITION
   ========================================================================== */
.bfy-block { display: block; }
.bfy-inline-block { display: inline-block; }
.bfy-inline { display: inline; }
.bfy-hidden { display: none !important; }

.bfy-relative { position: relative; }
.bfy-absolute { position: absolute; }
.bfy-static { position: static; }

.bfy-inset-x-0 { left: 0; right: 0; }
.bfy-bottom-lg { bottom: var(--bfy-space-lg); }
.bfy-top-xs { top: var(--bfy-space-xs); }
.bfy-right-xs { right: var(--bfy-space-xs); }

/* ============================================================================
   4. FLEXBOX & GRID
   ========================================================================== */
.bfy-flex { display: flex; }
.bfy-inline-flex { display: inline-flex; }
.bfy-flex-row { flex-direction: row; }
.bfy-flex-col { flex-direction: column; }
.bfy-wrap { flex-wrap: wrap; }
.bfy-nowrap { flex-wrap: nowrap; }

.bfy-items-start { align-items: flex-start; }
.bfy-items-center { align-items: center; }
.bfy-items-end { align-items: flex-end; }
.bfy-items-stretch { align-items: stretch; }
.bfy-items-baseline { align-items: baseline; }

.bfy-justify-start { justify-content: flex-start; }
.bfy-justify-center { justify-content: center; }
.bfy-justify-end { justify-content: flex-end; }
.bfy-justify-between { justify-content: space-between; }
.bfy-justify-around { justify-content: space-around; }

.bfy-self-start { align-self: flex-start; }
.bfy-self-center { align-self: center; }
.bfy-self-end { align-self: flex-end; }

.bfy-flex-1 { flex: 1 1 0%; }
.bfy-flex-auto { flex: 1 1 auto; }
.bfy-flex-none { flex: 0 0 auto; }
.bfy-shrink-0 { flex-shrink: 0; }
.bfy-grow-0 { flex-grow: 0; }

.bfy-grid { display: grid; }
.bfy-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bfy-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bfy-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bfy-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bfy-grid-auto { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }

/* ============================================================================
   5. SIZING
   ========================================================================== */
.bfy-w-full { width: 100%; }
.bfy-w-auto { width: auto; }
.bfy-h-full { height: 100%; }
.bfy-min-w-0 { min-width: 0; }
.bfy-max-w-full { max-width: 100%; }
.bfy-max-w-dialog { max-width: var(--bfy-dialog-width); }
.bfy-max-w-dialog-wide { max-width: var(--bfy-dialog-width-wide); }

/* ============================================================================
   6. SPACING  -  padding / margin / gap
   Scale: 0(0) 3xs(2) 2xs(4) xs(6) sm(8) md(12) lg(16) xl(20) 2xl(24) 3xl(32) 4xl(40)
   ========================================================================== */

/* ---- Padding ---- */
.bfy-p-0 { padding: var(--bfy-space-0); }
.bfy-p-3xs { padding: var(--bfy-space-3xs); }
.bfy-p-2xs { padding: var(--bfy-space-2xs); }
.bfy-p-xs { padding: var(--bfy-space-xs); }
.bfy-p-sm { padding: var(--bfy-space-sm); }
.bfy-p-md { padding: var(--bfy-space-md); }
.bfy-p-lg { padding: var(--bfy-space-lg); }
.bfy-p-xl { padding: var(--bfy-space-xl); }
.bfy-p-2xl { padding: var(--bfy-space-2xl); }
.bfy-p-3xl { padding: var(--bfy-space-3xl); }
.bfy-p-4xl { padding: var(--bfy-space-4xl); }
.bfy-px-0 { padding-left: var(--bfy-space-0); padding-right: var(--bfy-space-0); }
.bfy-px-3xs { padding-left: var(--bfy-space-3xs); padding-right: var(--bfy-space-3xs); }
.bfy-px-2xs { padding-left: var(--bfy-space-2xs); padding-right: var(--bfy-space-2xs); }
.bfy-px-xs { padding-left: var(--bfy-space-xs); padding-right: var(--bfy-space-xs); }
.bfy-px-sm { padding-left: var(--bfy-space-sm); padding-right: var(--bfy-space-sm); }
.bfy-px-md { padding-left: var(--bfy-space-md); padding-right: var(--bfy-space-md); }
.bfy-px-lg { padding-left: var(--bfy-space-lg); padding-right: var(--bfy-space-lg); }
.bfy-px-xl { padding-left: var(--bfy-space-xl); padding-right: var(--bfy-space-xl); }
.bfy-px-2xl { padding-left: var(--bfy-space-2xl); padding-right: var(--bfy-space-2xl); }
.bfy-px-3xl { padding-left: var(--bfy-space-3xl); padding-right: var(--bfy-space-3xl); }
.bfy-px-4xl { padding-left: var(--bfy-space-4xl); padding-right: var(--bfy-space-4xl); }
.bfy-py-0 { padding-top: var(--bfy-space-0); padding-bottom: var(--bfy-space-0); }
.bfy-py-3xs { padding-top: var(--bfy-space-3xs); padding-bottom: var(--bfy-space-3xs); }
.bfy-py-2xs { padding-top: var(--bfy-space-2xs); padding-bottom: var(--bfy-space-2xs); }
.bfy-py-xs { padding-top: var(--bfy-space-xs); padding-bottom: var(--bfy-space-xs); }
.bfy-py-sm { padding-top: var(--bfy-space-sm); padding-bottom: var(--bfy-space-sm); }
.bfy-py-md { padding-top: var(--bfy-space-md); padding-bottom: var(--bfy-space-md); }
.bfy-py-lg { padding-top: var(--bfy-space-lg); padding-bottom: var(--bfy-space-lg); }
.bfy-py-xl { padding-top: var(--bfy-space-xl); padding-bottom: var(--bfy-space-xl); }
.bfy-py-2xl { padding-top: var(--bfy-space-2xl); padding-bottom: var(--bfy-space-2xl); }
.bfy-py-3xl { padding-top: var(--bfy-space-3xl); padding-bottom: var(--bfy-space-3xl); }
.bfy-py-4xl { padding-top: var(--bfy-space-4xl); padding-bottom: var(--bfy-space-4xl); }
.bfy-pt-0 { padding-top: var(--bfy-space-0); }
.bfy-pt-3xs { padding-top: var(--bfy-space-3xs); }
.bfy-pt-2xs { padding-top: var(--bfy-space-2xs); }
.bfy-pt-xs { padding-top: var(--bfy-space-xs); }
.bfy-pt-sm { padding-top: var(--bfy-space-sm); }
.bfy-pt-md { padding-top: var(--bfy-space-md); }
.bfy-pt-lg { padding-top: var(--bfy-space-lg); }
.bfy-pt-xl { padding-top: var(--bfy-space-xl); }
.bfy-pt-2xl { padding-top: var(--bfy-space-2xl); }
.bfy-pt-3xl { padding-top: var(--bfy-space-3xl); }
.bfy-pt-4xl { padding-top: var(--bfy-space-4xl); }
.bfy-pr-0 { padding-right: var(--bfy-space-0); }
.bfy-pr-3xs { padding-right: var(--bfy-space-3xs); }
.bfy-pr-2xs { padding-right: var(--bfy-space-2xs); }
.bfy-pr-xs { padding-right: var(--bfy-space-xs); }
.bfy-pr-sm { padding-right: var(--bfy-space-sm); }
.bfy-pr-md { padding-right: var(--bfy-space-md); }
.bfy-pr-lg { padding-right: var(--bfy-space-lg); }
.bfy-pr-xl { padding-right: var(--bfy-space-xl); }
.bfy-pr-2xl { padding-right: var(--bfy-space-2xl); }
.bfy-pr-3xl { padding-right: var(--bfy-space-3xl); }
.bfy-pr-4xl { padding-right: var(--bfy-space-4xl); }
.bfy-pb-0 { padding-bottom: var(--bfy-space-0); }
.bfy-pb-3xs { padding-bottom: var(--bfy-space-3xs); }
.bfy-pb-2xs { padding-bottom: var(--bfy-space-2xs); }
.bfy-pb-xs { padding-bottom: var(--bfy-space-xs); }
.bfy-pb-sm { padding-bottom: var(--bfy-space-sm); }
.bfy-pb-md { padding-bottom: var(--bfy-space-md); }
.bfy-pb-lg { padding-bottom: var(--bfy-space-lg); }
.bfy-pb-xl { padding-bottom: var(--bfy-space-xl); }
.bfy-pb-2xl { padding-bottom: var(--bfy-space-2xl); }
.bfy-pb-3xl { padding-bottom: var(--bfy-space-3xl); }
.bfy-pb-4xl { padding-bottom: var(--bfy-space-4xl); }
.bfy-pl-0 { padding-left: var(--bfy-space-0); }
.bfy-pl-3xs { padding-left: var(--bfy-space-3xs); }
.bfy-pl-2xs { padding-left: var(--bfy-space-2xs); }
.bfy-pl-xs { padding-left: var(--bfy-space-xs); }
.bfy-pl-sm { padding-left: var(--bfy-space-sm); }
.bfy-pl-md { padding-left: var(--bfy-space-md); }
.bfy-pl-lg { padding-left: var(--bfy-space-lg); }
.bfy-pl-xl { padding-left: var(--bfy-space-xl); }
.bfy-pl-2xl { padding-left: var(--bfy-space-2xl); }
.bfy-pl-3xl { padding-left: var(--bfy-space-3xl); }
.bfy-pl-4xl { padding-left: var(--bfy-space-4xl); }

/* ---- Margin ---- */
.bfy-m-0 { margin: var(--bfy-space-0); }
.bfy-m-3xs { margin: var(--bfy-space-3xs); }
.bfy-m-2xs { margin: var(--bfy-space-2xs); }
.bfy-m-xs { margin: var(--bfy-space-xs); }
.bfy-m-sm { margin: var(--bfy-space-sm); }
.bfy-m-md { margin: var(--bfy-space-md); }
.bfy-m-lg { margin: var(--bfy-space-lg); }
.bfy-m-xl { margin: var(--bfy-space-xl); }
.bfy-m-2xl { margin: var(--bfy-space-2xl); }
.bfy-m-3xl { margin: var(--bfy-space-3xl); }
.bfy-m-4xl { margin: var(--bfy-space-4xl); }
.bfy-mx-0 { margin-left: var(--bfy-space-0); margin-right: var(--bfy-space-0); }
.bfy-mx-3xs { margin-left: var(--bfy-space-3xs); margin-right: var(--bfy-space-3xs); }
.bfy-mx-2xs { margin-left: var(--bfy-space-2xs); margin-right: var(--bfy-space-2xs); }
.bfy-mx-xs { margin-left: var(--bfy-space-xs); margin-right: var(--bfy-space-xs); }
.bfy-mx-sm { margin-left: var(--bfy-space-sm); margin-right: var(--bfy-space-sm); }
.bfy-mx-md { margin-left: var(--bfy-space-md); margin-right: var(--bfy-space-md); }
.bfy-mx-lg { margin-left: var(--bfy-space-lg); margin-right: var(--bfy-space-lg); }
.bfy-mx-xl { margin-left: var(--bfy-space-xl); margin-right: var(--bfy-space-xl); }
.bfy-mx-2xl { margin-left: var(--bfy-space-2xl); margin-right: var(--bfy-space-2xl); }
.bfy-mx-3xl { margin-left: var(--bfy-space-3xl); margin-right: var(--bfy-space-3xl); }
.bfy-mx-4xl { margin-left: var(--bfy-space-4xl); margin-right: var(--bfy-space-4xl); }
.bfy-my-0 { margin-top: var(--bfy-space-0); margin-bottom: var(--bfy-space-0); }
.bfy-my-3xs { margin-top: var(--bfy-space-3xs); margin-bottom: var(--bfy-space-3xs); }
.bfy-my-2xs { margin-top: var(--bfy-space-2xs); margin-bottom: var(--bfy-space-2xs); }
.bfy-my-xs { margin-top: var(--bfy-space-xs); margin-bottom: var(--bfy-space-xs); }
.bfy-my-sm { margin-top: var(--bfy-space-sm); margin-bottom: var(--bfy-space-sm); }
.bfy-my-md { margin-top: var(--bfy-space-md); margin-bottom: var(--bfy-space-md); }
.bfy-my-lg { margin-top: var(--bfy-space-lg); margin-bottom: var(--bfy-space-lg); }
.bfy-my-xl { margin-top: var(--bfy-space-xl); margin-bottom: var(--bfy-space-xl); }
.bfy-my-2xl { margin-top: var(--bfy-space-2xl); margin-bottom: var(--bfy-space-2xl); }
.bfy-my-3xl { margin-top: var(--bfy-space-3xl); margin-bottom: var(--bfy-space-3xl); }
.bfy-my-4xl { margin-top: var(--bfy-space-4xl); margin-bottom: var(--bfy-space-4xl); }
.bfy-mt-0 { margin-top: var(--bfy-space-0); }
.bfy-mt-3xs { margin-top: var(--bfy-space-3xs); }
.bfy-mt-2xs { margin-top: var(--bfy-space-2xs); }
.bfy-mt-xs { margin-top: var(--bfy-space-xs); }
.bfy-mt-sm { margin-top: var(--bfy-space-sm); }
.bfy-mt-md { margin-top: var(--bfy-space-md); }
.bfy-mt-lg { margin-top: var(--bfy-space-lg); }
.bfy-mt-xl { margin-top: var(--bfy-space-xl); }
.bfy-mt-2xl { margin-top: var(--bfy-space-2xl); }
.bfy-mt-3xl { margin-top: var(--bfy-space-3xl); }
.bfy-mt-4xl { margin-top: var(--bfy-space-4xl); }
.bfy-mr-0 { margin-right: var(--bfy-space-0); }
.bfy-mr-3xs { margin-right: var(--bfy-space-3xs); }
.bfy-mr-2xs { margin-right: var(--bfy-space-2xs); }
.bfy-mr-xs { margin-right: var(--bfy-space-xs); }
.bfy-mr-sm { margin-right: var(--bfy-space-sm); }
.bfy-mr-md { margin-right: var(--bfy-space-md); }
.bfy-mr-lg { margin-right: var(--bfy-space-lg); }
.bfy-mr-xl { margin-right: var(--bfy-space-xl); }
.bfy-mr-2xl { margin-right: var(--bfy-space-2xl); }
.bfy-mr-3xl { margin-right: var(--bfy-space-3xl); }
.bfy-mr-4xl { margin-right: var(--bfy-space-4xl); }
.bfy-mb-0 { margin-bottom: var(--bfy-space-0); }
.bfy-mb-3xs { margin-bottom: var(--bfy-space-3xs); }
.bfy-mb-2xs { margin-bottom: var(--bfy-space-2xs); }
.bfy-mb-xs { margin-bottom: var(--bfy-space-xs); }
.bfy-mb-sm { margin-bottom: var(--bfy-space-sm); }
.bfy-mb-md { margin-bottom: var(--bfy-space-md); }
.bfy-mb-lg { margin-bottom: var(--bfy-space-lg); }
.bfy-mb-xl { margin-bottom: var(--bfy-space-xl); }
.bfy-mb-2xl { margin-bottom: var(--bfy-space-2xl); }
.bfy-mb-3xl { margin-bottom: var(--bfy-space-3xl); }
.bfy-mb-4xl { margin-bottom: var(--bfy-space-4xl); }
.bfy-ml-0 { margin-left: var(--bfy-space-0); }
.bfy-ml-3xs { margin-left: var(--bfy-space-3xs); }
.bfy-ml-2xs { margin-left: var(--bfy-space-2xs); }
.bfy-ml-xs { margin-left: var(--bfy-space-xs); }
.bfy-ml-sm { margin-left: var(--bfy-space-sm); }
.bfy-ml-md { margin-left: var(--bfy-space-md); }
.bfy-ml-lg { margin-left: var(--bfy-space-lg); }
.bfy-ml-xl { margin-left: var(--bfy-space-xl); }
.bfy-ml-2xl { margin-left: var(--bfy-space-2xl); }
.bfy-ml-3xl { margin-left: var(--bfy-space-3xl); }
.bfy-ml-4xl { margin-left: var(--bfy-space-4xl); }
.bfy-mx-auto { margin-left: auto; margin-right: auto; }
.bfy-ml-auto { margin-left: auto; }
.bfy-mr-auto { margin-right: auto; }

/* ---- Gap ---- */
.bfy-gap-0 { gap: var(--bfy-space-0); }
.bfy-gap-3xs { gap: var(--bfy-space-3xs); }
.bfy-gap-2xs { gap: var(--bfy-space-2xs); }
.bfy-gap-xs { gap: var(--bfy-space-xs); }
.bfy-gap-sm { gap: var(--bfy-space-sm); }
.bfy-gap-md { gap: var(--bfy-space-md); }
.bfy-gap-lg { gap: var(--bfy-space-lg); }
.bfy-gap-xl { gap: var(--bfy-space-xl); }
.bfy-gap-2xl { gap: var(--bfy-space-2xl); }
.bfy-gap-3xl { gap: var(--bfy-space-3xl); }
.bfy-gap-4xl { gap: var(--bfy-space-4xl); }
.bfy-gap-x-0 { column-gap: var(--bfy-space-0); }
.bfy-gap-x-3xs { column-gap: var(--bfy-space-3xs); }
.bfy-gap-x-2xs { column-gap: var(--bfy-space-2xs); }
.bfy-gap-x-xs { column-gap: var(--bfy-space-xs); }
.bfy-gap-x-sm { column-gap: var(--bfy-space-sm); }
.bfy-gap-x-md { column-gap: var(--bfy-space-md); }
.bfy-gap-x-lg { column-gap: var(--bfy-space-lg); }
.bfy-gap-x-xl { column-gap: var(--bfy-space-xl); }
.bfy-gap-x-2xl { column-gap: var(--bfy-space-2xl); }
.bfy-gap-x-3xl { column-gap: var(--bfy-space-3xl); }
.bfy-gap-x-4xl { column-gap: var(--bfy-space-4xl); }
.bfy-gap-y-0 { row-gap: var(--bfy-space-0); }
.bfy-gap-y-3xs { row-gap: var(--bfy-space-3xs); }
.bfy-gap-y-2xs { row-gap: var(--bfy-space-2xs); }
.bfy-gap-y-xs { row-gap: var(--bfy-space-xs); }
.bfy-gap-y-sm { row-gap: var(--bfy-space-sm); }
.bfy-gap-y-md { row-gap: var(--bfy-space-md); }
.bfy-gap-y-lg { row-gap: var(--bfy-space-lg); }
.bfy-gap-y-xl { row-gap: var(--bfy-space-xl); }
.bfy-gap-y-2xl { row-gap: var(--bfy-space-2xl); }
.bfy-gap-y-3xl { row-gap: var(--bfy-space-3xl); }
.bfy-gap-y-4xl { row-gap: var(--bfy-space-4xl); }

/* ============================================================================
   7. SURFACES & TEXT COLOUR
   ========================================================================== */
/* ---- Backgrounds ---- */
.bfy-bg-surface { background-color: var(--bfy-surface); }
.bfy-bg-muted { background-color: var(--bfy-surface-muted); }
.bfy-bg-sunken { background-color: var(--bfy-surface-sunken); }
.bfy-bg-invert { background-color: var(--bfy-surface-invert); }
.bfy-bg-transparent { background-color: transparent; }
.bfy-bg-brand { background-color: var(--bfy-brand); }
.bfy-bg-accent { background-color: var(--bfy-accent); }
.bfy-bg-info { background-color: var(--bfy-info-bg); }
.bfy-bg-info-soft { background-color: var(--bfy-info-bg-soft); }
.bfy-bg-info-strong { background-color: var(--bfy-info-fg-strong); }
.bfy-bg-info-solid { background-color: var(--bfy-info-solid); }
.bfy-bg-success { background-color: var(--bfy-success-bg); }
.bfy-bg-success-solid { background-color: var(--bfy-success-fg); }
.bfy-bg-warning { background-color: var(--bfy-warning-bg); }
.bfy-bg-danger { background-color: var(--bfy-danger-bg); }
.bfy-bg-tint-green { background-color: var(--bfy-tint-green-bg); }
.bfy-bg-tint-blue { background-color: var(--bfy-tint-blue-bg); }
.bfy-bg-tint-violet { background-color: var(--bfy-tint-violet-bg); }

/* ---- Text colour ---- */
.bfy-text-main { color: var(--bfy-text-main); }
.bfy-text-strong { color: var(--bfy-text-strong); }
.bfy-text-soft { color: var(--bfy-text-soft); }
.bfy-text-muted { color: var(--bfy-text-muted); }
.bfy-text-subtle { color: var(--bfy-text-subtle); }
.bfy-text-invert { color: var(--bfy-text-invert); }
.bfy-text-inherit { color: inherit; }
.bfy-text-brand { color: var(--bfy-brand); }
.bfy-text-accent { color: var(--bfy-accent); }
.bfy-text-info { color: var(--bfy-info-fg); }
.bfy-text-info-strong { color: var(--bfy-info-fg-strong); }
.bfy-text-success { color: var(--bfy-success-fg); }
.bfy-text-success-soft { color: var(--bfy-success-border); }
.bfy-text-warning { color: var(--bfy-warning-fg); }
.bfy-text-warning-icon { color: var(--bfy-warning-icon); }
.bfy-text-danger { color: var(--bfy-danger-fg); }
.bfy-text-danger-soft { color: var(--bfy-danger-soft); }
.bfy-text-tint-green { color: var(--bfy-tint-green-fg); }
.bfy-text-tint-blue { color: var(--bfy-tint-blue-fg); }
.bfy-text-tint-violet { color: var(--bfy-tint-violet-fg); }

/* ============================================================================
   8. BORDERS, RADII, ELEVATION
   ========================================================================== */
.bfy-border { border: 1px solid var(--bfy-border-color); }
.bfy-border-0 { border: 0; }
.bfy-border-t { border-top: 1px solid var(--bfy-border-color); }
.bfy-border-b { border-bottom: 1px solid var(--bfy-border-color); }
.bfy-border-subtle { border-color: var(--bfy-border-subtle); }
.bfy-border-strong { border-color: var(--bfy-border-strong); }
.bfy-border-info { border-color: var(--bfy-info-border); }
.bfy-border-success { border-color: var(--bfy-success-border); }
.bfy-border-warning { border-color: var(--bfy-warning-border); }
.bfy-border-danger { border-color: var(--bfy-danger-soft); }
.bfy-border-brand { border-color: var(--bfy-brand); }

.bfy-rounded-none { border-radius: 0; }
.bfy-rounded-xs { border-radius: var(--bfy-radius-xs); }
.bfy-rounded-sm { border-radius: var(--bfy-radius-sm); }
.bfy-rounded-md { border-radius: var(--bfy-radius-md); }
.bfy-rounded-lg { border-radius: var(--bfy-radius-lg); }
.bfy-rounded-xl { border-radius: var(--bfy-radius-xl); }
.bfy-rounded-pill { border-radius: var(--bfy-radius-pill); }
.bfy-rounded-circle { border-radius: 50%; }

.bfy-shadow-none { box-shadow: none; }
.bfy-shadow-sm { box-shadow: var(--bfy-shadow-sm); }
.bfy-shadow-md { box-shadow: var(--bfy-shadow-md); }
.bfy-hover-lift { transition: box-shadow .15s, transform .15s; }
.bfy-hover-lift:hover { box-shadow: var(--bfy-shadow-md); transform: translateY(-2px); }

/* ============================================================================
   9. TYPOGRAPHY
   ========================================================================== */
.bfy-text-2xs { font-size: var(--bfy-font-2xs); }
.bfy-text-xs { font-size: var(--bfy-font-xs); }
.bfy-text-sm { font-size: var(--bfy-font-sm); }
.bfy-text-md { font-size: var(--bfy-font-md); }
.bfy-text-lg { font-size: var(--bfy-font-lg); }
.bfy-text-xl { font-size: var(--bfy-font-xl); }
.bfy-text-2xl { font-size: var(--bfy-font-2xl); }
.bfy-text-3xl { font-size: var(--bfy-font-3xl); }

.bfy-font-regular { font-weight: var(--bfy-weight-regular); }
.bfy-font-medium { font-weight: var(--bfy-weight-medium); }
.bfy-font-semibold { font-weight: var(--bfy-weight-semibold); }
.bfy-font-bold { font-weight: var(--bfy-weight-bold); }
.bfy-font-extrabold { font-weight: var(--bfy-weight-extrabold); }

.bfy-leading-tight { line-height: var(--bfy-leading-tight); }
.bfy-leading-normal { line-height: var(--bfy-leading-normal); }
.bfy-leading-relaxed { line-height: var(--bfy-leading-relaxed); }

.bfy-font-text { font-family: var(--text-font), 'Segoe UI', sans-serif; }
.bfy-font-std { font-family: var(--std-font), 'Segoe UI', sans-serif; }
.bfy-font-condensed { font-family: var(--condensed-font), 'Segoe UI', sans-serif; }

.bfy-text-left { text-align: left; }
.bfy-text-center { text-align: center; }
.bfy-text-right { text-align: right; }
.bfy-uppercase { text-transform: uppercase; }
.bfy-normal-case { text-transform: none; }
.bfy-tracking-wide { letter-spacing: 0.05em; }
.bfy-tracking-normal { letter-spacing: normal; }
.bfy-no-underline { text-decoration: none; }

/* ============================================================================
   10. EFFECTS & MISC
   ========================================================================== */
.bfy-opacity-60 { opacity: 0.6; }
.bfy-opacity-70 { opacity: 0.7; }
.bfy-opacity-80 { opacity: 0.8; }
.bfy-opacity-90 { opacity: 0.9; }

.bfy-cursor-pointer { cursor: pointer; }
.bfy-cursor-default { cursor: default; }
.bfy-overflow-hidden { overflow: hidden; }
.bfy-scroll-y {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}
.bfy-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bfy-break-word { word-break: break-word; }
.bfy-list-unstyled {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* ============================================================================
   11. PRIMITIVES
   Multi-property shapes that cannot be expressed as single-purpose utilities
   (keyframes, circles, fieldset resets). They are component-agnostic: any view
   may use them, none of them is bound to a view.
   ========================================================================== */

/* ---- Dialog shell -------------------------------------------------------- */

.bfy-dialog-body {
    border: 0;
    margin: 0;
    padding: 0;
    padding-right: var(--bfy-space-md);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: var(--bfy-dialog-max-height);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

.bfy-dialog-body.bfy-max-w-dialog-wide { max-width: none; min-width: min(var(--bfy-dialog-width-wide), 100%); }

/* Footer of a dialog opened with additionalClasses: ['bfy-dialog'] */
.bfy-dialog dialogactions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bfy-space-sm);
}

/* Dialog whose header, divider lines and footer are in the template, like the TeamSystem ID
   activation popup. The generic dialogcontent/dialogactions look is switched off. */
.bfy-dialog-plain dialogcontent {
    display: block;
    width: 100%;
    padding: 0;
    text-align: left;
}

.bfy-dialog-plain dialogactions {
    display: none;
}

.bfy-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--bfy-space-md);
}

/* ---- Buttons (modifiers of the global .myButton) ------------------------- */
.bfy-btn-secondary {
    background: var(--transparent-button-bg-color);
    color: var(--transparent-button-text-color);
    border: 2px solid var(--transparent-button-border-color);
    transition: background .3s ease-in-out, border-color .3s ease-in-out, color .3s ease-in-out;
}

    .bfy-btn-secondary:hover {
        background: var(--transparent-button-hover);
        color: var(--transparent-button-hover-text);
        border: 2px solid var(--transparent-button-hover-border);
    }

.bfy-btn-danger {
    background: var(--error);
    color: #fff;
    border-color: var(--error);
}

    .bfy-btn-danger:hover {
        background: var(--bfy-danger-soft);
        color: #fff;
        border-color: var(--bfy-danger-soft);
    }

.bfy-btn-soft {
    text-transform: none;
    letter-spacing: normal;
    border-radius: var(--bfy-radius-md);
    font-weight: var(--bfy-weight-semibold);
}

.bfy-btn-block {
    display: block;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.bfy-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: var(--bfy-space-2xs);
    margin: 0;
    line-height: 1;
    font-size: var(--bfy-font-lg);
    color: var(--bfy-text-subtle);
    border-radius: var(--bfy-radius-xs);
    cursor: pointer;
}

    .bfy-icon-btn:hover {
        color: var(--bfy-text-main);
        background: var(--bfy-surface-muted);
    }

/* ---- Circular / squared media ------------------------------------------- */
.bfy-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--bfy-avatar-size);
    height: var(--bfy-avatar-size);
    border-radius: 50%;
    background: var(--bfy-info-fg);
    color: var(--bfy-text-invert);
    font-size: var(--bfy-font-xs);
    font-weight: var(--bfy-weight-bold);
    text-transform: uppercase;
}

.bfy-avatar-sm { width: var(--bfy-avatar-size-sm); height: var(--bfy-avatar-size-sm); font-size: var(--bfy-font-2xs); }
.bfy-avatar-lg { width: var(--bfy-avatar-size-lg); height: var(--bfy-avatar-size-lg); font-size: var(--bfy-font-sm); }

.bfy-card {
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    margin: 0;
    background-color: var(--bfy-surface, var(--card-bg-color, #ffffff));
    border-radius: var(--bfy-radius-md);
}

.bfy-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--bfy-icon-box-size);
    height: var(--bfy-icon-box-size);
    border-radius: var(--bfy-radius-md);
    font-size: var(--bfy-font-lg);
}

.bfy-icon-box-sm { width: var(--bfy-icon-box-size-sm); height: var(--bfy-icon-box-size-sm); font-size: var(--bfy-font-md); }

.bfy-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--bfy-step-index-size);
    height: var(--bfy-step-index-size);
    border-radius: 50%;
    background: var(--bfy-info-solid);
    color: var(--bfy-text-invert);
    font-size: var(--bfy-font-2xs);
    font-weight: var(--bfy-weight-bold);
    line-height: 1;
}

.bfy-step-index-muted { background: var(--bfy-text-subtle); }

/* ---- Badge ---------------------------------------------------------------- */
.bfy-badge {
    display: inline-block;
    padding: var(--bfy-space-3xs) var(--bfy-space-xs);
    border-radius: var(--bfy-radius-xs);
    font-size: var(--bfy-font-2xs);
    font-weight: var(--bfy-weight-bold);
    letter-spacing: 0.05em;
    line-height: var(--bfy-leading-normal);
}

.bfy-badge-pill { border-radius: var(--bfy-radius-pill); padding: var(--bfy-space-2xs) var(--bfy-space-md); }

/* Fades an element in on first render, so a panel appearing reads as intentional
   rather than as a flash. */
@keyframes bfy-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.bfy-fade-in { animation: bfy-fade-in 180ms ease-out; }

@media (prefers-reduced-motion: reduce) {
    .bfy-fade-in { animation: none; }
}

/* ---- Spinner --------------------------------------------------------------- */
@keyframes bfy-spin {
    to { transform: rotate(360deg); }
}

.bfy-spinner {
    display: block;
    flex-shrink: 0;
    width: var(--bfy-spinner-size);
    height: var(--bfy-spinner-size);
    border: var(--bfy-spinner-width) solid var(--bfy-border-subtle);
    border-top-color: var(--bfy-brand);
    border-radius: 50%;
    animation: bfy-spin 0.9s linear infinite;
}

/* ---- Divider ---------------------------------------------------------------- */
.bfy-divider {
    border: 0;
    border-top: 1px solid var(--bfy-border-color);
    width: 100%;
    margin: 0;
}

/* ---- Checkmark alignment for the global .checkbox-container --------------- */
.bfy-checkmark { top: var(--bfy-space-xs); }

/* ---- Backoffice home cards (scoped) -------------------------------------- */
.bfy-backoffice-home {
    overflow-x: hidden;
}

.bfy-backoffice-home .bfy-bo-home-grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
}

    .bfy-backoffice-home .bfy-bo-home-welcome {
        margin-bottom: var(--bfy-space-lg);
    }

.bfy-backoffice-home .bfy-bo-home-card {
    width: 100%;
    max-width: 100%;
    min-height: 122px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--card-bg-color, #ffffff);
}

.bfy-backoffice-home .bfy-bo-home-card.bfy-hover-lift:hover {
    transform: none;
}

@media screen and (max-width: 1399px) {
    .bfy-backoffice-home .bfy-bo-home-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media screen and (max-width: 1199px) {
    .bfy-backoffice-home .bfy-bo-home-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 991px) {
    .bfy-backoffice-home .bfy-bo-home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 767px) {
    .bfy-backoffice-home .bfy-bo-home-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================================================
   12. RESPONSIVE HELPERS
   The portal breaks at 760px; these mirror that breakpoint.
   ========================================================================== */
@media screen and (max-width: 760px) {
    .bfy-stack-mobile {
        flex-direction: column;
    }

    .bfy-grid-2, .bfy-grid-3, .bfy-grid-4, .bfy-grid-5 {
        grid-template-columns: minmax(0, 1fr);
    }

    .bfy-hide-mobile { display: none !important; }
}

@media screen and (min-width: 761px) {
    .bfy-hide-desktop { display: none !important; }
}