/* ============================================================================
 * JDI Justice42 Portal - Fluent UI 2 Web Light theme
 * ----------------------------------------------------------------------------
 * Scope:   Applies site-wide when referenced from the Page Template or Header.
 * Source:  Mirrors Fluent UI 2 Web Light design tokens (not an exact copy).
 * Update:  Bump the querystring cache-buster when you ship changes.
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * 1. Design tokens (custom properties)
 * ---------------------------------------------------------------------------- */

:root {
    /* Brand ramp - Fluent Communication Blue, tuned for Web Light */
    --jdi-color-brand-10: #001322;
    --jdi-color-brand-20: #002848;
    --jdi-color-brand-30: #003E6E;
    --jdi-color-brand-40: #005494;
    --jdi-color-brand-50: #005A9E;   /* primary pressed */
    --jdi-color-brand-60: #106EBE;   /* primary hover */
    --jdi-color-brand-70: #0078D4;   /* primary rest */
    --jdi-color-brand-80: #2B88D8;
    --jdi-color-brand-90: #3A96DD;
    --jdi-color-brand-100: #5FA8E3;
    --jdi-color-brand-110: #7FBCE9;
    --jdi-color-brand-120: #A3D0F0;
    --jdi-color-brand-130: #C7E0F4;
    --jdi-color-brand-140: #DEECF9;
    --jdi-color-brand-150: #EFF6FC;
    --jdi-color-brand-160: #F8FBFE;

    /* Semantic brand tokens */
    --jdi-color-brand-background: var(--jdi-color-brand-70);
    --jdi-color-brand-background-hover: var(--jdi-color-brand-60);
    --jdi-color-brand-background-pressed: var(--jdi-color-brand-50);
    --jdi-color-brand-background-selected: var(--jdi-color-brand-50);
    --jdi-color-brand-background-static: var(--jdi-color-brand-70);
    --jdi-color-brand-foreground: var(--jdi-color-brand-70);
    --jdi-color-brand-foreground-hover: var(--jdi-color-brand-60);
    --jdi-color-brand-foreground-link: var(--jdi-color-brand-70);
    --jdi-color-brand-foreground-link-hover: var(--jdi-color-brand-60);
    --jdi-color-brand-stroke-1: var(--jdi-color-brand-70);
    --jdi-color-brand-stroke-2: var(--jdi-color-brand-140);

    /*
     * Power Pages / Portal Studio palette bridge.
     * portalbasictheme.css and theme.css often read these variables, so alias
     * them to Fluent surfaces instead of the generated pink / burgundy palette.
     */
    --portalThemeColor1: var(--jdi-color-neutral-background-1);
    --portalThemeColor2: var(--jdi-color-neutral-foreground-1);
    --portalThemeColor3: var(--jdi-color-neutral-background-2);
    --portalThemeColor4: var(--jdi-color-neutral-foreground-1);
    --portalThemeColor5: var(--jdi-color-neutral-background-3);
    --portalThemeColor6: var(--jdi-color-neutral-foreground-3);
    --portalThemeColor7: var(--jdi-color-brand-150);
    --portalThemeColor8: #000000;
    --portalThemeColor9: var(--jdi-color-neutral-foreground-1);
    --portalThemeColor10: var(--jdi-color-brand-70);
    --portalThemeColor11: var(--jdi-color-neutral-background-4);
    --portalThemeColor12: var(--jdi-color-brand-140);

    --portalThemeOnColor1: var(--jdi-color-text);
    --portalThemeOnColor2: #FFFFFF;
    --portalThemeOnColor3: var(--jdi-color-text);
    --portalThemeOnColor4: #FFFFFF;
    --portalThemeOnColor5: var(--jdi-color-text);
    --portalThemeOnColor6: #FFFFFF;
    --portalThemeOnColor7: var(--jdi-color-brand-30);
    --portalThemeOnColor8: #FFFFFF;
    --portalThemeOnColor9: #FFFFFF;
    --portalThemeOnColor10: #FFFFFF;
    --portalThemeOnColor11: var(--jdi-color-text);
    --portalThemeOnColor12: var(--jdi-color-brand-30);

    /* Neutral surfaces */
    --jdi-color-neutral-background-1: #FFFFFF;
    --jdi-color-neutral-background-1-hover: #F5F5F5;
    --jdi-color-neutral-background-1-pressed: #E0E0E0;
    --jdi-color-neutral-background-1-selected: #EBEBEB;
    --jdi-color-neutral-background-2: #FAFAFA;
    --jdi-color-neutral-background-2-hover: #F0F0F0;
    --jdi-color-neutral-background-3: #F5F5F5;
    --jdi-color-neutral-background-3-hover: #EBEBEB;
    --jdi-color-neutral-background-4: #F0F0F0;
    --jdi-color-neutral-background-5: #EBEBEB;
    --jdi-color-neutral-background-6: #E6E6E6;
    --jdi-color-neutral-background-disabled: #F0F0F0;
    --jdi-color-neutral-background-canvas: #F5F5F5;

    /* Neutral foregrounds (text) */
    --jdi-color-neutral-foreground-1: #242424;
    --jdi-color-neutral-foreground-1-hover: #242424;
    --jdi-color-neutral-foreground-2: #424242;
    --jdi-color-neutral-foreground-2-hover: #242424;
    --jdi-color-neutral-foreground-3: #616161;
    --jdi-color-neutral-foreground-3-hover: #424242;
    --jdi-color-neutral-foreground-4: #707070;
    --jdi-color-neutral-foreground-disabled: #BDBDBD;
    --jdi-color-neutral-foreground-on-brand: #FFFFFF;

    /* Strokes */
    --jdi-color-neutral-stroke-1: #D1D1D1;
    --jdi-color-neutral-stroke-1-hover: #C7C7C7;
    --jdi-color-neutral-stroke-1-pressed: #B3B3B3;
    --jdi-color-neutral-stroke-2: #E0E0E0;
    --jdi-color-neutral-stroke-3: #F0F0F0;
    --jdi-color-neutral-stroke-accessible: #616161;
    --jdi-color-neutral-stroke-accessible-hover: #575757;
    --jdi-color-neutral-stroke-disabled: #E0E0E0;
    --jdi-color-neutral-stroke-subtle: #EBEBEB;
    --jdi-color-neutral-stroke-on-brand: #FFFFFF;
    --jdi-color-neutral-stroke-divider: #EBEBEB;

    /* Status / shared colors */
    --jdi-color-status-success-background-1: #F1FAF1;
    --jdi-color-status-success-background-2: #9FD89F;
    --jdi-color-status-success-background-3: #107C10;
    --jdi-color-status-success-foreground-1: #0E700E;
    --jdi-color-status-success-foreground-2: #054B16;
    --jdi-color-status-success-foreground-3: #FFFFFF;
    --jdi-color-status-success-border-1: #9FD89F;
    --jdi-color-status-success-border-2: #107C10;

    --jdi-color-status-warning-background-1: #FFF9F5;
    --jdi-color-status-warning-background-2: #FDCFB4;
    --jdi-color-status-warning-background-3: #F7630C;
    --jdi-color-status-warning-foreground-1: #AF4E0B;
    --jdi-color-status-warning-foreground-2: #4A1E04;
    --jdi-color-status-warning-foreground-3: #FFFFFF;
    --jdi-color-status-warning-border-1: #FDCFB4;
    --jdi-color-status-warning-border-2: #F7630C;

    --jdi-color-status-danger-background-1: #FDF3F4;
    --jdi-color-status-danger-background-2: #EEACB2;
    --jdi-color-status-danger-background-3: #C50F1F;
    --jdi-color-status-danger-foreground-1: #B10E1C;
    --jdi-color-status-danger-foreground-2: #6E0811;
    --jdi-color-status-danger-foreground-3: #FFFFFF;
    --jdi-color-status-danger-border-1: #EEACB2;
    --jdi-color-status-danger-border-2: #C50F1F;

    --jdi-color-status-info-background-1: #EBF3FC;
    --jdi-color-status-info-background-2: #A9D3F2;
    --jdi-color-status-info-background-3: #0078D4;
    --jdi-color-status-info-foreground-1: #005A9E;
    --jdi-color-status-info-foreground-2: #002B4E;
    --jdi-color-status-info-foreground-3: #FFFFFF;
    --jdi-color-status-info-border-1: #A9D3F2;
    --jdi-color-status-info-border-2: #0078D4;

    /* Typography */
    --jdi-font-family-base: "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Arial, sans-serif;
    --jdi-font-family-numeric: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    --jdi-font-family-monospace: "Cascadia Code", "Consolas", "Courier New", monospace;

    --jdi-font-size-100: 10px;
    --jdi-font-size-200: 12px;
    --jdi-font-size-300: 14px;   /* body */
    --jdi-font-size-400: 16px;   /* body emphasized */
    --jdi-font-size-500: 20px;   /* subtitle 2 */
    --jdi-font-size-600: 24px;   /* subtitle 1 */
    --jdi-font-size-700: 28px;   /* title 3 */
    --jdi-font-size-800: 32px;   /* title 2 */
    --jdi-font-size-900: 40px;   /* title 1 */
    --jdi-font-size-1000: 68px;  /* display */

    --jdi-line-height-100: 14px;
    --jdi-line-height-200: 16px;
    --jdi-line-height-300: 20px;
    --jdi-line-height-400: 22px;
    --jdi-line-height-500: 28px;
    --jdi-line-height-600: 32px;
    --jdi-line-height-700: 36px;
    --jdi-line-height-800: 40px;
    --jdi-line-height-900: 52px;
    --jdi-line-height-1000: 92px;

    --jdi-font-weight-regular: 400;
    --jdi-font-weight-medium: 500;
    --jdi-font-weight-semibold: 600;
    --jdi-font-weight-bold: 700;

    /* Spacing scale (4px base grid) */
    --jdi-spacing-none: 0;
    --jdi-spacing-xxs: 2px;
    --jdi-spacing-xs: 4px;
    --jdi-spacing-s: 8px;
    --jdi-spacing-m-nudge: 10px;
    --jdi-spacing-m: 12px;
    --jdi-spacing-l: 16px;
    --jdi-spacing-xl: 20px;
    --jdi-spacing-xxl: 24px;
    --jdi-spacing-xxxl: 32px;
    --jdi-spacing-4xl: 40px;
    --jdi-spacing-5xl: 48px;
    --jdi-spacing-6xl: 64px;

    /* Radius scale */
    --jdi-radius-none: 0;
    --jdi-radius-small: 2px;
    --jdi-radius-medium: 4px;
    --jdi-radius-large: 6px;
    --jdi-radius-xlarge: 8px;
    --jdi-radius-circular: 9999px;

    /* Stroke widths */
    --jdi-stroke-width-thin: 1px;
    --jdi-stroke-width-thick: 2px;
    --jdi-stroke-width-thicker: 3px;

    /* Shadow ramp */
    --jdi-shadow-2: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14);
    --jdi-shadow-4: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
    --jdi-shadow-8: 0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14);
    --jdi-shadow-16: 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14);
    --jdi-shadow-28: 0 0 8px rgba(0, 0, 0, 0.12), 0 14px 28px rgba(0, 0, 0, 0.24);
    --jdi-shadow-64: 0 0 8px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.24);
    --jdi-shadow-brand-2: 0 0 2px rgba(15, 108, 189, 0.30), 0 1px 2px rgba(15, 108, 189, 0.25);
    --jdi-shadow-brand-8: 0 0 2px rgba(15, 108, 189, 0.30), 0 4px 8px rgba(15, 108, 189, 0.25);

    /* Motion */
    --jdi-duration-ultra-fast: 50ms;
    --jdi-duration-faster: 100ms;
    --jdi-duration-fast: 150ms;
    --jdi-duration-normal: 200ms;
    --jdi-duration-slow: 300ms;
    --jdi-duration-slower: 400ms;

    --jdi-curve-accelerate-max: cubic-bezier(1, 0, 1, 1);
    --jdi-curve-accelerate-mid: cubic-bezier(0.7, 0, 1, 0.5);
    --jdi-curve-decelerate-max: cubic-bezier(0, 0, 0, 1);
    --jdi-curve-decelerate-mid: cubic-bezier(0.1, 0.9, 0.2, 1);
    --jdi-curve-easy-ease: cubic-bezier(0.33, 0, 0.67, 1);
    --jdi-curve-linear: linear;

    /* Layout — wider than classic 1280 so entity lists / basic forms use more of the viewport */
    --jdi-max-content-width: min(1680px, calc(100vw - 48px));
    --jdi-header-height: 64px;
    --jdi-focus-ring-width: 2px;
    --jdi-focus-ring-offset: 2px;

    /* Aliases kept stable for consumers */
    --jdi-color-page-background: var(--jdi-color-neutral-background-canvas);
    --jdi-color-surface: var(--jdi-color-neutral-background-1);
    --jdi-color-surface-alt: var(--jdi-color-neutral-background-2);
    --jdi-color-text: var(--jdi-color-neutral-foreground-1);
    --jdi-color-text-secondary: var(--jdi-color-neutral-foreground-2);
    --jdi-color-text-muted: var(--jdi-color-neutral-foreground-3);
    --jdi-color-border: var(--jdi-color-neutral-stroke-1);
    --jdi-color-border-subtle: var(--jdi-color-neutral-stroke-2);
}

/* ----------------------------------------------------------------------------
 * 2. Base / resets
 * ---------------------------------------------------------------------------- */

html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    font-family: var(--jdi-font-family-base);
    font-size: var(--jdi-font-size-300);
    line-height: var(--jdi-line-height-300);
    color: var(--jdi-color-text);
    background-color: var(--jdi-color-page-background);
    font-feature-settings: "ss02" on, "cv11" on;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--jdi-color-text);
    font-weight: var(--jdi-font-weight-semibold);
    margin: 0 0 var(--jdi-spacing-l);
    letter-spacing: -0.01em;
}

h1 { font-size: var(--jdi-font-size-800); line-height: var(--jdi-line-height-800); font-weight: var(--jdi-font-weight-semibold); }
h2 { font-size: var(--jdi-font-size-700); line-height: var(--jdi-line-height-700); }
h3 { font-size: var(--jdi-font-size-600); line-height: var(--jdi-line-height-600); }
h4 { font-size: var(--jdi-font-size-500); line-height: var(--jdi-line-height-500); }
h5 { font-size: var(--jdi-font-size-400); line-height: var(--jdi-line-height-400); }
h6 { font-size: var(--jdi-font-size-300); line-height: var(--jdi-line-height-300); text-transform: uppercase; letter-spacing: 0.04em; color: var(--jdi-color-text-secondary); }

/*
 * Power Pages starter CSS (portalbasictheme / Bootstrap) sets h1–h6 to Arial with
 * equal or higher specificity. Re-apply the Fluent font stack on main content.
 * !important is intentional here so our theme wins over bundled portal rules.
 */
#mainContent h1,
#mainContent h2,
#mainContent h3,
#mainContent h4,
#mainContent h5,
#mainContent h6,
#mainContent .h1,
#mainContent .h2,
#mainContent .h3,
#mainContent .h4,
#mainContent .h5,
#mainContent .h6,
.wrapper-body h1,
.wrapper-body h2,
.wrapper-body h3,
.wrapper-body h4,
.wrapper-body h5,
.wrapper-body h6,
.wrapper-body .h1,
.wrapper-body .h2,
.wrapper-body .h3,
.wrapper-body .h4,
.wrapper-body .h5,
.wrapper-body .h6 {
    font-family: var(--jdi-font-family-base) !important;
}

/*
 * portalbasictheme also forces Arial on paragraphs (see portalbasic p, .p, .page_section p, …).
 */
#mainContent p,
#mainContent .p,
#mainContent .page_section p,
#mainContent .section-diagonal-left p,
#mainContent .section-diagonal-right p,
#mainContent .p.form-text span,
.wrapper-body p,
.wrapper-body .p,
.wrapper-body .page_section p,
.wrapper-body .section-diagonal-left p,
.wrapper-body .section-diagonal-right p,
.wrapper-body .p.form-text span {
    font-family: var(--jdi-font-family-base) !important;
}

/*
 * portalbasictheme also forces Arial on inline/text elements such as span, a,
 * li, td, th, label, small, strong, em through selectors like
 * .navbar-dark .navbar-nav > li > a or .row > div .section, .sub, .heading,
 * .page_section h2, ... span. Re-apply the Fluent stack everywhere the portal
 * emits those tags inside main content, site chrome, and the custom footer.
 */
#mainContent span,
#mainContent a,
#mainContent li,
#mainContent td,
#mainContent th,
#mainContent label,
#mainContent small,
#mainContent strong,
#mainContent em,
.wrapper-body span,
.wrapper-body a,
.wrapper-body li,
.wrapper-body td,
.wrapper-body th,
.wrapper-body label,
.wrapper-body small,
.wrapper-body strong,
.wrapper-body em,
.breadcrumb span,
.breadcrumb a,
.j42-footer span,
.j42-footer a,
.j42-footer li {
    font-family: var(--jdi-font-family-base) !important;
}

/*
 * Do NOT set font-family on .navbar span globally: search and nav icons use
 * Glyphicons (or other icon webfonts). Forcing the Fluent body font with
 * !important prevents the icon font from applying (tofu / empty glyph).
 * Navbar links and buttons are already covered by rules below; text in spans
 * inherits from .navbar a / .weblinks .weblink a.
 *
 * IMPORTANT: #mainContent span and .wrapper-body span (above) use !important
 * and higher specificity than .navbar .glyphicon alone, so icon spans in the
 * header still inherited the body font. These selectors beat #mainContent span.
 */
#mainContent .navbar .glyphicon,
#mainContent .navbar [class*="glyphicon-"],
#mainContent .weblinks .glyphicon,
#mainContent .weblinks [class*="glyphicon-"],
#mainContent header .glyphicon,
.wrapper-body .navbar .glyphicon,
.wrapper-body .navbar [class*="glyphicon-"],
.wrapper-body .weblinks .glyphicon,
.wrapper-body .weblinks [class*="glyphicon-"],
.navbar .glyphicon,
.weblinks .glyphicon,
.navbar [class*="glyphicon-"] {
    font-family: "Glyphicons Halflings" !important;
}

/* Some Power Pages / Fabric headers use MDL2 icon font on <i> or span */
#mainContent .navbar [class*="ms-Icon"],
#mainContent .weblinks [class*="ms-Icon"],
.wrapper-body .navbar [class*="ms-Icon"],
.wrapper-body .weblinks [class*="ms-Icon"],
.navbar [class*="ms-Icon"],
.weblinks [class*="ms-Icon"] {
    font-family: "Fabric MDL2 Icons", "Fabric MDL2", "Segoe MDL2 Assets" !important;
}

/* Icon on the anchor itself (some themes) */
#mainContent a.glyphicon,
#mainContent .weblinks a[class*="glyphicon"],
.wrapper-body a.glyphicon,
.navbar a.glyphicon,
.weblinks a[class*="glyphicon"] {
    font-family: "Glyphicons Halflings" !important;
}

/* Inline SVG search icon in header (replaces mixed glyphicon + Font Awesome markup) */
.jdi-header-search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: inherit;
}

.jdi-header-search-icon svg {
    display: block;
    color: inherit;
}

/*
 * Footer: portalbasic uses .page_section .color-inverse h3, .sidebar-home h3, etc.
 * { font-family: Arial } with higher specificity than .j42-footer h3. The footer
 * element uses id j42-site-footer so these rules always win.
 */
#j42-site-footer,
#j42-site-footer h1,
#j42-site-footer h2,
#j42-site-footer h3,
#j42-site-footer h4,
#j42-site-footer h5,
#j42-site-footer h6,
#j42-site-footer .h1,
#j42-site-footer .h2,
#j42-site-footer .h3,
#j42-site-footer .h4,
#j42-site-footer .h5,
#j42-site-footer .h6,
#j42-site-footer p,
#j42-site-footer address,
#j42-site-footer li,
#j42-site-footer a,
#j42-site-footer span,
#j42-site-footer strong,
#j42-site-footer small,
#j42-site-footer em {
    font-family: var(--jdi-font-family-base) !important;
}

#j42-site-footer .j42-footer-title {
    font-size: var(--jdi-font-size-400) !important;
    font-weight: var(--jdi-font-weight-semibold) !important;
    line-height: var(--jdi-line-height-400) !important;
}

/*
 * Footer text color: inside .page_section.color-inverse (or similar) portalbasic
 * sets color: #fff on descendants, so body copy in the light footer is invisible.
 * Re-assert foreground colors on a light background.
 */
#j42-site-footer {
    color: var(--jdi-color-text-secondary) !important;
    background-color: var(--jdi-color-neutral-background-2) !important;
}

#j42-site-footer .j42-footer-title,
#j42-site-footer h1,
#j42-site-footer h2,
#j42-site-footer h3,
#j42-site-footer h4,
#j42-site-footer h5,
#j42-site-footer h6 {
    color: var(--jdi-color-text) !important;
}

#j42-site-footer p,
#j42-site-footer .j42-footer-muted,
#j42-site-footer address,
#j42-site-footer .j42-footer-list li {
    color: var(--jdi-color-text-secondary) !important;
}

#j42-site-footer .j42-footer-list a {
    color: var(--jdi-color-brand-foreground-link) !important;
}

#j42-site-footer .j42-footer-list a:hover,
#j42-site-footer .j42-footer-list a:focus {
    color: var(--jdi-color-brand-foreground-link-hover) !important;
}

#j42-site-footer .j42-footer-bottom,
#j42-site-footer .j42-footer-bottom span {
    color: var(--jdi-color-text-muted) !important;
}

#j42-site-footer .j42-footer-bottom a {
    color: var(--jdi-color-text-secondary) !important;
}

#j42-site-footer .j42-footer-bottom a:hover,
#j42-site-footer .j42-footer-bottom a:focus {
    color: var(--jdi-color-brand-foreground-link-hover) !important;
}

#j42-site-footer .j42-footer-bottom strong {
    color: var(--jdi-color-text-secondary) !important;
}

p {
    margin: 0 0 var(--jdi-spacing-m);
    color: var(--jdi-color-text);
}

small,
.jdi-caption {
    font-size: var(--jdi-font-size-200);
    line-height: var(--jdi-line-height-200);
    color: var(--jdi-color-text-muted);
}

a {
    color: var(--jdi-color-brand-foreground-link);
    text-decoration: none;
    transition: color var(--jdi-duration-faster) var(--jdi-curve-easy-ease);
}

a:hover {
    color: var(--jdi-color-brand-foreground-link-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:focus-visible {
    outline: var(--jdi-focus-ring-width) solid var(--jdi-color-brand-stroke-1);
    outline-offset: var(--jdi-focus-ring-offset);
    border-radius: var(--jdi-radius-small);
}

hr {
    border: 0;
    border-top: var(--jdi-stroke-width-thin) solid var(--jdi-color-neutral-stroke-divider);
    margin: var(--jdi-spacing-xxl) 0;
}

code,
kbd,
pre,
samp {
    font-family: var(--jdi-font-family-monospace);
    font-size: 0.92em;
}

img,
video {
    max-width: 100%;
    height: auto;
}

::selection {
    background-color: var(--jdi-color-brand-140);
    color: var(--jdi-color-brand-30);
}

/* Global focus ring (browsers that support :focus-visible) */
*:focus {
    outline: none;
}

*:focus-visible {
    outline: var(--jdi-focus-ring-width) solid var(--jdi-color-brand-stroke-1);
    outline-offset: var(--jdi-focus-ring-offset);
    border-radius: var(--jdi-radius-medium);
}

/* ----------------------------------------------------------------------------
 * 3. Page scaffold
 * ---------------------------------------------------------------------------- */

.jdi-container,
.container {
    width: 100%;
    max-width: var(--jdi-max-content-width);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--jdi-spacing-xxl);
    padding-left: var(--jdi-spacing-xxl);
}

/* Bootstrap "fluid" must not inherit the capped max-width — that was squeezing
   Power Pages entity lists and other full-width sections into 1280px. */
.container-fluid {
    width: 100%;
    max-width: none !important;
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--jdi-spacing-xxl);
    padding-left: var(--jdi-spacing-xxl);
}

@media (min-width: 768px) {
    .jdi-container,
    .container,
    .container-fluid {
        padding-right: var(--jdi-spacing-xxxl);
        padding-left: var(--jdi-spacing-xxxl);
    }
}

.jdi-page {
    min-height: calc(100vh - var(--jdi-header-height));
    padding: var(--jdi-spacing-xxl) 0 var(--jdi-spacing-5xl);
}

.jdi-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--jdi-spacing-l);
    padding-bottom: var(--jdi-spacing-xl);
    margin-bottom: var(--jdi-spacing-xxl);
    border-bottom: var(--jdi-stroke-width-thin) solid var(--jdi-color-neutral-stroke-divider);
}

.jdi-page-title {
    font-size: var(--jdi-font-size-800);
    line-height: var(--jdi-line-height-800);
    font-weight: var(--jdi-font-weight-semibold);
    margin: 0;
    letter-spacing: -0.015em;
}

.jdi-page-subtitle {
    font-size: var(--jdi-font-size-400);
    line-height: var(--jdi-line-height-400);
    color: var(--jdi-color-text-secondary);
    margin: var(--jdi-spacing-xs) 0 0;
}

.jdi-section {
    margin-bottom: var(--jdi-spacing-4xl);
}

/* ----------------------------------------------------------------------------
 * 3b. Platform theme reset (theme.css / portalbasictheme.css bridge)
 * ---------------------------------------------------------------------------- */

body,
#mainContent,
.wrapper-body {
    color: var(--jdi-color-text) !important;
    background-color: var(--jdi-color-page-background) !important;
}

/* Generated Portal Studio theme sections */
[data-component-theme="portalThemeColor1"],
[data-component-theme="portalThemeColor3"],
[data-component-theme="portalThemeColor5"] {
    background-color: var(--jdi-color-neutral-background-1) !important;
    color: var(--jdi-color-text) !important;
}

[data-component-theme="portalThemeColor7"],
[data-component-theme="portalThemeColor12"] {
    background-color: var(--jdi-color-brand-150) !important;
    color: var(--jdi-color-brand-30) !important;
}

[data-component-theme="portalThemeColor2"],
[data-component-theme="portalThemeColor4"],
[data-component-theme="portalThemeColor6"],
[data-component-theme="portalThemeColor8"],
[data-component-theme="portalThemeColor9"],
[data-component-theme="portalThemeColor10"] {
    background-color: var(--jdi-color-brand-background) !important;
    color: var(--jdi-color-neutral-foreground-on-brand) !important;
}

[data-component-theme] h1,
[data-component-theme] h2,
[data-component-theme] h3,
[data-component-theme] h4,
[data-component-theme] h5,
[data-component-theme] h6,
[data-component-theme] p,
[data-component-theme] span,
[data-component-theme] li {
    color: inherit !important;
}

/* Legacy landing / inverse sections from theme.css should be light and readable. */
#mainContent .page_section,
.wrapper-body .page_section,
#mainContent .sectionBlockLayout,
.wrapper-body .sectionBlockLayout {
    color: var(--jdi-color-text) !important;
}

#mainContent .page_section.color-inverse,
.wrapper-body .page_section.color-inverse,
#mainContent .section-landing-search,
.wrapper-body .section-landing-search,
#mainContent .section-landing-forums,
.wrapper-body .section-landing-forums {
    background-color: var(--jdi-color-neutral-background-1) !important;
    color: var(--jdi-color-text) !important;
}

#mainContent .page_section.color-inverse h1,
#mainContent .page_section.color-inverse h2,
#mainContent .page_section.color-inverse h3,
#mainContent .page_section.color-inverse h4,
#mainContent .page_section.color-inverse h5,
#mainContent .page_section.color-inverse h6,
#mainContent .page_section.color-inverse p,
#mainContent .page_section.color-inverse span,
.wrapper-body .page_section.color-inverse h1,
.wrapper-body .page_section.color-inverse h2,
.wrapper-body .page_section.color-inverse h3,
.wrapper-body .page_section.color-inverse h4,
.wrapper-body .page_section.color-inverse h5,
.wrapper-body .page_section.color-inverse h6,
.wrapper-body .page_section.color-inverse p,
.wrapper-body .page_section.color-inverse span {
    color: var(--jdi-color-text) !important;
}

/* Links and legacy components that were hard-coded to purple/cyan. */
#mainContent a,
.wrapper-body a,
.breadcrumb > li a,
.pagination > li > a,
.pagination > li > span {
    color: var(--jdi-color-brand-foreground-link) !important;
}

#mainContent a:hover,
#mainContent a:focus,
.wrapper-body a:hover,
.wrapper-body a:focus,
.breadcrumb > li a:hover,
.pagination > li > a:hover,
.pagination > li > span:hover {
    color: var(--jdi-color-brand-foreground-link-hover) !important;
}

.pagination > li > a,
.pagination > li > span {
    background-color: transparent !important;
    border-color: transparent !important;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background-color: var(--jdi-color-brand-background) !important;
    border-color: var(--jdi-color-brand-background) !important;
    color: var(--jdi-color-neutral-foreground-on-brand) !important;
}

/* Legacy home/landing buttons should follow Fluent button semantics. */
.btn-info-home,
.btn-lg-home,
.btn-default,
.btn-secondary {
    font-family: var(--jdi-font-family-base) !important;
}

.btn-info-home {
    color: var(--jdi-color-brand-foreground) !important;
    border-color: var(--jdi-color-brand-stroke-1) !important;
    background-color: var(--jdi-color-neutral-background-1) !important;
}

.btn-info-home:hover,
.btn-info-home:focus,
.btn-info-home:active {
    color: var(--jdi-color-brand-foreground-hover) !important;
    border-color: var(--jdi-color-brand-foreground-hover) !important;
    background-color: var(--jdi-color-brand-150) !important;
}

#mainContent .btn-primary,
.wrapper-body .btn-primary,
#mainContent .btn.btn-primary,
.wrapper-body .btn.btn-primary {
    background-color: var(--jdi-color-brand-background) !important;
    border-color: var(--jdi-color-brand-background) !important;
    color: var(--jdi-color-neutral-foreground-on-brand) !important;
}

#mainContent .btn-primary:hover,
#mainContent .btn-primary:focus,
.wrapper-body .btn-primary:hover,
.wrapper-body .btn-primary:focus,
#mainContent .btn.btn-primary:hover,
#mainContent .btn.btn-primary:focus,
.wrapper-body .btn.btn-primary:hover,
.wrapper-body .btn.btn-primary:focus {
    background-color: var(--jdi-color-brand-background-hover) !important;
    border-color: var(--jdi-color-brand-background-hover) !important;
    color: var(--jdi-color-neutral-foreground-on-brand) !important;
}

#mainContent .btn-default,
#mainContent .btn-secondary,
.wrapper-body .btn-default,
.wrapper-body .btn-secondary {
    background-color: var(--jdi-color-neutral-background-1) !important;
    border-color: var(--jdi-color-neutral-stroke-1) !important;
    color: var(--jdi-color-text) !important;
}

/* Forms / tables from legacy Bootstrap should use Fluent neutrals. */
#mainContent .form-control,
.wrapper-body .form-control,
#mainContent input[type="text"],
#mainContent input[type="email"],
#mainContent input[type="search"],
#mainContent input[type="tel"],
#mainContent input[type="url"],
#mainContent textarea,
#mainContent select,
.wrapper-body input[type="text"],
.wrapper-body input[type="email"],
.wrapper-body input[type="search"],
.wrapper-body input[type="tel"],
.wrapper-body input[type="url"],
.wrapper-body textarea,
.wrapper-body select {
    background-color: var(--jdi-color-neutral-background-1) !important;
    border-color: var(--jdi-color-neutral-stroke-2) !important;
    color: var(--jdi-color-text) !important;
}

#mainContent .table,
#mainContent table,
.wrapper-body .table,
.wrapper-body table {
    color: var(--jdi-color-text) !important;
    background-color: var(--jdi-color-neutral-background-1) !important;
}

#mainContent .table > thead > tr > th,
#mainContent table > thead > tr > th,
.wrapper-body .table > thead > tr > th,
.wrapper-body table > thead > tr > th {
    background-color: var(--jdi-color-neutral-background-2) !important;
    border-color: var(--jdi-color-neutral-stroke-2) !important;
    color: var(--jdi-color-text) !important;
}

/* ----------------------------------------------------------------------------
 * 4. Site header / navigation
 * ---------------------------------------------------------------------------- */

/*
 * Skip-to-main link — Power Pages / starter header templates render this for
 * accessibility. It appears as a visible blue link above the navbar when
 * sr-only / off-screen styles are missing. Hiding it removes keyboard focus
 * target for skip navigation; restore a visually-hidden pattern if policy
 * requires WCAG skip link.
 */
a#skipToMain,
a#skipToContent,
a.skip-to-content,
a.skipToContent,
.skip-to-content,
.skipToContent,
.navbar > a[href="#mainContent"],
.navbar > a[href="#main-content"],
header > a[href="#mainContent"],
header > a[href="#main-content"],
.navbar-header > a[href="#mainContent"],
.navbar-header > a[href="#main-content"] {
    display: none !important;
}

.navbar,
.jdi-site-header {
    background-color: var(--jdi-color-neutral-background-1) !important;
    border: none !important;
    box-shadow: var(--jdi-shadow-2);
    min-height: var(--jdi-header-height);
    padding: 0 var(--jdi-spacing-xxl);
    margin-bottom: 0 !important;
}

.navbar-brand,
.jdi-site-brand {
    font-family: var(--jdi-font-family-base) !important;
    font-size: var(--jdi-font-size-500) !important;
    line-height: var(--jdi-header-height) !important;
    font-weight: var(--jdi-font-weight-semibold);
    color: var(--jdi-color-text) !important;
    padding: 0 !important;
    height: var(--jdi-header-height);
    display: flex;
    align-items: center;
    gap: var(--jdi-spacing-s);
}

.navbar-brand:hover,
.jdi-site-brand:hover {
    color: var(--jdi-color-brand-foreground) !important;
    text-decoration: none;
}

.navbar-nav > li > a {
    font-family: var(--jdi-font-family-base) !important;
    color: var(--jdi-color-neutral-foreground-2) !important;
    font-weight: var(--jdi-font-weight-medium) !important;
    font-size: var(--jdi-font-size-300) !important;
    padding: 0 var(--jdi-spacing-l) !important;
    line-height: var(--jdi-header-height) !important;
    border-radius: 0;
    transition: color var(--jdi-duration-faster) var(--jdi-curve-easy-ease),
                background-color var(--jdi-duration-faster) var(--jdi-curve-easy-ease);
}

/*
 * Power Pages starter themes apply Arial to navbar links through selectors such
 * as .navbar-dark .navbar-nav > li > a. Keep the portal chrome on the Fluent
 * font stack as well.
 */
.navbar a,
.navbar button,
.navbar .dropdown-menu,
.navbar .dropdown-menu a,
.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav > li > a,
.navbar-dark .navbar-nav .nav-link,
.navbar-light .navbar-brand,
.navbar-light .navbar-nav > li > a,
.navbar-light .navbar-nav .nav-link,
.navbar-nav .dropdown-menu > li > a,
.navbar-nav .dropdown-toggle,
.weblinks .weblink a,
.weblinks .dropdown-menu a {
    font-family: var(--jdi-font-family-base) !important;
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
    color: var(--jdi-color-text) !important;
    background-color: var(--jdi-color-neutral-background-2) !important;
}

.navbar-nav > li.active > a,
.navbar-nav > li.active > a:hover,
.navbar-nav > li.active > a:focus {
    color: var(--jdi-color-brand-foreground) !important;
    background-color: transparent !important;
    box-shadow: inset 0 -3px 0 var(--jdi-color-brand-stroke-1);
}

/* ----------------------------------------------------------------------------
 * 5. Buttons
 * ---------------------------------------------------------------------------- */

.jdi-btn,
.btn,
button.button,
a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--jdi-spacing-s);
    font-family: var(--jdi-font-family-base);
    font-size: var(--jdi-font-size-300);
    line-height: var(--jdi-line-height-300);
    font-weight: var(--jdi-font-weight-semibold);
    padding: 6px var(--jdi-spacing-m);
    min-height: 32px;
    border: var(--jdi-stroke-width-thin) solid transparent;
    border-radius: var(--jdi-radius-medium);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    text-decoration: none !important;
    transition:
        background-color var(--jdi-duration-faster) var(--jdi-curve-easy-ease),
        border-color var(--jdi-duration-faster) var(--jdi-curve-easy-ease),
        color var(--jdi-duration-faster) var(--jdi-curve-easy-ease),
        box-shadow var(--jdi-duration-faster) var(--jdi-curve-easy-ease);
}

.jdi-btn:disabled,
.jdi-btn.is-disabled,
.btn:disabled,
.btn.disabled {
    cursor: not-allowed !important;
    opacity: 1 !important;
    background-color: var(--jdi-color-neutral-background-disabled) !important;
    color: var(--jdi-color-neutral-foreground-disabled) !important;
    border-color: var(--jdi-color-neutral-stroke-disabled) !important;
    box-shadow: none !important;
}

/* Primary / Brand filled */
.jdi-btn-primary,
.btn-primary,
.btn.btn-primary {
    background-color: var(--jdi-color-brand-background) !important;
    color: var(--jdi-color-neutral-foreground-on-brand) !important;
    border-color: var(--jdi-color-brand-background) !important;
}

/*
 * Link reset rules use selectors like #mainContent a { color: brand-link }.
 * Primary buttons are often anchors, so use higher specificity to keep filled
 * buttons white-on-blue.
 */
#mainContent a.jdi-btn-primary,
#mainContent a.btn-primary,
#mainContent a.btn.btn-primary,
.wrapper-body a.jdi-btn-primary,
.wrapper-body a.btn-primary,
.wrapper-body a.btn.btn-primary,
#mainContent a.jdi-btn-primary *,
#mainContent a.btn-primary *,
#mainContent a.btn.btn-primary *,
.wrapper-body a.jdi-btn-primary *,
.wrapper-body a.btn-primary *,
.wrapper-body a.btn.btn-primary * {
    color: var(--jdi-color-neutral-foreground-on-brand) !important;
}

.jdi-btn-primary:hover,
.btn-primary:hover,
.btn.btn-primary:hover {
    background-color: var(--jdi-color-brand-background-hover) !important;
    border-color: var(--jdi-color-brand-background-hover) !important;
    color: var(--jdi-color-neutral-foreground-on-brand) !important;
}

.jdi-btn-primary:active,
.btn-primary:active,
.btn.btn-primary:active,
.jdi-btn-primary.is-pressed {
    background-color: var(--jdi-color-brand-background-pressed) !important;
    border-color: var(--jdi-color-brand-background-pressed) !important;
}

/* Secondary / outline */
.jdi-btn-secondary,
.btn-default,
.btn-secondary {
    background-color: var(--jdi-color-neutral-background-1) !important;
    color: var(--jdi-color-text) !important;
    border-color: var(--jdi-color-neutral-stroke-1) !important;
}

.jdi-btn-secondary:hover,
.btn-default:hover,
.btn-secondary:hover {
    background-color: var(--jdi-color-neutral-background-1-hover) !important;
    border-color: var(--jdi-color-neutral-stroke-1-hover) !important;
    color: var(--jdi-color-text) !important;
}

.jdi-btn-secondary:active,
.btn-default:active,
.btn-secondary:active {
    background-color: var(--jdi-color-neutral-background-1-pressed) !important;
    border-color: var(--jdi-color-neutral-stroke-1-pressed) !important;
}

/* Subtle (text-only, colored on hover) */
.jdi-btn-subtle {
    background-color: transparent;
    color: var(--jdi-color-text);
    border-color: transparent;
}

.jdi-btn-subtle:hover {
    background-color: var(--jdi-color-neutral-background-1-hover);
    color: var(--jdi-color-text);
}

.jdi-btn-subtle:active {
    background-color: var(--jdi-color-neutral-background-1-pressed);
}

/* Transparent */
.jdi-btn-transparent {
    background-color: transparent;
    color: var(--jdi-color-brand-foreground);
    border-color: transparent;
}

.jdi-btn-transparent:hover {
    background-color: var(--jdi-color-brand-150);
    color: var(--jdi-color-brand-foreground-hover);
}

/* Danger */
.jdi-btn-danger,
.btn-danger {
    background-color: var(--jdi-color-status-danger-background-3) !important;
    color: var(--jdi-color-status-danger-foreground-3) !important;
    border-color: var(--jdi-color-status-danger-background-3) !important;
}

.jdi-btn-danger:hover,
.btn-danger:hover {
    background-color: var(--jdi-color-status-danger-foreground-1) !important;
    border-color: var(--jdi-color-status-danger-foreground-1) !important;
    color: var(--jdi-color-status-danger-foreground-3) !important;
}

/* Sizes */
.jdi-btn-small {
    min-height: 24px;
    padding: 2px var(--jdi-spacing-s);
    font-size: var(--jdi-font-size-200);
}

.jdi-btn-large {
    min-height: 40px;
    padding: var(--jdi-spacing-s) var(--jdi-spacing-l);
    font-size: var(--jdi-font-size-400);
}

/* Icon-only button */
.jdi-btn-icon {
    width: 32px;
    min-width: 32px;
    padding: 0;
}

.jdi-btn-icon.jdi-btn-small { width: 24px; min-width: 24px; }
.jdi-btn-icon.jdi-btn-large { width: 40px; min-width: 40px; }

/* Button content pieces */
.jdi-btn-icon-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    line-height: 1;
}

.jdi-btn-label {
    display: inline-block;
}

/* Loading state */
.jdi-btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.jdi-btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: jdi-spin 700ms linear infinite;
    color: var(--jdi-color-neutral-foreground-on-brand);
    opacity: 0.85;
}

.jdi-btn-secondary.is-loading::after,
.jdi-btn-subtle.is-loading::after,
.jdi-btn-transparent.is-loading::after {
    color: var(--jdi-color-brand-foreground);
}

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

/* ----------------------------------------------------------------------------
 * 6. Cards
 * ---------------------------------------------------------------------------- */

.jdi-card {
    background-color: var(--jdi-color-neutral-background-1);
    border: var(--jdi-stroke-width-thin) solid var(--jdi-color-neutral-stroke-2);
    border-radius: var(--jdi-radius-xlarge);
    box-shadow: var(--jdi-shadow-2);
    padding: var(--jdi-spacing-xxl);
    margin-bottom: var(--jdi-spacing-xxl);
    transition: box-shadow var(--jdi-duration-fast) var(--jdi-curve-easy-ease),
                transform var(--jdi-duration-fast) var(--jdi-curve-easy-ease);
}

.jdi-card.is-interactive:hover {
    box-shadow: var(--jdi-shadow-8);
    transform: translateY(-1px);
}

.jdi-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--jdi-spacing-m);
    margin-bottom: var(--jdi-spacing-l);
    padding-bottom: var(--jdi-spacing-m);
    border-bottom: var(--jdi-stroke-width-thin) solid var(--jdi-color-neutral-stroke-subtle);
}

.jdi-card-title {
    margin: 0;
    font-size: var(--jdi-font-size-500);
    line-height: var(--jdi-line-height-500);
    font-weight: var(--jdi-font-weight-semibold);
    color: var(--jdi-color-text);
}

.jdi-card-subtitle {
    margin: var(--jdi-spacing-xs) 0 0;
    font-size: var(--jdi-font-size-300);
    line-height: var(--jdi-line-height-300);
    color: var(--jdi-color-text-secondary);
    font-weight: var(--jdi-font-weight-regular);
}

.jdi-card-body > *:last-child {
    margin-bottom: 0;
}

.jdi-card-footer {
    margin-top: var(--jdi-spacing-l);
    padding-top: var(--jdi-spacing-m);
    border-top: var(--jdi-stroke-width-thin) solid var(--jdi-color-neutral-stroke-subtle);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--jdi-spacing-s);
}

/* Bootstrap panel parity (Power Pages renders some sections with Bootstrap panels) */
.panel,
.panel-default {
    background-color: var(--jdi-color-neutral-background-1) !important;
    border: var(--jdi-stroke-width-thin) solid var(--jdi-color-neutral-stroke-2) !important;
    border-radius: var(--jdi-radius-xlarge) !important;
    box-shadow: var(--jdi-shadow-2) !important;
}

.panel-heading {
    background-color: transparent !important;
    border-bottom: var(--jdi-stroke-width-thin) solid var(--jdi-color-neutral-stroke-subtle) !important;
    padding: var(--jdi-spacing-l) var(--jdi-spacing-xl) !important;
    border-top-left-radius: var(--jdi-radius-xlarge) !important;
    border-top-right-radius: var(--jdi-radius-xlarge) !important;
}

.panel-title {
    font-size: var(--jdi-font-size-500) !important;
    font-weight: var(--jdi-font-weight-semibold) !important;
    color: var(--jdi-color-text) !important;
    margin: 0;
}

.panel-body {
    padding: var(--jdi-spacing-xl) !important;
}

.panel-footer {
    background-color: var(--jdi-color-neutral-background-2) !important;
    border-top: var(--jdi-stroke-width-thin) solid var(--jdi-color-neutral-stroke-subtle) !important;
    border-bottom-left-radius: var(--jdi-radius-xlarge) !important;
    border-bottom-right-radius: var(--jdi-radius-xlarge) !important;
}

/* ----------------------------------------------------------------------------
 * 7. Tables
 * ---------------------------------------------------------------------------- */

.jdi-table-wrapper {
    border: var(--jdi-stroke-width-thin) solid var(--jdi-color-neutral-stroke-2);
    border-radius: var(--jdi-radius-xlarge);
    overflow: auto;
    background-color: var(--jdi-color-neutral-background-1);
}

.jdi-table,
.table {
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0;
    margin: 0 !important;
    font-size: var(--jdi-font-size-300);
}

.jdi-table thead th,
.table thead th {
    position: sticky;
    top: 0;
    background-color: var(--jdi-color-neutral-background-2) !important;
    color: var(--jdi-color-neutral-foreground-2) !important;
    font-weight: var(--jdi-font-weight-semibold);
    font-size: var(--jdi-font-size-200);
    line-height: var(--jdi-line-height-200);
    text-transform: none;
    letter-spacing: 0;
    border-bottom: var(--jdi-stroke-width-thin) solid var(--jdi-color-neutral-stroke-2) !important;
    padding: var(--jdi-spacing-m) var(--jdi-spacing-l) !important;
    text-align: left !important;
    white-space: nowrap;
}

.jdi-table tbody td,
.table tbody td {
    padding: var(--jdi-spacing-m) var(--jdi-spacing-l) !important;
    border-top: var(--jdi-stroke-width-thin) solid var(--jdi-color-neutral-stroke-subtle) !important;
    color: var(--jdi-color-text);
    vertical-align: middle !important;
    background-color: var(--jdi-color-neutral-background-1);
    transition: background-color var(--jdi-duration-faster) var(--jdi-curve-easy-ease);
}

.jdi-table tbody tr:first-child td,
.table tbody tr:first-child td {
    border-top: none !important;
}

.jdi-table tbody tr:hover td,
.table tbody tr:hover td,
.table-hover tbody tr:hover td {
    background-color: var(--jdi-color-neutral-background-2) !important;
}

.jdi-table.jdi-table-striped tbody tr:nth-child(even) td,
.table-striped tbody tr:nth-child(even) td {
    background-color: var(--jdi-color-neutral-background-2);
}

.jdi-table.jdi-table-striped tbody tr:nth-child(even):hover td,
.table-striped tbody tr:nth-child(even):hover td {
    background-color: var(--jdi-color-neutral-background-3) !important;
}

.jdi-col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right !important;
}

.jdi-empty {
    padding: var(--jdi-spacing-4xl) var(--jdi-spacing-l) !important;
    text-align: center;
    color: var(--jdi-color-text-muted);
    font-style: normal;
}

/* Row density variants */
.jdi-table-compact tbody td,
.jdi-table-compact thead th { padding-top: var(--jdi-spacing-s) !important; padding-bottom: var(--jdi-spacing-s) !important; }
.jdi-table-comfortable tbody td { padding-top: var(--jdi-spacing-l) !important; padding-bottom: var(--jdi-spacing-l) !important; }

/* ----------------------------------------------------------------------------
 * 8. Form inputs
 * ---------------------------------------------------------------------------- */

.form-control,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
textarea,
select,
.jdi-input {
    display: block;
    width: 100%;
    min-height: 32px;
    padding: 5px var(--jdi-spacing-s) !important;
    font-family: var(--jdi-font-family-base);
    font-size: var(--jdi-font-size-300) !important;
    line-height: var(--jdi-line-height-300);
    color: var(--jdi-color-text) !important;
    background-color: var(--jdi-color-neutral-background-1) !important;
    background-clip: padding-box;
    border: var(--jdi-stroke-width-thin) solid var(--jdi-color-neutral-stroke-1) !important;
    border-bottom-color: var(--jdi-color-neutral-stroke-accessible) !important;
    border-radius: var(--jdi-radius-medium) !important;
    box-shadow: none !important;
    transition:
        border-color var(--jdi-duration-faster) var(--jdi-curve-easy-ease),
        box-shadow var(--jdi-duration-faster) var(--jdi-curve-easy-ease);
}

textarea,
.jdi-input-textarea {
    min-height: 72px;
    resize: vertical;
}

.form-control:hover,
input:hover,
select:hover,
textarea:hover,
.jdi-input:hover {
    border-color: var(--jdi-color-neutral-stroke-1-hover) !important;
    border-bottom-color: var(--jdi-color-neutral-foreground-2) !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus,
.jdi-input:focus {
    outline: none !important;
    border-color: var(--jdi-color-brand-stroke-1) !important;
    border-bottom-color: var(--jdi-color-brand-stroke-1) !important;
    box-shadow: inset 0 -1px 0 0 var(--jdi-color-brand-stroke-1) !important;
}

.form-control[disabled],
.form-control:disabled {
    background-color: var(--jdi-color-neutral-background-disabled) !important;
    color: var(--jdi-color-neutral-foreground-disabled) !important;
    border-color: var(--jdi-color-neutral-stroke-disabled) !important;
    cursor: not-allowed;
}

.form-group {
    margin-bottom: var(--jdi-spacing-l);
}

label,
.control-label,
.jdi-label {
    display: inline-block;
    font-size: var(--jdi-font-size-300);
    line-height: var(--jdi-line-height-300);
    font-weight: var(--jdi-font-weight-semibold) !important;
    color: var(--jdi-color-text) !important;
    margin-bottom: var(--jdi-spacing-xs);
}

.help-block,
.jdi-help-text {
    color: var(--jdi-color-text-muted);
    font-size: var(--jdi-font-size-200);
    margin-top: var(--jdi-spacing-xs);
}

.has-error .form-control,
.has-error input,
.has-error select,
.has-error textarea {
    border-color: var(--jdi-color-status-danger-border-2) !important;
    border-bottom-color: var(--jdi-color-status-danger-border-2) !important;
}

.has-error .control-label,
.has-error .help-block {
    color: var(--jdi-color-status-danger-foreground-1) !important;
}

/* Required marker */
.required label::after,
label.required::after,
.info.required::after {
    content: " *";
    color: var(--jdi-color-status-danger-foreground-1);
    font-weight: var(--jdi-font-weight-semibold);
}

/* ----------------------------------------------------------------------------
 * 9. Tabs
 * ---------------------------------------------------------------------------- */

.nav-tabs,
.jdi-tabs {
    border-bottom: var(--jdi-stroke-width-thin) solid var(--jdi-color-neutral-stroke-2) !important;
    display: flex;
    gap: var(--jdi-spacing-xs);
    margin-bottom: var(--jdi-spacing-xl) !important;
    padding: 0;
    list-style: none;
}

.nav-tabs > li,
.jdi-tabs > li {
    margin: 0 !important;
}

.nav-tabs > li > a,
.jdi-tabs > li > a,
.jdi-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--jdi-spacing-s);
    font-size: var(--jdi-font-size-300);
    font-weight: var(--jdi-font-weight-semibold);
    color: var(--jdi-color-neutral-foreground-2) !important;
    padding: var(--jdi-spacing-s) var(--jdi-spacing-m) !important;
    border: none !important;
    border-radius: var(--jdi-radius-medium) !important;
    background-color: transparent !important;
    margin: 0 !important;
    transition: color var(--jdi-duration-faster) var(--jdi-curve-easy-ease),
                background-color var(--jdi-duration-faster) var(--jdi-curve-easy-ease);
    text-decoration: none !important;
    position: relative;
}

.nav-tabs > li > a:hover,
.jdi-tab:hover {
    color: var(--jdi-color-text) !important;
    background-color: var(--jdi-color-neutral-background-2) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.jdi-tab.is-active {
    color: var(--jdi-color-brand-foreground) !important;
    background-color: transparent !important;
    border: none !important;
}

.nav-tabs > li.active > a::after,
.jdi-tab.is-active::after {
    content: "";
    position: absolute;
    left: var(--jdi-spacing-m);
    right: var(--jdi-spacing-m);
    bottom: -1px;
    height: 2px;
    background-color: var(--jdi-color-brand-stroke-1);
    border-radius: var(--jdi-radius-small);
}

/* ----------------------------------------------------------------------------
 * 10. Badges / chips
 * ---------------------------------------------------------------------------- */

.jdi-badge,
.badge,
.label {
    display: inline-flex;
    align-items: center;
    gap: var(--jdi-spacing-xs);
    padding: 2px var(--jdi-spacing-s) !important;
    font-size: var(--jdi-font-size-200) !important;
    line-height: var(--jdi-line-height-200) !important;
    font-weight: var(--jdi-font-weight-semibold) !important;
    color: var(--jdi-color-neutral-foreground-2) !important;
    background-color: var(--jdi-color-neutral-background-4) !important;
    border: var(--jdi-stroke-width-thin) solid transparent;
    border-radius: var(--jdi-radius-circular) !important;
    min-width: 20px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.jdi-badge-brand,
.label-primary {
    background-color: var(--jdi-color-brand-150) !important;
    color: var(--jdi-color-brand-40) !important;
}

.jdi-badge-success,
.label-success {
    background-color: var(--jdi-color-status-success-background-1) !important;
    color: var(--jdi-color-status-success-foreground-2) !important;
}

.jdi-badge-warning,
.label-warning {
    background-color: var(--jdi-color-status-warning-background-1) !important;
    color: var(--jdi-color-status-warning-foreground-2) !important;
}

.jdi-badge-danger,
.label-danger {
    background-color: var(--jdi-color-status-danger-background-1) !important;
    color: var(--jdi-color-status-danger-foreground-2) !important;
}

.jdi-badge-info,
.label-info {
    background-color: var(--jdi-color-status-info-background-1) !important;
    color: var(--jdi-color-status-info-foreground-2) !important;
}

/* ----------------------------------------------------------------------------
 * 11. Alerts
 * ---------------------------------------------------------------------------- */

.alert,
.jdi-alert {
    padding: var(--jdi-spacing-m) var(--jdi-spacing-l) !important;
    margin-bottom: var(--jdi-spacing-l) !important;
    border: var(--jdi-stroke-width-thin) solid transparent !important;
    border-radius: var(--jdi-radius-large) !important;
    font-size: var(--jdi-font-size-300);
    line-height: var(--jdi-line-height-300);
    color: var(--jdi-color-text);
    display: flex;
    align-items: flex-start;
    gap: var(--jdi-spacing-s);
}

.alert-success,
.jdi-alert-success {
    background-color: var(--jdi-color-status-success-background-1) !important;
    border-color: var(--jdi-color-status-success-border-1) !important;
    color: var(--jdi-color-status-success-foreground-2) !important;
}

.alert-warning,
.jdi-alert-warning {
    background-color: var(--jdi-color-status-warning-background-1) !important;
    border-color: var(--jdi-color-status-warning-border-1) !important;
    color: var(--jdi-color-status-warning-foreground-2) !important;
}

.alert-danger,
.alert-error,
.jdi-alert-danger {
    background-color: var(--jdi-color-status-danger-background-1) !important;
    border-color: var(--jdi-color-status-danger-border-1) !important;
    color: var(--jdi-color-status-danger-foreground-2) !important;
}

.alert-info,
.jdi-alert-info {
    background-color: var(--jdi-color-status-info-background-1) !important;
    border-color: var(--jdi-color-status-info-border-1) !important;
    color: var(--jdi-color-status-info-foreground-2) !important;
}

/* ----------------------------------------------------------------------------
 * 12. Toast
 * ---------------------------------------------------------------------------- */

.jdi-toast-region {
    position: fixed;
    right: var(--jdi-spacing-xxl);
    bottom: var(--jdi-spacing-xxl);
    display: flex;
    flex-direction: column;
    gap: var(--jdi-spacing-s);
    z-index: 9999;
    pointer-events: none;
    max-width: 420px;
}

.jdi-toast {
    pointer-events: auto;
    background-color: var(--jdi-color-neutral-background-1);
    color: var(--jdi-color-text);
    border: var(--jdi-stroke-width-thin) solid var(--jdi-color-neutral-stroke-2);
    border-left-width: 4px;
    border-left-color: var(--jdi-color-brand-stroke-1);
    border-radius: var(--jdi-radius-large);
    padding: var(--jdi-spacing-m) var(--jdi-spacing-l);
    box-shadow: var(--jdi-shadow-16);
    display: flex;
    align-items: flex-start;
    gap: var(--jdi-spacing-m);
    animation: jdi-toast-in var(--jdi-duration-normal) var(--jdi-curve-decelerate-mid);
}

.jdi-toast-body { flex: 1 1 auto; }
.jdi-toast-title {
    font-weight: var(--jdi-font-weight-semibold);
    margin-bottom: var(--jdi-spacing-xxs);
}

.jdi-toast-message {
    color: var(--jdi-color-text-secondary);
    font-size: var(--jdi-font-size-200);
    line-height: var(--jdi-line-height-200);
}

.jdi-toast-dismiss {
    background: transparent;
    border: none;
    color: var(--jdi-color-text-muted);
    cursor: pointer;
    font-size: var(--jdi-font-size-400);
    line-height: 1;
    padding: var(--jdi-spacing-xxs) var(--jdi-spacing-xs);
    border-radius: var(--jdi-radius-small);
}

.jdi-toast-dismiss:hover {
    color: var(--jdi-color-text);
    background-color: var(--jdi-color-neutral-background-2);
}

.jdi-toast-success { border-left-color: var(--jdi-color-status-success-background-3); }
.jdi-toast-warning { border-left-color: var(--jdi-color-status-warning-background-3); }
.jdi-toast-danger  { border-left-color: var(--jdi-color-status-danger-background-3); }
.jdi-toast-info    { border-left-color: var(--jdi-color-status-info-background-3); }

@keyframes jdi-toast-in {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* ----------------------------------------------------------------------------
 * 13. Breadcrumbs
 * ---------------------------------------------------------------------------- */

.breadcrumb {
    background-color: transparent !important;
    padding: 0 !important;
    margin-bottom: var(--jdi-spacing-l) !important;
    font-size: var(--jdi-font-size-200);
}

.breadcrumb > li + li::before {
    content: "/" !important;
    color: var(--jdi-color-text-muted) !important;
    padding: 0 var(--jdi-spacing-s);
}

.breadcrumb > li > a {
    color: var(--jdi-color-text-secondary) !important;
}

.breadcrumb > .active {
    color: var(--jdi-color-text) !important;
    font-weight: var(--jdi-font-weight-semibold);
}

/* ----------------------------------------------------------------------------
 * 14. Footer
 * ---------------------------------------------------------------------------- */

footer,
.footer,
.jdi-site-footer {
    background-color: var(--jdi-color-neutral-background-2) !important;
    border-top: var(--jdi-stroke-width-thin) solid var(--jdi-color-neutral-stroke-2) !important;
    color: var(--jdi-color-text-secondary);
    padding: var(--jdi-spacing-xxl) 0 !important;
    font-size: var(--jdi-font-size-200);
    margin-top: var(--jdi-spacing-4xl);
}

footer a,
.footer a,
.jdi-site-footer a {
    color: var(--jdi-color-text-secondary) !important;
}

footer a:hover,
.footer a:hover,
.jdi-site-footer a:hover {
    color: var(--jdi-color-brand-foreground) !important;
}

/* ----------------------------------------------------------------------------
 * 15. Download button (used by the custom Documents Liquid template)
 * ---------------------------------------------------------------------------- */

.jdi-download-btn {
    /* Base inherits .jdi-btn-primary; this is layout-only. */
    gap: var(--jdi-spacing-xs);
}

.jdi-download-btn .jdi-btn-icon-glyph {
    font-size: 14px;
}

.jdi-download-btn[aria-busy="true"] .jdi-btn-icon-glyph {
    animation: jdi-spin 700ms linear infinite;
}

/* ----------------------------------------------------------------------------
 * 16. Basic Form / Entity List overrides for Power Pages
 * ---------------------------------------------------------------------------- */

.entity-grid,
.entitylist {
    background-color: transparent !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

.entity-grid .view-grid > table,
.entitylist .view-grid > table {
    border: none !important;
    box-shadow: none !important;
}

.entity-grid .view-grid,
.entitylist .view-grid {
    border: var(--jdi-stroke-width-thin) solid var(--jdi-color-neutral-stroke-2) !important;
    border-radius: var(--jdi-radius-xlarge) !important;
    overflow: hidden;
    background-color: var(--jdi-color-neutral-background-1) !important;
    box-shadow: var(--jdi-shadow-2);
}

.entity-grid .grid-actions,
.entitylist .grid-actions {
    padding: var(--jdi-spacing-l) !important;
    background-color: var(--jdi-color-neutral-background-2) !important;
    border-bottom: var(--jdi-stroke-width-thin) solid var(--jdi-color-neutral-stroke-2) !important;
    display: flex;
    align-items: center;
    gap: var(--jdi-spacing-s);
}

.entity-grid .pagination,
.entitylist .pagination {
    margin: var(--jdi-spacing-m) var(--jdi-spacing-l) !important;
}

.pagination > li > a,
.pagination > li > span {
    color: var(--jdi-color-text) !important;
    border: var(--jdi-stroke-width-thin) solid var(--jdi-color-neutral-stroke-1) !important;
    margin-right: var(--jdi-spacing-xxs);
    border-radius: var(--jdi-radius-medium) !important;
    padding: 4px var(--jdi-spacing-s) !important;
    background-color: var(--jdi-color-neutral-background-1) !important;
}

.pagination > li.active > a,
.pagination > li.active > span {
    background-color: var(--jdi-color-brand-background) !important;
    border-color: var(--jdi-color-brand-background) !important;
    color: var(--jdi-color-neutral-foreground-on-brand) !important;
}

.pagination > li > a:hover {
    background-color: var(--jdi-color-neutral-background-1-hover) !important;
    color: var(--jdi-color-text) !important;
}

/* ----------------------------------------------------------------------------
 * 17. Utilities
 * ---------------------------------------------------------------------------- */

.jdi-stack        { display: flex; flex-direction: column; }
.jdi-stack-s > * + *  { margin-top: var(--jdi-spacing-s); }
.jdi-stack-m > * + *  { margin-top: var(--jdi-spacing-m); }
.jdi-stack-l > * + *  { margin-top: var(--jdi-spacing-l); }
.jdi-stack-xl > * + * { margin-top: var(--jdi-spacing-xl); }

.jdi-row          { display: flex; align-items: center; gap: var(--jdi-spacing-s); }
.jdi-row-m        { display: flex; align-items: center; gap: var(--jdi-spacing-m); }
.jdi-row-l        { display: flex; align-items: center; gap: var(--jdi-spacing-l); }
.jdi-row-between  { display: flex; align-items: center; justify-content: space-between; gap: var(--jdi-spacing-m); }

.jdi-text-secondary { color: var(--jdi-color-text-secondary); }
.jdi-text-muted     { color: var(--jdi-color-text-muted); }
.jdi-text-brand     { color: var(--jdi-color-brand-foreground); }
.jdi-text-danger    { color: var(--jdi-color-status-danger-foreground-1); }
.jdi-text-success   { color: var(--jdi-color-status-success-foreground-1); }
.jdi-text-warning   { color: var(--jdi-color-status-warning-foreground-1); }

.jdi-text-caption   { font-size: var(--jdi-font-size-200); line-height: var(--jdi-line-height-200); }
.jdi-text-body      { font-size: var(--jdi-font-size-300); line-height: var(--jdi-line-height-300); }
.jdi-text-body-strong { font-size: var(--jdi-font-size-300); line-height: var(--jdi-line-height-300); font-weight: var(--jdi-font-weight-semibold); }
.jdi-text-subtitle2 { font-size: var(--jdi-font-size-500); line-height: var(--jdi-line-height-500); font-weight: var(--jdi-font-weight-semibold); }
.jdi-text-subtitle1 { font-size: var(--jdi-font-size-600); line-height: var(--jdi-line-height-600); font-weight: var(--jdi-font-weight-semibold); }
.jdi-text-title3    { font-size: var(--jdi-font-size-700); line-height: var(--jdi-line-height-700); font-weight: var(--jdi-font-weight-semibold); }

.jdi-hide           { display: none !important; }
.jdi-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.jdi-divider {
    height: 1px;
    background-color: var(--jdi-color-neutral-stroke-divider);
    margin: var(--jdi-spacing-xl) 0;
}

/* Skeleton loader */
.jdi-skeleton {
    background: linear-gradient(90deg,
        var(--jdi-color-neutral-background-3) 0%,
        var(--jdi-color-neutral-background-2) 50%,
        var(--jdi-color-neutral-background-3) 100%);
    background-size: 200% 100%;
    animation: jdi-skeleton-shimmer 1.4s linear infinite;
    border-radius: var(--jdi-radius-medium);
    min-height: 16px;
}

@keyframes jdi-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----------------------------------------------------------------------------
 * 17b. Page chrome: page-heading, breadcrumb host, profile layout
 * ---------------------------------------------------------------------------- */

.page-heading {
    margin-bottom: var(--jdi-spacing-xl);
}

.page-heading .page-header {
    border-bottom: none;
    margin: 0;
    padding: 0;
}

.page-heading h1,
.page-heading h2 {
    margin: 0;
}

/* Profile sidebar: avatar card + vertical nav produced by the portal runtime */
.profile-info {
    background-color: var(--jdi-color-neutral-background-1);
    border: var(--jdi-stroke-width-thin) solid var(--jdi-color-neutral-stroke-2) !important;
    border-radius: var(--jdi-radius-xlarge) !important;
    box-shadow: var(--jdi-shadow-2);
    padding: var(--jdi-spacing-l) !important;
    margin-bottom: var(--jdi-spacing-l);
}

.profile-info .card-body {
    padding: 0 !important;
}

.card.nav.profile,
.list-group.nav.profile {
    background-color: var(--jdi-color-neutral-background-1) !important;
    border: var(--jdi-stroke-width-thin) solid var(--jdi-color-neutral-stroke-2) !important;
    border-radius: var(--jdi-radius-xlarge) !important;
    box-shadow: var(--jdi-shadow-2);
    overflow: hidden;
    padding: var(--jdi-spacing-xs) 0;
    margin-bottom: var(--jdi-spacing-l);
}

.list-group.nav.profile .list-group-item,
.card.nav.profile .list-group-item {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--jdi-color-text) !important;
    font-family: var(--jdi-font-family-base) !important;
    font-size: var(--jdi-font-size-300);
    padding: var(--jdi-spacing-s) var(--jdi-spacing-l) !important;
    transition: background-color var(--jdi-duration-faster) var(--jdi-curve-easy-ease),
                color var(--jdi-duration-faster) var(--jdi-curve-easy-ease);
}

.list-group.nav.profile .list-group-item:hover,
.card.nav.profile .list-group-item:hover {
    background-color: var(--jdi-color-neutral-background-1-hover) !important;
    color: var(--jdi-color-text) !important;
    text-decoration: none;
}

.list-group.nav.profile .list-group-item.active,
.list-group.nav.profile .list-group-item.active:hover,
.card.nav.profile .list-group-item.active,
.card.nav.profile .list-group-item.active:hover {
    background-color: var(--jdi-color-brand-150) !important;
    color: var(--jdi-color-brand-foreground) !important;
    box-shadow: inset 3px 0 0 var(--jdi-color-brand-stroke-1);
}

/* Make the default Profile card that holds the user's avatar match the card style */
.card-nav-mb-3,
.card.profile-nav-mb-3 {
    margin-bottom: var(--jdi-spacing-l) !important;
}

/* ----------------------------------------------------------------------------
 * 18. Responsiveness
 * ---------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .jdi-page-header {
        align-items: flex-start;
    }
    .jdi-card {
        padding: var(--jdi-spacing-l);
        border-radius: var(--jdi-radius-large);
    }
    .jdi-btn-label-responsive {
        display: none;
    }
}

/* ----------------------------------------------------------------------------
 * 19. Reduced motion
 * ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}