.table-hover tbody tr:hover,
.table-hover > tbody > tr:hover {
    background-color: #ffe5e5 !important;
}

/* Ensure sticky column gets highlighted too */
.table-hover tbody tr:hover .sticky-col,
.table-hover > tbody > tr:hover .sticky-col {
    background-color: #ffe5e5 !important;
}
.table-hover tbody tr:hover,
.table-hover > tbody > tr:hover {
    background-color: #ffe5e5 !important;
}
.table-hover tbody tr:hover > th,
.table-hover tbody tr:hover > td {
    background-color: #ffe5e5 !important;
}
.sticky-col {
    position: sticky;
    left: 0;
    z-index: 30;
    background: #fff;                 /* fallback solid */
    box-shadow: 2px 0 0 rgba(0,0,0,0.06);
    background-clip: padding-box;
}

/* Preserve header cell shading */
.environments-table-wrapper thead .sticky-col {
    background: #f2f2f2;
}

/* Re-apply striping explicitly to sticky cells so they stay opaque */
.table-striped tbody tr:nth-of-type(odd) td.sticky-col {
    background-color: var(--bs-table-striped-bg, #f9f9f9);
}
.table-striped tbody tr:nth-of-type(even) td.sticky-col {
    background-color: var(--bs-table-bg, #ffffff);
}

/* Hover state (kept opaque) */
.table-hover tbody tr:hover td.sticky-col {
    background-color: #ffe5e5 !important;
}

 Optional stronger mask to guarantee opacity (uncomment if any bleed remains)
.table-striped tbody td.sticky-col::before {
    content:'';
    position:absolute;
    inset:0;
    background: inherit;
    z-index:-1;
}

html {
  font-size: 8px;
}
a {
    text-decoration: none;
}
@media (min-width: 1500px) {
  html {
    font-size: 10px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

.ui-dialog-titlebar-close {
    background-image: url('Icon/signs-close-icon.png');
    background-repeat: no-repeat;
    background-position: center;
}



table {
    border-collapse: collapse;
    /* Remove width: 100% to allow min-width/max-content to work */
}

th, td {
    border: 1px solid #ddd;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
}

body {
  margin-bottom: 10px;
}
#table-wrapper {
    max-width: 100%;
    overflow-x: auto; /* Allows scrolling within the table wrapper if necessary */
   
}
.header-top {
    height: auto;
    min-height: 40px;
    width: 10%;
    background-color: lightcyan;
    overflow: visible;
}


/* --- Sticky table layout (consolidated / corrected) ---------------------------------- */

/* Wrapper: make sure it creates the vertical scroll instead of the body */
.environments-table-wrapper {
    position: relative;
}

/* Inner scroll area: force a height so vertical scrolling happens here */
.environments-table-wrapper .table-responsive {
    max-height: calc(100vh - 240px); /* adjust if header/toolbars change */
    overflow: auto;                  /* BOTH axes scroll here */
    background: #fff;
}

/* Header cells stay at top while the inner container scrolls */
.environments-table-wrapper table thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 25;
    box-shadow: 0 1px 0 #dee2e6;
}

/* First column (header + data cells) pinned horizontally */
.environments-table-wrapper table th.sticky-col,
.environments-table-wrapper table td.sticky-col {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 30; /* above normal cells */
    box-shadow: 2px 0 0 rgba(0,0,0,0.06);
}

/* First column header needs to be above both (top + left) */
.environments-table-wrapper table thead th.sticky-col {
    z-index: 40;
}

/* Optional: stronger visual separation under header row */
.environments-table-wrapper table thead th {
    border-bottom: 2px solid #dee2e6;
}

/* (Keep existing .sticky-col::after if you like the dark separator, or tune it:) */
.sticky-col::after {
    content: '';
    position: absolute;
    top: 0;
    right: -3px;
    width: 3px;
    height: 100%;
    background: #e5e5e5;
    z-index: 45;
    pointer-events: none;
}

/* Remove duplicate .table-header-row sticky rule (it can conflict) */
.table-header-row {
    /* no positioning here now */
}

.color-me {
    color: blue;
    margin-right: 20px;
}

// Add this CSS to your stylesheet
.input-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

}

.state-column {
    width: 30px;
}

.env-column {
    width: 100px;
}

.input-group label {
    width: 50%;
}

.input-group input {
    width: 45%;
    margin-left: 5%;
}



.checkbox-label-wrapper {
    display: flex; /* This makes it possible to align items next to each other */

    gap: 1px; /* Adjust this value to control the space between the checkbox and label */
}

.checkbox-label-wrapper label {
        white-space: nowrap; /* Prevents the label text from wrapping */  
        display: inline-block; /* Allows the overflow properties to take effect */
        max-width: 90%; /* Adjust this value based on your layout's needs */
    }

 .checkbox-label-wrapper input[type="checkbox"] {
        margin-left: 100px; /* Adds a small space between the checkbox and the label */
    }
/* --- Sidebar / layout stacking fixes --- */
header {
    position: sticky;
    top: 0;
    z-index: 1000; /* keep menu above table */
    background: #f8f9fa;
}
h2 {
    margin-top: .5rem;
    margin-bottom: .75rem;
}

/* Narrow the "Select Env IDs" multi-select (Select2 + native fallback) */
#envIdFilter {
    width: 200px;              /* fallback if Select2 not applied */
    max-width: 200px;
}

#envIdFilterContainer .select2-container {
    width: 200px !important;   /* force Select2 rendered width */
}

#envIdFilterContainer .select2-selection {
    min-height: 32px;
    font-size: .9rem;
}

/* Optional: make tags wrap nicely in the smaller box */
#envIdFilterContainer .select2-selection__rendered {
    white-space: normal !important;
    line-height: 1.2;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* --- Prevent table scrollbars from overlapping footer --- */
/* Define layout sizing variables (tune these numbers) */
:root {
    --env-header-offset: 340px;   /* h2 + toolbar + filter box + padding */
    --env-footer-height: 40px;    /* approximate footer height */
}

/* Make sure page uses flex so footer sits after scroll area */
html, body {
    height: 100%;
}
body > .page-wrapper, /* if you have a wrapper div */
body > main {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
main .content-area,
.page-wrapper .content-area {
    flex: 1 1 auto;
    min-height: 0; /* allow inner flex child to size */
}

/* Scroll container: subtract footer height so horizontal bar stays above footer */
.environments-table-wrapper .table-responsive {
    max-height: calc(100vh - var(--env-header-offset) - var(--env-footer-height));
    overflow: auto;
    background: #fff;
    padding-bottom: 2px; /* space for horizontal scrollbar */
    box-sizing: border-box;
}

/* Provide a safety margin so the native scrollbar never touches footer even if calc off */
.environments-table-wrapper {
    margin-bottom: calc(var(--env-footer-height) + 5px);
}

/* Footer should not overlay content; ensure it's static flow */
footer {
    position: relative !important;
    z-index: 10;
}

/* --- FIX: Opaque sticky first column so scrolled cells cannot bleed through --- */
/* Remove earlier conflicting .sticky-col rules (background: inherit / lower z-index) */

/* Base sticky column (data cells) */
td.sticky-col {
    position: sticky;
    left: 0;
    z-index: 120;                 /* higher than other body cells */
    background: #fff;              /* default even-row color */
    background-clip: border-box;
}

/* Header cell (first column) */
thead th.sticky-col {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 130;                  /* above body sticky cells */
    background: #f2f2f2;
}

/* Striping (keep opaque) */
.table-striped tbody tr:nth-of-type(odd) td.sticky-col {
    background: var(--bs-table-striped-bg, #f9f9f9);
}
.table-striped tbody tr:nth-of-type(even) td.sticky-col {
    background: var(--bs-table-bg, #ffffff);
}

/* Hover (override striping) */
.table-hover tbody tr:hover td.sticky-col {
    background: #ffe5e5 !important;
}

/* Mask edge divider (replace earlier ::after that had dark bar) */
td.sticky-col::after, thead th.sticky-col::after {
    content: '';
    position: absolute;
    top: 0;
    right: -1px;
    width: 1px;
    height: 100%;
    background: #d7d7d7;
    z-index: 140;
    pointer-events: none;
}

/* Remove older dark wide separator if still present */
td.sticky-col::before,
td.sticky-col.old-separator::after { display: none !important; }
/* --- FIX STICKY FIRST COLUMN BLEED-THROUGH (place this at END of file) --- */
/* Remove or comment out earlier .sticky-col, thead .sticky-col, and td.sticky-col blocks (they dilute precedence) */
/* This consolidated block guarantees an opaque paint layer and highest stacking order */

table td.sticky-col,
table th.sticky-col {
    position: sticky;
    left: 0;
    background-color: #fff !important; /* solid paint (even rows + fallback) */
    z-index: 500;                      /* well above other body cells */
    background-clip: padding-box;
    isolation: isolate;                /* create new stacking context (prevents bleed) */
}

/* Header retains its own shade */
table thead th.sticky-col {
    top: 0;
    background-color: #f2f2f2 !important;
    z-index: 510;
}

/* Re‑apply opaque striping explicitly (no transparency) */
.table-striped tbody tr:nth-of-type(odd) td.sticky-col {
    background-color: #f9f9f9 !important;
}
.table-striped tbody tr:nth-of-type(even) td.sticky-col {
    background-color: #ffffff !important;
}

/* Hover (kept opaque) */
.table-hover tbody tr:hover td.sticky-col {
    background-color: #ffe5e5 !important;
}

/* Replace previous ::after separator with a thin border to avoid see-through gaps */
table td.sticky-col,
table th.sticky-col {
    border-right: 1px solid #d7d7d7;
}

/* Remove any prior wide separator pseudo-element if still present */
table td.sticky-col::after,
table th.sticky-col::after {
    content: none !important;
}

/* ---- Unshade Env ID (first column) header cell ----
   Place this at the very end of the file so it overrides earlier rules. */
table thead th.sticky-col {
    background: #fff !important;   /* remove gray shading */
    /* keep existing sticky behavior & border from prior rules */
}