/* ── Poppins @font-face fallback ──────────────────────────────────
   Bundled woff2 files provide an offline fallback for MAUI / BlazorWebView.
   On Web, the Google Fonts CDN <link> in App.razor loads first and wins;
   these declarations only fire if the CDN is unreachable.
   ───────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/Poppins-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/Poppins-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/Poppins-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/Poppins-Bold.woff2') format('woff2');
}

/* ─────────────��───────────────────────────────────────────────────
   Wellabe Design Tokens
   Single source of truth for palette, semantic colors, and typography.
   All components MUST reference these variables — never raw hex or px values.
   ───────────────────────────────────────────────────────────────── */
:root {
    /* ── Palette (branding.instructions.md — derived from Figma) ── */
    --wb-yellow:            #EEC319;
    --wb-blue:              #396EBE;
    --wb-blue-hover:        #2B5DA8;
    --wb-navy:              #1A4F8A;
    --wb-black:             #000000;
    --wb-near-black:        #1A1A1A;
    --wb-dark-gray:         #404040;
    --wb-medium-gray:       #484848;
    --wb-muted-gray:        #6D6D6D;
    --wb-light-gray:        #F3EFEC;
    --wb-warm-gray:         #D0CCC9;
    --wb-info-blue-tint:    #DCE8F5;
    --wb-white:             #ffffff;
    /* Brand-palette-only (not in current Figma UI) */
    --wb-light-blue:        #59A4D9;
    --wb-orange:            #F08621;

    /* ── Semantic Color Tokens ────────────────────────��───────── */
    --wb-cta-bg:            var(--wb-blue);
    --wb-cta-bg-hover:      var(--wb-blue-hover);
    --wb-cta-text:          var(--wb-white);
    --wb-link:              var(--wb-blue);
    --wb-text:              var(--wb-black);
    --wb-text-body:         var(--wb-near-black);
    --wb-text-subdued:      var(--wb-medium-gray);
    --wb-text-secondary:    var(--wb-dark-gray);   /* sidebar / nav text */
    --wb-text-muted:        var(--wb-muted-gray);  /* placeholders / copyright */
    --wb-card-bg:           var(--wb-light-gray);
    --wb-bg:                var(--wb-white);
    --wb-bg-surface:        var(--wb-light-gray);  /* sidebar, footer */
    --wb-divider:           var(--wb-warm-gray);   /* #D0CCC9 — Figma spec: warm gray for borders/dividers */
    --wb-banner-bg:         var(--wb-info-blue-tint);
    --wb-banner-accent:     var(--wb-navy);

    /* ── Spacing Tokens ───────────────────────────────────────── */
    /* Page-level horizontal gutters */
    --wb-gutter:            1.875rem;   /* 30px — standard side margin */
    --wb-gutter-sm:         1rem;       /* 16px — narrow-viewport side margin (≤ md) */

    /* Section vertical rhythm */
    --wb-section-gap:       3.125rem;   /* 50px — top spacing between major sections */
    --wb-section-gap-md:    2.5rem;     /* 40px — medium-viewport top spacing */
    --wb-section-gap-sm:    1.5rem;     /* 24px — mobile top spacing */
    --wb-banner-mt:         1.875rem;   /* 30px — top margin for announcement-style components */

    /* Content width cap */
    --wb-content-max-width: 75rem;      /* 1200px */

    /* ── Typography Tokens ────────────────────────────────────── */
    --wb-font:              'Poppins', sans-serif;

    /* H1 — hero / page title (44px desktop → 28px mobile, fluid via clamp) */
    --wb-h1-size:           clamp(1.75rem, 1.296rem + 1.939vw, 2.75rem);
    --wb-h1-weight:         700;
    --wb-h1-lh:             1.1;

    /* H2 — section headings (32px desktop → 24px mobile) */
    --wb-h2-size:           clamp(1.5rem, 1.272rem + 0.97vw, 2rem);
    --wb-h2-weight:         600;
    --wb-h2-lh:             1.2;

    /* H3 — sub-section headings (24px desktop → 20px mobile) */
    --wb-h3-size:           clamp(1.25rem, 1.136rem + 0.485vw, 1.5rem);
    --wb-h3-weight:         600;
    --wb-h3-lh:             1.2;

    /* H4 — card / report headings (18px / fixed) */
    --wb-h4-size:           1.125rem;
    --wb-h4-weight:         600;
    --wb-h4-lh:             normal;

    /* H6 — announcement card titles, resource link titles (20px desktop → 18px mobile) */
    --wb-h6-size:           clamp(1.125rem, 1.068rem + 0.242vw, 1.25rem);
    --wb-h6-weight:         600;
    --wb-h6-lh:             1.2;

    /* Card title (16px / 600 / normal — fixed, compact component headings) */
    --wb-card-title-size:   1rem;
    --wb-card-title-weight: 600;

    /* Body1 — hero / intro body (18px / 400 / 150% — fixed) */
    --wb-body1-size:        1.125rem;
    --wb-body1-weight:      400;
    --wb-body1-lh:          1.5;

    /* Body — primary body text (20px / 400 / 27px = 135%) — Figma "body" style */
    --wb-body-size:         1.25rem;
    --wb-body-weight:       400;
    --wb-body-lh:           1.35;
    --wb-body-p-spacing:    1rem;       /* 16px — Figma paragraph spacing */

    /* Body2 — standard body text (16px / 400 / ~144%) */
    --wb-body2-size:        1rem;
    --wb-body2-weight:      400;
    --wb-body2-lh:          1.44;

    /* Body SM — descriptions, card bodies, footer links (14px / 400 / 150%) */
    --wb-body-sm-size:      0.875rem;
    --wb-body-sm-weight:    400;
    --wb-body-sm-lh:        1.5;

    /* UI Label — buttons and CTA links (16px / 600 / 24px = 150%) */
    --wb-label-size:        1rem;
    --wb-label-weight:      600;
    --wb-label-lh:          1.5;

    /* ── Additional Semantic Tokens ──────────────────────────── */
    --wb-banner-hero-bg:    var(--wb-yellow);
    --wb-accordion-border:  var(--wb-warm-gray);
    --wb-quote-accent:      var(--wb-yellow);
    --wb-quote-font:        'Georgia', serif;
}

/* ── Dark-mode semantic token overrides ───────────────────────
   Redefine semantic tokens here so every component that references
   --wb-* variables switches automatically — no per-component dark rules needed.
   ───────────────────────────────────────────────────────────── */
[data-bs-theme=dark] {
    --wb-text:              #f9f7f5;
    --wb-text-body:         #e5e5e5;
    --wb-text-secondary:    #d1d5db;
    --wb-text-subdued:      #a1a1a1;
    --wb-text-muted:        #9f9f9f;
    --wb-bg:                #1f1f1f;
    --wb-bg-surface:        #1f1f1f;
    --wb-card-bg:           #3c3e40;
    --wb-divider:           #495057;
    --wb-banner-bg:         #2a3a4e;
    --wb-link:              var(--wb-light-blue);  /* #59A4D9 — readable on dark bg */
    --wb-cta-bg:            var(--wb-light-blue);
    --wb-cta-bg-hover:      #4a94c9;
    --wb-banner-hero-bg:    #b8960f;
    --wb-accordion-border:  #495057;
    --wb-quote-accent:      #b8960f;
}

/* ── Shared background utility classes (used by ContentBlock components) ── */
.wb-bg-yellow { background-color: var(--wb-yellow); }
.wb-bg-blue   { background-color: var(--wb-cta-bg); }
.wb-bg-gray   { background-color: var(--wb-bg-surface); }

/* ── Content width constraint ────────────────────────────────────────────
   Wrap ContentBlock inner elements that need a max-width + centred layout.
   Replaces per-component max-width / margin: 0 auto / padding patterns.
   Usage in Razor: <div class="wb-content-inner"> ... </div>
   ─────────────────────────────────────────────────────────────────────── */
.wb-content-inner {
    max-width: var(--wb-content-max-width);
    margin-inline: auto;
    padding-inline: var(--wb-gutter);
}

@media (max-width: 767.98px) {
    .wb-content-inner {
        padding-inline: var(--wb-gutter-sm);
    }
}

/* ── Section spacing utility ─────────────────────────────────────────────
   Page-inset sections (sidebar-layout pages).  Provides the standard
   horizontal gutter and top gap that matches the footer and banner spacing.
   Usage: add class="wb-section" to the outer <section> element.
   ─────────────────────────────────────────────────────────────────────── */
.wb-section {
    margin-inline: var(--wb-gutter);
}

@media (max-width: 767.98px) {
    .wb-section {
        margin-inline: var(--wb-gutter-sm);
    }
}

/* ── Reusable CTA button ─────────────────────────────────────── */
.wb-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background-color: var(--wb-cta-bg);
    color: var(--wb-cta-text);
    border: none;
    border-radius: 5px;
    font-family: var(--wb-font);
    font-weight: var(--wb-label-weight);
    font-size: var(--wb-label-size);
    line-height: var(--wb-label-lh);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.2s ease;
}

.wb-cta-btn:hover {
    background-color: var(--wb-cta-bg-hover);
    color: var(--wb-cta-text);
    text-decoration: none;
}

html, body {
    font-family: var(--wb-font);
}

a, .btn-link {
    color: var(--wb-link);
}

.btn-primary {
    color: var(--wb-cta-text);
    background-color: var(--wb-cta-bg);
    border-color: var(--wb-cta-bg-hover);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ── Report page layout ──────────────────────────────────────── */
/* Wrapper for the content area beneath the PageBanner on all report/commission
   pages. PageBannerBlock is full-bleed (no dynamic-page-content wrapper), so
   this class must supply both horizontal gutters and vertical section spacing. */

.report-page-content {
    padding-inline: var(--wb-gutter);
    padding-block: var(--wb-section-gap);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (max-width: 991.98px) {
    .report-page-content {
        padding-block: var(--wb-section-gap-md);
    }
}

@media (max-width: 767.98px) {
    .report-page-content {
        padding-inline: var(--wb-gutter-sm);
        padding-block: var(--wb-section-gap-sm);
    }
}

/* ── Sortable table columns (shared by all report & commission pages) ── */
.sortable-col {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.sortable-col:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Sort header buttons shared by CareLetters tables. */
.sort-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.sort-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

.sort-btn .sort-icon-inactive {
    opacity: 0.35;
    font-size: 0.75em;
}

.sort-btn .sort-icon-active {
    opacity: 1;
    font-size: 0.75em;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── Dynamic page layout ─────────────────────────────────────────
   Shared by every page that wraps <ContentBlockRenderer> in
   <div class="dynamic-page">: DynamicPage, Home, Products,
   DynamicPage (both single- and two-segment routes), Home, Forms.
   Defined here (global) so CSS isolation on individual page
   components does not prevent the rules from applying.
   ──────────────────────────────────────────────────────────────── */
.dynamic-page {
    background-color: var(--wb-bg);
}

/* Wrapper emitted by ContentBlockRenderer around non-full-bleed blocks.
   Provides standard Figma gutter padding and section-gap rhythm.    */
.dynamic-page-content {
    display: flex;
    flex-direction: column;
    gap: var(--wb-section-gap);
    padding: var(--wb-section-gap);
}

/* Reset self-spacing on components that carry their own margin/padding
   for standalone use — the parent gap handles vertical rhythm here.  */
.dynamic-page-content .links-section,
.dynamic-page-content .card-grid-section,
.dynamic-page-content .quick-links-section,
.dynamic-page-content .accordion-section,
.dynamic-page-content .contact-cards-block,
.dynamic-page-content .announcement-banner,
.dynamic-page-content .article-body,
.dynamic-page-content .media-section {
    margin: 0;
}

@media (max-width: 991.98px) {
    .dynamic-page-content {
        padding: var(--wb-section-gap-md) var(--wb-gutter);
        gap: var(--wb-section-gap-md);
    }
}

@media (max-width: 767.98px) {
    .dynamic-page-content {
        padding: var(--wb-section-gap-sm) var(--wb-gutter-sm);
        gap: var(--wb-section-gap-sm);
    }
}

.econtracting-page-content {
    display: flex;
    flex-direction: column;
    gap: var(--wb-section-gap);
    padding: var(--wb-section-gap);
}

@media (max-width: 991.98px) {
    .econtracting-page-content {
        padding: var(--wb-section-gap-md) var(--wb-gutter);
        gap: var(--wb-section-gap-md);
    }
}

@media (max-width: 767.98px) {
    .econtracting-page-content {
        padding: var(--wb-section-gap-sm) var(--wb-gutter-sm);
        gap: var(--wb-section-gap-sm);
    }
}

/* ── form-check-input reset ──────────────────────────────────────
   main.min.css applies a global sun/moon dark-mode toggle style to
   ALL .form-check-input elements (yellow bg, 2.5em height, SVG
   background-image). The rules below restore Bootstrap 5 defaults
   for every standard checkbox and radio in the site.

   Specificity notes:
   - main.min.css uses .form-check-input           (0,1,0) for height/bg/border
   - main.min.css uses .form-check .form-check-input (0,2,0) for width/bg-image
   Our selectors must match or exceed those levels to win.
   ──────────────────────────────────────────────────────────────── */

/* Reset height, background-color, border — matches main.min.css specificity (0,1,0) */
.form-check-input {
    height: 1em !important;
    background-color: var(--bs-form-check-bg) !important;
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
}

/* Reset width and background-image — uses same specificity (0,2,0) as main.min.css */
.form-check .form-check-input {
    width: 1em !important;
    background-image: var(--bs-form-check-bg-image) !important;
}

.form-check-input:focus {
    border-color: #86b6fe !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

.form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}

/* Restore checked state background-images — uses (0,2,0) to beat main.min.css */
.form-check .form-check-input:checked {
    background-image: var(--bs-form-check-bg-image) !important;
    background-color: #0d6efd !important;
}

/* Restore checked radio dot */
.form-check-input[type=radio]:checked {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}

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

.econtracting-title {
    font-family: var(--wb-font);
    font-weight: var(--wb-h1-weight);
    font-size: var(--wb-h1-size);
    line-height: var(--wb-h1-lh);
    color: var(--wb-text);
    margin: 0;
}

.econtracting-sub-title {
    font-family: var(--wb-font);
    font-weight: var(--wb-h2-weight);
    font-size: var(--wb-h2-size);
    line-height: var(--wb-h2-lh);
    color: var(--wb-text);
    margin: 0;
}

.econtracting-text {
    font-weight: var(--wb-body2-weight);
    font-size: var(--wb-body2-size);
    line-height: var(--wb-body2-lh);
    color: var(--wb-text-subdued);
    margin: 0;
}

.tableFixed {
    table-layout: fixed;
}