/* Styles for button that triggers column visibility options in DataTables */
button.btn.buttons-collection.buttons-colvis {
    color: white;                                           /* Sets text color to white */
    background-color: var(--agnav-color-primary-chrysocolla); /* Uses a primary color for the button background */
}

/* Styles for active state of dropdown items in DataTables column visibility menu */
a.dt-button.dropdown-item.buttons-columnVisibility.active {
    font-size: 12px;                                          /* Sets font size to 12px for smaller text */
    color: var(--agnav-color-primary-chrysocolla);            /* Sets text color to primary color */
    background-color: var(--bs-gray-200);                     /* Uses a Bootstrap gray background color */
    border-bottom: 1px solid var(--border);                   /* Adds a bottom border */
    padding-bottom: 0.4em;                                    /* Adds padding at the bottom */
    font-weight: bold;                                        /* Makes text bold */
}

/* Hover effect for active dropdown items in DataTables column visibility menu */
a.dt-button.dropdown-item.buttons-columnVisibility.active:hover {
    color: var(--border);                                     /* Changes text color on hover */
}

/* Styles for dropdown items in DataTables column visibility menu (default state) */
a.dt-button.dropdown-item.buttons-columnVisibility {
    font-size: 12px;                                          /* Sets font size to 12px for smaller text */
    color: black;                                           /* Sets text color to black */
    background-color: #f8f9fa;                              /* Light grey background color */
    border-bottom: 1px solid var(--border);                   /* Adds a bottom border */
    padding-bottom: 0.4em;                                    /* Adds padding at the bottom */
}

/* Styling for icons, specifically the Bootstrap icons */
i.bi.bi-list.bi-lg.py-2.p-1 {
    color: var(--agnav-color-primary-black);                  /* Sets icon color to a primary black color */
}

/* Styling for the search input field */
.search input {
    height: 60px;                                             /* Sets the height of the search input */
    text-indent: 25px;                                        /* Indents the text inside the input to the right for spacing */
    border: none;                                             /* Removes the default border */
}

/* Focus state styling for the search input field */
.search input:focus {
    box-shadow: none;                                         /* Removes any default box shadow */
    border: 2px solid var(--green);                           /* Adds a solid green border */
}

/* Styling for the search icon inside the search field */
.search .bi-search {
    position: absolute;                                       /* Positions the icon absolutely within its parent */
    top: 20px;                                                /* Positions the icon 20px from the top */
    left: 16px;                                               /* Positions the icon 16px from the left */
}

/* Ensures that the inner scroll head width of DataTables is not constrained */
.dataTables_scrollHeadInner {
    width: unset !important;                                  /* Unsets any explicit width and allows it to adjust as needed */
}

/* Styling for the "Add/Delete Search List" button */
.table .btn-add-delete-search-list {
    background-color: var(--agnav-color-primary-chrysocolla) !important; /* Sets the background color and forces its application */
}

/* Reusable class for setting primary color styling */
.btn-primary-agnav-colour {
    background-color: var(--agnav-color-primary-chrysocolla); /* Sets background color using the primary color variable */
}

/* Styles for pagination links that are not active */
.page-link:not(.active) {
    color: var(--agnav-color-primary-chrysocolla);            /* Sets text color to the primary color */
    background-color: white;                                /* Sets the background color to white */
}

/* Styles for active pagination links */
.active > .page-link,
.page-link.active {
    z-index: 3;                                               /* Ensures the active link is on top of other elements */
    color: white;                                           /* Sets text color to white */
    background-color: var(--agnav-color-primary-chrysocolla) !important; /* Sets background color to primary color and forces it */
    border-color: var(--agnav-color-primary-chrysocolla) !important; /* Sets border color to primary color and forces it */
}

/* Styles for cells in a super header row within the table */
td.details-super-header-td {
    font-size: 14px;                                          /* Sets font size to 14px */
    font-weight: revert;                                      /* Reverts the font weight to default */
    text-transform: none;                                     /* Ensures no text transformation (like uppercase or lowercase) */
    background-color: var(--agnav-color-primary-chrysocolla); /* Sets background color to primary color */
    color: #fff;                                            /* Sets text color to white */
    text-align: center;                                       /* Centers the text */
}

/* Ensures the child tables are responsive and take full width */
table.responsive-child-table {
    width: 100%;                                              /* Full width */
    max-width: 100%;                                          /* Maximum width also set to full */
}

/* Styles for rows with a card-like appearance */
tr.cardTable {
    box-shadow: 0 0 8px var(--shadow);                        /* Adds a shadow effect around the row */
    cursor: pointer;                                          /* Changes cursor to pointer to indicate interactivity */
}

/* Hides sorting icons within the super header row */
.super-header th span.dt-column-order {
    display: none !important;                                 /* Forces sorting icons to be hidden */
}

/* Disables interactivity for cells in the super header row */
.super-header th {
    pointer-events: none;                                     /* Disables pointer events like clicks */
    cursor: default;                                          /* Sets cursor to default arrow */
}

/* Styles for the "Forecaster" link container */
.forecaster-link {
    display: flex;                                            /* Uses flexbox for layout */
    align-items: center;                                      /* Centers items vertically */
    flex-direction: column;                                   /* Arranges items in a column */
    padding: 10%;                                             /* Adds padding around the container */
}

/* Styles for the herd code link with an icon before the text */
.forecaster-link a.agnav-herdcode-link::before {
    display: inline-block;                                    /* Displays as an inline block element */
    margin-right: 8px;                                        /* Adds margin to the right of the icon */
    background-color: var(--border);                          /* Sets background color for the icon */
    padding: 4px;                                             /* Adds padding around the icon */
    border-radius: 4px;                                       /* Rounds the corners of the icon */
}

/* Styles for the herd code link */
a.agnav-herdcode-link {
    text-decoration: none;                                    /* Removes the default underline */
    font-size: 11px;                                          /* Sets font size to 11px */
    display: flex;                                            /* Uses flexbox for layout */
    flex-direction: column;                                   /* Arranges items in a column */
    align-items: center;                                      /* Centers items horizontally */
    color: var(--agnav-color-primary-chrysocolla);            /* Sets text color to primary color */
}

/* Styles for dynamic name tags or badges */
.dynamic-name {
    background-color: #f0f0f0;                              /* Light grey background */
    padding: 4px;                                             /* Adds padding for spacing */
    border-radius: 4px;                                       /* Rounds the corners */
}

/* Styling for the column visibility dropdown button */
#columnVisibilityDropdown {
    font-size: 0.875rem;                                      /* Sets font size to 14px */
    padding: 0.375rem 0.75rem;                                /* Adds padding to the button */
    background-color: #004838;                              /* Dark green background color */
    border-color: #004838;                                  /* Border color matches the background */
    color: white;                                           /* Text color is white */
    border-radius: 0.25rem;                                   /* Slightly rounds the corners */
    position: relative;                                       /* Ensure dropdown is positioned correctly within its parent */

}

/* Hover and focus states for the column visibility dropdown button */
#columnVisibilityDropdown:hover,
#columnVisibilityDropdown:focus {
    background-color: #006655;                              /* Changes background color to a lighter green */
    border-color: #006655;                                  /* Border color also changes to lighter green */
}

/* Styling for the dropdown menu items under column visibility */
.columnVisibilityDropdownMenu {
    z-index: 900000;                                          /* Set higher than Bootstrap modal's z-index (1050) */
    font-size: 15px;                                          /* Sets font size for the dropdown menu items */
    font-weight: bolder;                                      /* Makes text bold */
    color: black;                                           /* Sets text color to black */
    position: absolute;                                       /* Position relative to parent for better control */
}

/* Styling for the table header and rows to center the text */ 
th,
td {
    text-align: center !important;                            /* Centers text */
    display: table-cell;                                      /* Ensures table cell display */
    vertical-align: middle;                                   /* Vertically centers content */
}

/* Styling for the scroll bar in the column visibility */
.scrollable-dropdown-menu {
    max-height: 200px;                                        /* Max height of the dropdown menu to 200px */
    overflow-y: auto;                                         /* Vertical scrolling */
}

.scrollable-dropdown-menu::-webkit-scrollbar {
    width: 10px;                                              /* Width of the scrollbar */
}

.scrollable-dropdown-menu::-webkit-scrollbar-track {
    background: #CCDAD7;                                    /* Background color of the scrollbar track */
}

.scrollable-dropdown-menu::-webkit-scrollbar-thumb {
    background-color: #006655;                              /* Color of the scrollbar thumb */
    border-radius: 5px;                                       /* Rounds scrollbar thumb */
}

.scrollable-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background-color: #006655;                              /* Color of the scrollbar thumb on hover */
}

/* Styling for the reset columns button */
.reset-columns-btn {
    width: 35px;                                             /* Set width of button to suit image */
    height: 35px;                                            /* Set height of button to suit image */
    font-size: 0.875rem;                                     /* Same font size as the dropdown button */
    background-color: var(--agnav-color-primary-chrysocolla-tint1); /* Dark green background color to match the dropdown button */
    border-color: var(--agnav-color-primary-chrysocolla-tint1); /* Border color matches the background */
    color: white;                                          /* Text color is white */
    border-radius: 0.25rem;                                  /* Slightly rounded corners to match the dropdown button */
    position: relative;                                      /* Ensure the button is positioned correctly within its parent */
    display: inline-block;                                   /* Ensure the button is displayed inline like the dropdown */
    background-image: url('../img/agnav-icons/white/AGNAV_Icons_White_FlexiTable_Refresh.png'); /* Background image for the button (replace with the correct path to your image) */
    background-size: cover;                                  /* Adjust the size of the background image (change values as needed) */
    background-repeat: no-repeat;                            /* Prevent the background image from repeating */
    background-position: center center;                      /* Position the background image (center vertically, 10px from the left) */
}

/* Hover and focus states for the reset columns button */
.reset-columns-btn:hover,
.reset-columns-btn:focus {
    background-color: var(--agnav-color-secondary-chrysocolla-tint1); /* Lighter green background on hover/focus to match dropdown button */
    border-color: var(--agnav-color-secondary-chrysocolla-tint1); /* Lighter green border color on hover/focus */
}

/* Styling for the reset sorting button */
.reset-sorting-btn {
    width: 35px;                                             /* Set width of button to suit image */
    height: 35px;                                            /* Set height of button to suit image */
    font-size: 0.875rem;                                     /* Same font size as the dropdown button */
    background-color: var(--agnav-color-primary-chrysocolla-tint1); /* Dark green background color to match the dropdown button */
    border-color: var(--agnav-color-primary-chrysocolla-tint1); /* Border color matches the background */
    color: white;                                          /* Text color is white */
    border-radius: 0.25rem;                                  /* Slightly rounded corners to match the dropdown button */
    position: relative;                                      /* Ensure the button is positioned correctly within its parent */
    display: inline-block;                                   /* Ensure the button is displayed inline like the dropdown */
    background-image:   url('../img/agnav-icons/white/AGNAV_Icons_White_FlexiTable_Sorting.png'); /* Background image for the button (replace with the correct path to your image) */
    background-size: cover;                                  /* Adjust the size of the background image (change values as needed) */
    background-repeat: no-repeat;                            /* Prevent the background image from repeating */
    background-position: center center;                      /* Position the background image (center vertically, 10px from the left) */
}

/* Hover and focus states for the reset sorting button */
.reset-sorting-btn:hover,
.reset-sorting-btn:focus {
    background-color: var(--agnav-color-secondary-chrysocolla-tint1); /* Lighter green background on hover/focus to match dropdown button */
    border-color: var(--agnav-color-secondary-chrysocolla-tint1); /* Lighter green border color on hover/focus */
}