/* Version: 12/18/2025 */
/* #################### SR specific CSS #################### */

/* ==== Basic ADA color contrast ==== */
.sr-button-blue {
  background-color:#0060C0;
  color:white;
}

.sr-safe-red {
  color:#A40000;
}

.sr-safe-blue {
    /* Set text color to a highly visible dark blue */
    color: #1e40af !important;
}

.sr-only {
  position: absolute; /* Takes the element out of the normal flow */
  width: 1px;         /* Minimizes its size */
  height: 1px;        /* Minimizes its size */
  padding: 0;         /* Removes padding */
  margin: -1px;       /* Moves it slightly off-screen */
  overflow: hidden;   /* Hides any content that might overflow the 1x1 area */
  clip: rect(0, 0, 0, 0); /* Older method for clipping the element to zero size */
  white-space: nowrap; /* Prevents text wrapping */
  border: 0;          /* Removes any borders */
}

/* ==== input fields/forms ==== */
/* A. Resting/Placeholder State Fix: Ensures high contrast when the label is inside the input */
.p-float-label label {
    color: #000000 !important; /* Forces black text for high contrast */
}

/* B. Focused/Filled State Fix: Ensures high contrast when the label is floating */
/* This reintroduces the color fix without interfering with PrimeReact's 'transform' movement */
.p-float-label input:focus ~ label,
.p-float-label input.p-filled ~ label,
.p-float-label .p-focus ~ label {
    /* Use black (#000000) for maximum contrast safety, or a dark color that passes 4.5:1 */
    color: #000000 !important; 
}

/* ==== Data Tables ==== */
/* Target the sorted column header */
.p-datatable-thead > tr > th.p-sortable-column.p-highlight {
    /* OPTION 1: Change the text color to a high-contrast color (e.g., white or black) */
    color: #000000 !important; /* Change text to black */
    /* If the background is a dark blue, you might want white: color: #FFFFFF !important; */

    /* OPTION 2: You can also change the background color if the default blue is the issue,
       but changing the text color is often simpler for contrast. */
    /* background: #CCCCCC !important; /* A light grey background */
}

/* Target the sort icon for contrast, as it's often a light color on a dark background */
.p-datatable-thead > tr > th.p-sortable-column.p-highlight .p-sortable-column-icon {
    /* Ensure the sort icon (triangle) has high contrast with the background */
    color: #000000 !important; /* Change icon to black */
}

/* ----Pagination contrast sr friendly---- */
/* Fix contrast for the CURRENTLY ACTIVE page button */
.p-paginator .p-paginator-pages .p-paginator-page.p-highlight {
    /* Set the background to your high-contrast blue from your button class: #0060C0 */
    background: #0060C0 !important;
    
    /* Set the text color to white, which contrasts highly with the blue */
    color: #FFFFFF !important; 
    
    /* Ensure the border also contrasts */
    border-color: #0060C0 !important;
}

/* Ensure the hover state also maintains contrast */
.p-paginator .p-paginator-pages .p-paginator-page.p-highlight:hover {
    /* A slightly darker blue or just maintain the color */
    background: #004c96 !important; /* Slightly darker shade of blue */
}

/* Fix contrast for all default paginator buttons (e.g., Next/Previous arrows, Go to first/last) */
.p-paginator .p-paginator-first,
.p-paginator .p-paginator-prev,
.p-paginator .p-paginator-next,
.p-paginator .p-paginator-last {
    /* Set the icon color to your high-contrast black from the sort fix */
    color: #000000 !important;
}

/* Ensure the hover/focus state is still good */
.p-paginator .p-paginator-first:not(.p-disabled):hover,
.p-paginator .p-paginator-prev:not(.p-disabled):hover,
.p-paginator .p-paginator-next:not(.p-disabled):hover,
.p-paginator .p-paginator-last:not(.p-disabled):hover {
    background: #EEEEEE !important; /* A light, non-distracting hover */
}

/* Ensure a clear focus indicator on ALL interactive paginator elements */
.p-paginator .p-element:focus-visible,
.p-paginator-rpp-options:focus-visible,
.p-paginator-page:focus-visible {
    /* You can use a thick, high-contrast outline */
    outline: 3px solid #FF9900 !important; /* Use a bright color like orange */
    outline-offset: 2px !important;
    box-shadow: none !important; /* Remove other distracting shadows */
}

/* Fix contrast for ALL default (unselected) paginator page numbers */
.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight) {
    /* Override the default blue text color */
    color: #000000 !important; /* Changes text to black (21:1 contrast on white) */
    
    /* Safest to also remove or override the inline color style if possible */
    /* This might be needed if the inline style is higher priority than this CSS rule */
}

/* Ensure the hover state also maintains high contrast */
.p-paginator .p-paginator-pages .p-paginator-page:not(.p-highlight):hover {
    color: #000000 !important;
    background-color: #EEEEEE !important; /* A light, visible hover effect */
}

/* Fix contrast for DISABLED paginator buttons (e.g., Prev button on page 1) */
.p-paginator .p-paginator-element.p-disabled {
    /* Set color to a shade of grey that passes 3:1 contrast on white */
    color: #767676 !important; 
    /* Ensure the background is clear/white if the default is causing issues */
    background: transparent !important;
    /* Remove any visual distractions that might reduce perceived contrast */
    opacity: 1 !important; 
}

/* ==== Multi select ==== */
/* Ensure high contrast when an item is hovered or focused */
/* The base class for a dropdown item */
.p-multiselect-item.p-highlight, /* When an item is selected */
.p-multiselect-item:hover,      /* When an item is hovered */
.p-multiselect-item.p-focus,    /* When an item is focused (keyboard) */
.p-multiselect-item-highlight   /* PrimeReact's highlight class */
{
    /* Use a high-contrast combination, like your button colors */
    background-color: #0060C0 !important;
    color: white !important;
}

/* Also check the 'Select All' option if you use it */
.p-multiselect-header-select-all:hover {
    background-color: #0060C0 !important;
}

/* Prime React Calendar */
.p-calendar .p-datepicker-trigger {
    /* Apply the styles from your existing class definition */
    background-color: #0060C0;
    border-color: #0060C0;
    color: white; 
    /* The CSS cascade should handle this without !important if the selector is specific enough */
}

/* ==== Used by portal messages to force ADA compliance of colors ==== */
#usiis-message-area-content * {
    color: #000000 !important;
    /* Optionally override background if it compromises contrast */
    /* background-color: transparent !important; */
    /* Or set a fixed background color like white */
    /* background-color: #FFFFFF !important; */
}

/*==== Custom combo box - used by portal, could be used possibly with other custom combo boxes ====*/

/* Parent Container: Establishes the coordinate system */
.usiis-custom-combobox {
    position: relative; /* CRITICAL for positioning the list */
    display: inline-block; /* Or display: flex if used in a row */
	display: flex; 
	align-items: flex-start; 
	justify-content: flex-end;
	text-align: left;
    width: 300px; /* Adjust width as needed */
}

/* The Dropdown List (Listbox) */
.usiis-combobox-listbox {
	border-radius: 6px; /* FIXED: Correct syntax for dimension */
    position: absolute; /* CRITICAL: Takes the list out of normal flow */
    z-index: 1000; /* Ensures the list appears above other content */
    top: 100%; /* Positions the list exactly below the input field */
    width: 100%; /* Matches the width of the parent container */
    max-height: 200px; /* Makes the list scrollable */
    overflow-y: auto;
    
    list-style: none; /* Removes default bullet points */
    margin: 0;
    padding: 0;
    
    border: 1px solid #ccc;
    background-color: white;
}

/* Individual List Items */
.usiis-combobox-listbox li {
    padding: 8px 12px;
    cursor: pointer;
    white-space: nowrap; /* Prevents long labels from wrapping */
}

/* Hover and Focus States */
.usiis-combobox-listbox li:hover,
.usiis-combobox-listbox li:focus {
    background-color: #f0f0f0; 
    outline: none; /* Removed if you add a better focus style */
}

/* ARIA Selected State (Crucial for indicating the current value) */
.usiis-combobox-listbox li[aria-selected="true"] {
    background-color: #d1e7ff; /* Light blue highlight for selection */
    font-weight: bold;
}

/* Dropup Modifier */
.usiis-custom-combobox.dropup .usiis-combobox-listbox {
    top: auto; 
    bottom: 100%; 
    margin-bottom: 5px;
}

/* --- ICON STYLING --- */

/* Input Field */
.usiis-combobox-input {
    padding-right: 0px !important; 
	border-radius: 6px; /* FIXED: Correct syntax for dimension */
}

/* Icon Element */
.combobox-icon {
    position: absolute;
    top: 50%; 
    right: 10px; 
    transform: translateY(-50%); 
    pointer-events: none; 
    cursor: pointer;
    color: #666; 
    transition: transform 0.2s ease-in-out;
}

/* Icon Rotation */
.usiis-custom-combobox[aria-expanded="true"] .combobox-icon {
    transform: translateY(-50%) rotate(180deg);
}

/* ADA Compliance - Keyboard Focus Indicator:
   Ensures a high-contrast focus ring is visible when navigating tabs with the keyboard.
*/
/* FIX: WCAG Contrast Error for Selected Tab Text */

/* Target the text span (.p-tabview-title) inside the active/highlighted link */
.p-tabview .p-tabview-nav .p-highlight .p-tabview-nav-link .p-tabview-title {
    /* Use the application's compliant dark blue color */
    color: #0060C0 !important; 
    
    /* Ensure no conflicting background or opacity settings */
    background-color: transparent !important; 
    opacity: 1 !important;
}

/* ==== Improved noscript support. Since noscript doesn't work well with ADA compliance ====*/
/* Shared CSS for the No-JS Safety Net */
.no-js-alert {
  background-color: #ffcc00;
  color: #000000;
  padding: 20px;
  text-align: center;
  font-weight: bold;
  border-bottom: 2px solid #000000;
  position: relative;
  z-index: 9999;
  
  /* The Stealth Animation Logic */
  opacity: 0;
  animation: noJsFadeIn 0.5s forwards;
  animation-delay: 0.4s; 
}

@keyframes noJsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}