/***********************************************************/
/* 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));

  /************************************************/
  /* SLDS Component Overrides                     */
  /************************************************/
  --sds-c-pill-radius-border: 50px;
}

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

/* ======================== */
/* HEADINGS                 */
/* ======================== */
h1 {
    font-family: var(--dxp-s-text-heading-extra-large-font-family);
    font-size: var(--dxp-s-text-heading-extra-large-font-size);
    font-weight: var(--dxp-s-text-heading-extra-large-font-weight);
    font-style: var(--dxp-s-text-heading-extra-large-font-style);
    color: var(--dxp-s-text-heading-extra-large-color);
}

h2 {
    font-family: var(--dxp-s-text-heading-large-font-family);
    font-size: var(--dxp-s-text-heading-large-font-size);
    font-weight: var(--dxp-s-text-heading-large-font-weight);
    font-style: var(--dxp-s-text-heading-large-font-style);
    color: var(--dxp-s-text-heading-large-color);
}

h3 {
    font-family: var(--dxp-s-text-heading-medium-font-family);
    font-size: var(--dxp-s-text-heading-medium-font-size);
    font-weight: var(--dxp-s-text-heading-medium-font-weight);
    font-style: var(--dxp-s-text-heading-medium-font-style);
    color: var(--dxp-s-text-heading-medium-color);
}

h4 {
    font-family: var(--dxp-s-text-heading-small-font-family);
    font-size: var(--dxp-s-text-heading-small-font-size);
    font-weight: var(--dxp-s-text-heading-small-font-weight);
    font-style: var(--dxp-s-text-heading-small-font-style);
    color: var(--dxp-s-text-heading-small-color);
}

h5 {
    font-family: var(--dxp-s-text-heading-extra-small-font-family);
    font-size: var(--dxp-s-text-heading-extra-small-font-size);
    font-weight: var(--dxp-s-text-heading-extra-small-font-weight);
    font-style: var(--dxp-s-text-heading-extra-small-font-style);
    color: var(--dxp-s-text-heading-extra-small-color);
}

h6 {
    font-family: var(--dxp-s-text-heading-extra-extra-small-font-family);
    font-size: var(--dxp-s-text-heading-extra-extra-small-font-size);
    font-weight: var(--dxp-s-text-heading-extra-extra-small-font-weight);
    font-style: var(--dxp-s-text-heading-extra-extra-small-font-style);
    color: var(--dxp-s-text-heading-extra-extra-small-color);
}

/* ======================== */
/* PARAGRAPHS               */
/* ======================== */
p {
    font-family: var(--dxp-s-body-font-family);
    font-size: var(--dxp-s-body-font-size);
    font-weight: var(--dxp-s-body-font-weight);
    font-style: var(--dxp-s-body-font-style);
    color: var(--dxp-s-body-text-color); 
}

.paragraph-2 { /* Apply this class to any text you want to use the smaller font */
    font-family: var(--dxp-s-body-small-font-family);
    font-size: var(--dxp-s-body-small-font-size);
    font-weight: var(--dxp-s-body-small-font-weight);
    font-style: var(--dxp-s-body-small-font-style);
    color: var(--dxp-s-body-small-text-color);
}

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

.main-sidebar-container .fpa-nav-list-item a,
.main-sidebar-container .fpa-nav-list-item a:hover,
.main-sidebar-container .fpa-nav-list-item a:focus {
    color: var(--fpa-brand-contrast-color) !important;
    text-decoration: none;
}

.fpa-nav-label {
    color: var(--fpa-brand-contrast-color) !important;
}

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

.main-sidebar-container .fpa-contrast-icon lightning-icon {
    --sds-c-icon-color-foreground-default: var(--fpa-brand-contrast-color);
}

.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;
}

.fpa-menu-round-icon {
    padding: 2px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

/* ============================================================ */
/* FULLCALENDAR.JS - CUSTOM BOX STYLING                         */
/* ============================================================ */

/* 1. Hide the default continuous table grid lines */
.fc-theme-standard .fc-scrollgrid,
.fc-theme-standard td, 
.fc-theme-standard th {
    border: none !important;
}

/* 2. Turn the inner frame of each day into its own rounded box */
.fc .fc-daygrid-day-frame {
    border: 1px solid color-mix(in srgb, var(--fpa-brand-color), white 80%) !important;
    border-radius: 10px !important;
    margin: 2px !important;      /* Creates the gap between the days */
    min-height: 80px !important; /* Ensures boxes have a nice uniform height */
    overflow: hidden !important;  /* Keeps backgrounds inside the rounded corners */
}

/* 3. Dark Gray: Past month days (days outside the current month view) */
.fc-day-other .fc-daygrid-day-frame {
    background-color: #d1d5db !important; /* Slate gray */
    opacity: 0.6 !important; /* Dims them out so they don't distract */
}

/* 4. Light Gray: Past days of the CURRENT month */
/* We use :not() so it doesn't override the other-month rule above */
.fc-day-past:not(.fc-day-other) .fc-daygrid-day-frame {
    background-color: #f3f4f6 !important; /* Very light gray */
}

/* 5. Light Green: Current Day (Today) */
.fc-day-today .fc-daygrid-day-frame {
    background-color: #ecfdf5 !important; /* Soft emerald green */
}

/* 6. White: Future days of the current month */
.fc-day-future:not(.fc-day-other) .fc-daygrid-day-frame {
    background-color: #ffffff !important;
}

/* Optional: Fix the Day Number link color so it inherits properly */
.fc .fc-daygrid-day-number {
    color: var(--fpa-page-text, #1f1f1f) !important;
    text-decoration: none !important;
    font-weight: bold;
    padding: 6px !important;
}

.fc-h-event {
    background-color: var(--fpa-brand-color, #000);
    border: 1px solid var(--fc-event-border-color);
    display: block;
    border-radius: 10px !important;
}

/*
.fc-daygrid-event-harness > a {
    background-color: var(--fpa-primary) !important;
    color: var(--fpa-on-primary) !important;
}
*/

.fc-daygrid-event-harness {
  padding: 4px 0 4px 2px;
}


/* Establish the positioning context for the dropdown */
.search-container {
    position: relative;
    /* Use max-width to control the size of the search bar on the page */
    /* max-width: 600px; */
}

.search-container > .slds-form-element {
    margin-bottom: 0%;
}

/* Style the floating results container */
.search-results-dropdown {
    position: absolute; /* CRITICAL: Makes it float over other content */
    top: 100%; /* Positions it exactly below the input field */
    left: 0;
    right: 0;
    max-height: 400px; /* Limits the size of the dropdown */
    overflow-y: auto; /* Adds scrollbar if results exceed max-height */
    z-index: 1000; /* CRITICAL: Ensures it stacks above everything else */
    background-color: white; /* Make sure it's opaque */
    border: 1px solid var(--lwc-border-color);
    border-top: none; /* Optical trick to merge with the input box */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Style individual result items for hover/click */
.result-item {
    display: flex;
    align-items: center;
    padding: var(--slds-spacing-x-small) var(--slds-spacing-small);
    cursor: pointer;
    border-bottom: 1px solid var(--slds-color-border-input);
    margin-top: 2px;
    margin-bottom: 3px;
}

.result-item:last-child {
    border-bottom: none;
}

.result-item:hover {
    background-color: var(--slds-color-background-highlight);
}

/* Ensure headers stand out */
.result-section-header {
    background-color: var(--slds-color-background-weak);
    font-weight: bold;
    color: var(--slds-color-text-weak);
    padding: var(--slds-spacing-xx-small) var(--slds-spacing-small);
}

/* Search Box Items */
.fpa-unified-search-container {
    display: flex;
    align-items: stretch;
    border: none;
    box-shadow: 0 2px 5px var(--fpa-neutral-base-color, #900b3e) !important;
}

.fpa-unified-search-container:focus-within {
    box-shadow: 0 2px 5px var(--fpa-neutral-base-color, #900b3e) !important;
}

.fpa-unified-search-container__field-select {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 10%;
    background: var(--fpa-brand-contrast-color, #fff);
    padding: 0;
}

.fpa-unified-search-container__term {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    background: var(--fpa-brand-contrast-color, #fff);
    padding: 0 0.75rem;
}

.fpa-unified-search-container__icon {
    flex-shrink: 0;
}

.fpa-unified-search-container__add {
    flex: 0 0 auto;
    align-self: center;
    margin-right: 0.25rem;
}

@media (max-width: 480px) {
    .fpa-unified-search-container__field-select {
        min-width: 110px;
        max-width: 140px;
        padding: 0 0.85rem;
    }
}

.fpa-filter-chip_removable {
    padding-right: 0.25rem;
}

.fpa-filter-chip__remove {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.15rem;
    cursor: pointer;
    line-height: 0;
    color: inherit;
}

.fpa-filter-chip__remove:hover,
.fpa-filter-chip__remove:focus {
    opacity: 0.7;
}

.fpa-slds-form-element {
    margin-bottom: 0;
}

/* Ensure standard capsule shape and padding */
.custom-badge {
    --sds-c-badge-radius-border: 50px;
    padding: 4px 12px;
    font-weight: 500;
}

/* 1. OPEN (Light Blue / Dark Blue) */
.badge-open {
    --sds-c-badge-color-background: #dbeafe;
    --sds-c-badge-text-color: #1e40af;
}

/* 2. REVERSED (Light Gray / Dark Gray) */
.badge-reversed {
    --sds-c-badge-color-background: #e5e7eb;
    --sds-c-badge-text-color: #4b5563;
}

/* 3. COMPLETED (Light Green / Dark Green) */
.badge-completed {
    --sds-c-badge-color-background: #a7f3d0;
    --sds-c-badge-text-color: #065f46;
}

/* 4. PENDING (Light Yellow / Dark Brown) */
.badge-pending {
    --sds-c-badge-color-background: #fef08a;
    --sds-c-badge-text-color: #92400e;
}

/* 5. CANCELLED (Light Pink / Dark Pink) */
.badge-cancelled {
    --sds-c-badge-color-background: #fce7f3;
    --sds-c-badge-text-color: #9d174d;
}

.user-profile-avatar {
    width: 6rem;
    height: 6rem;
    border: 3px solid white; /* Adds a nice crisp border to separate it from the brand background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Forces the image itself to respect the circle constraints perfectly */
.user-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Spinner container */
.loader-container {
    width: 100%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

.spinner-container {
    position: relative;
    display: block;
}

/* 1. The Container: Transparency, Blur, and Border */
.slds-spinner_container {
    /* Using your requested color-mix for text/borders */
    color: color-mix(in srgb, var(--fpa-page-text), white 50%) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--fpa-brand-color), white 50%) !important;
    
    /* Transparent background with the brand color hint */
    background-color: color-mix(in srgb, var(--fpa-brand-color), transparent 80%) !important; 
    
    margin-bottom: 0;
    backdrop-filter: blur(2px); 
    z-index: 9999; /* Ensures it stays above the layout zones */
}

/* 2. The Spinner: Changing the moving parts to fpa-page-text */
/* Force ALL spinner dots to same color + full opacity */
.slds-spinner__dot-a:before,
.slds-spinner__dot-b:before,
.slds-spinner__dot-a:after,
.slds-spinner__dot-b:after {
    background-color: var(--fpa-page-text) !important;
    opacity: 1 !important;
}

/* Optional: override animation shading (important for consistency) */
.slds-spinner__dot-a,
.slds-spinner__dot-b {
    opacity: 1 !important;
}


/* Subtle fade-in animation for when the content finally appears */
.animate-in {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ensure the relative positioning works for the spinner backdrop */
.slds-is-relative {
    position: relative;
}