/***********************************************************/
/* 1. - Global Styles for Field Portal Accelerator         */
/* Focus: Salesforce SLDS Component Overrides              */
/***********************************************************/
:root,
:host {
  /***********************************************************
   * Field Portal Accelerator (FPA)
   * Global Design Tokens
   *
   * Best practice:
   *  - Map Experience Cloud (DXP) globals -> FPA tokens here
   *  - Use ONLY --fpa-* tokens inside LWCs
   ***********************************************************/

  /* ========= DXP Global Mappings (with safe fallbacks) ========= */
  --fpa-brand-color: var(--dxp-g-brand, #1b96ff);
  --fpa-brand-contrast-color: var(--dxp-g-brand-contrast, #ffffff);

  --fpa-root-color: var(--dxp-g-root, #ffffff);
  --fpa-root-contrast-color: var(--dxp-g-root-contrast, #1f1f1f);

  --fpa-neutral-color: var(--dxp-g-neutral, #f7f7f7);
  --fpa-neutral-contrast-color: var(--dxp-g-neutral-contrast, #1f1f1f);

  --fpa-neutral-base-color: var(--slds-g-color-neutral-base-95,#f3f3f3);
  --fpa-neutral-base-contrast-color: var(--slds-g-color-neutral-base-30, #444);

  /* ========= Semantic tokens (preferred for components) ========= */
  /* Page + surfaces */
  --fpa-page-bg: var(--fpa-root-color);
  --fpa-page-text: var(--fpa-root-contrast-color);

  --fpa-surface-bg: var(--fpa-neutral-color);
  --fpa-surface-text: var(--fpa-neutral-contrast-color);

  /* Primary / actions */
  --fpa-primary: var(--fpa-brand-color);
  --fpa-on-primary: var(--fpa-brand-contrast-color);

  /* Borders + dividers (fallback first; upgraded by color-mix when available) */
  --fpa-border: rgba(0, 0, 0, 0.10);
  --fpa-divider: rgba(0, 0, 0, 0.08);

  /* Elevation + shape + spacing */
  --fpa-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  --fpa-radius: 14px;
  --fpa-pad: 12px;

  /* Typography */
  --fpa-font-family: var(--dxp-g-font-family, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);

  /* ========= Backward-compatible aliases (keep older selectors working) ========= */
  --fpa-bg: var(--fpa-page-bg);
  --fpa-section-bg: var(--fpa-primary);
  --fpa-content-bg: var(--fpa-page-bg);

  --fpa-card: #ffffff;
  --fpa-card-header: var(--fpa-primary);
  --fpa-card-header-contrast: var(--fpa-on-primary);
  --fpa-card-body: var(--fpa-page-bg);
  --fpa-card-body-text: var(--fpa-page-text);

  /* These were referenced in body() earlier; define them so nothing breaks */
  --fpa-brand-background-color: var(--fpa-page-bg);
  --fpa-brand-background-contrast-color: var(--fpa-page-text);

  /* Buttons (keep your existing hook usage, but provide a fallback) */
  --fpa-button: var(--dxp-c-button-brand-transition, var(--fpa-primary));
  --fpa-button-bg-primary: var(--dxp-c-button-brand-transition, var(--fpa-primary));
  --fpa-button-bg-secondary: var(--dxp-c-button-brand-transition, var(--fpa-primary));

  /************************************************/
  /* Bootstrap Override (if Bootstrap is present)  */
  /************************************************/
  --bs-btn-bg: var(--dxp-c-button-brand-transition, var(--fpa-primary));
}

body {
  min-height: 100vh;
  background: var(--fpa-page-bg);
  color: var(--fpa-page-text);
  font-family: var(--fpa-font-family);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    color: var(--fpa-page-text);
}

.main-sidebar-container {
    color: var(--fpa-brand-contrast-color) !important;
    background-color: var(--fpa-brand-color) !important;
}

.content-bg {
    color: var(--fpa-page-text);
    background-color: var(--fpa-page-bg) !important;
}

.login-custom-bg-class {
    color: var(--fpa-brand-contrast-color) !important;
    background-color: color-mix(in srgb, var(--fpa-brand-color), white 70%) !important;    
}

.bg-primary, .btn-primary {
    color: var(--fpa-brand-contrast-color) !important;
    background-color: var(--fpa-brand-color) !important;
}