.btn.btn-danger {
    background-color: #dc3546;
    color: white;
    font-weight: bold;
    padding: 3px;
}

    .btn.btn-danger:hover {
        background-color: white;
        color: #dc3546;
        font-weight: bold;
    }

.btn.btn-info {
    background-color: #17a2b7;
    color: white;
    font-weight: bold;
    padding: 3px;
}

    .btn.btn-info:hover {
        background-color: white;
        color: #17a2b7;
        font-weight: bold;
    }

.btn.btn-primary {
    background-color: steelblue;
    color: white;
    font-weight: bold;
    padding: 3px;
}

    .btn.btn-primary:hover {
        background-color: white;
        color: steelblue;
        font-weight: bold;
    }

.btn.btn-warning {
    background-color: #fec007;
    color: white;
    font-weight: bold;
    padding: 3px;
}

    .btn.btn-warning:hover {
        background-color: white;
        color: #fec007;
        font-weight: bold;
    }

.item-counter {
    color: fuchsia;
    margin-left: 2px;
    font-size: 0.9em;
    /*vertical-align: super;*/ /* This pushes it slightly higher than the baseline */
    line-height: 0; /* Prevents the counter from affecting the height of the label line */
}

.required-indicator {
    color: red;
    margin-left: 2px;
    /*vertical-align: super;*/
}

/* ========================================================
   CUSTOM DASHBOARD SWITCHES (White Unchecked Track)
   ======================================================== */

/* Unchecked State: Pure white track with a grey dot */
.custom-dashboard-switches .form-check-input {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    /* Uses %23adb5bd (hex #adb5bd) for the light grey dot */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23adb5bd'/%3e%3c/svg%3e") !important;
}

    /* Checked State: Vivid blue track with a pure white dot */
    .custom-dashboard-switches .form-check-input:checked {
        background-color: #0d6efd !important; /* Bootstrap Primary Blue */
        border-color: #0d6efd !important;
        /* Uses %23ffffff for the pure white dot */
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e") !important;
    }

    /* Optional: Slight glow effect when focused so it feels native */
    .custom-dashboard-switches .form-check-input:focus {
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
    }



/* COMPACT MODE OVERRIDES */
body.compact-mode .table {
    font-size: 12px;
}

    /* Force a comfortable, consistent row height */
    body.compact-mode .table td,
    body.compact-mode .table th {
        padding: 2px 8px !important; /* Tight padding */
        height: 24px; /* Explicit height */
        line-height: 20px; /* Centers the text vertically */
        vertical-align: middle;
    }



/* COMPACT MODE OVERRIDES */
body.compact-mode .table {
    font-size: 12px;
}

    /* This replaces the 'height' rule with smart padding */
    body.compact-mode .table td,
    body.compact-mode .table th {
        padding-top: 10px !important; /* Tight top padding */
        padding-bottom: 10px !important; /* Tight bottom padding */
        padding-left: 8px !important; /* Side padding keeps it readable */
        padding-right: 8px !important;
        vertical-align: middle; /* Keeps everything perfectly centered */
    }



/* 1. Define the base "Legacy" light mode */
body.legacy-theme .table {
    --bs-table-bg: #ffffff !important;
    --bs-table-color: #212529 !important;
}

/* 2. Striped rows (only if NOT active) */
body.legacy-theme .table-striped > tbody > tr:nth-of-type(odd):not(.table-active) > td {
    background-color: #e6e6fa !important; /* Pale Purple */
}

body.legacy-theme .table-striped > tbody > tr:nth-of-type(even):not(.table-active) > td {
    background-color: #add8e6 !important; /* Light Blue */
}

/* 3. The "Selected" Row: Force this to win over striping */
body.legacy-theme .table-striped > tbody > tr.table-active > td {
    background-color: #ffeeba !important; /* Pale Yellow highlight */
    color: #212529 !important;
    border-color: #e6dbb9 !important;
}

/* 4. PROTECT THE GRAPHICS: This is what stops the SVG from "filling" the cell */
body.legacy-theme .table-active .sparkline {
    background-color: transparent !important;
}

/* Ensure the lines stay a readable dark blue in light mode */
body.legacy-theme .sparkline polyline,
body.legacy-theme .sparkline circle {
    stroke: #0d6efd !important;
    fill: #0d6efd !important;
}

.sparkline {
    vertical-align: middle;
    overflow: visible;
    transition: transform 0.2s ease;
}

    .sparkline:hover {
        transform: scale(1.1); /* Slight pop-out effect when hovering */
    }

/* Sticky Header Logic */
/* 1. The Scrollable Container */
.sticky-table-container {
    max-height: 65vh;
    overflow-y: auto;
}

    /* 2. The Sticky Headers */
    .sticky-table-container table thead th {
        position: sticky;
        top: -1px; /* Pulls the header up to cover the top gap */
        z-index: 10;
        background-color: #212529; /* Matches your table-dark background */
        background-clip: padding-box; /* Stops background from bleeding under borders */
        /* Double shadow: 
       First line is your subtle border.
       Second line paints a solid 1px line underneath to hide row bleed. */
        box-shadow: inset 0 -1px 0 #373b3e, 0 1px 0 #212529;
    }

        /* 3. Ensure the counter column stays above the numbers */
        .sticky-table-container table thead th.col-row-number {
            z-index: 11;
        }

.progress {
    height: 10px;
    border-radius: 4px;
    background-color: #3e444a; /* Slightly lighter than your dark table */
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

/* 1. Target the table text itself */
.custom-grid-text {
    color: #d3d3d3 !important;
}

/* 2. Force it down into standard cells, headers, and labels (spans) */
.custom-grid-text td,
.custom-grid-text th
/*.custom-grid-text span*/ {
    color: #d3d3d3 !important;
}

/* 3. Optional: Move your Hyperlink colors here too! */
.custom-grid-text a {
    transition: color 0.2s ease-in-out; /* Brilliant optimization here */
    color: #d3d3d3 !important;
    text-decoration: none;
}
    /* Add !important to the hover color so it can override the base state */
    .custom-grid-text a:hover {
        color: #0dcaf0 !important; /* The Bootstrap $info cyan is a great choice */
        text-decoration: none;
        cursor: pointer; /* Excellent defensive CSS for LinkButtons! */
    }

.alert-red-border {
    cursor: default !important;
    border: 2px solid #dc3545 !important;
    border-radius: 0.375rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    line-height: 1.2 !important;
    display: inline-block;
    vertical-align: middle;
}

.alert-green-border {
    cursor: default !important;
    border: 2px solid #198754 !important;
    border-radius: 0.375rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    line-height: 1.2 !important;
    display: inline-block;
    vertical-align: middle;
}

.alert-orange-border {
    cursor: default !important;
    border: 2px solid #fd7e14 !important;
    border-radius: 0.375rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    line-height: 1.2 !important;
    display: inline-block;
    vertical-align: middle;
}

.alert-yellow-border {
    cursor: default !important;
    border: 2px solid #ffc107 !important;
    border-radius: 0.375rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    line-height: 1.2 !important;
    display: inline-block;
    vertical-align: middle;
}

.vibrantCyanYesHoverNoPointer {
    transition: color 0.2s ease-in-out; /* Note: better to transition just 'color' for performance */
    /*cursor: none;*/
    color: #d3d3d3;
}
    .vibrantCyanYesHoverNoPointer:hover {
        color: #0dcaf0; /* A slightly darker cyan for hover feedback */
        text-decoration: none;
        cursor: default;
    }

.vibrantCyanYesHoverYesPointer {
    transition: color 0.2s ease-in-out; /* Note: better to transition just 'color' for performance */
    /*cursor: none;*/
    color: #d3d3d3;
}
    .vibrantCyanYesHoverYesPointer:hover {
        color: #0dcaf0; /* A slightly darker cyan for hover feedback */
        text-decoration: none;
        cursor: pointer;
    }

.darkOrange_yesHoverVibrantCyan_noPointer {
    transition: color 0.2s ease-in-out; /* Note: better to transition just 'color' for performance */
    color: darkorange;
    cursor: default;
}
    .darkOrange_yesHoverYellow_noPointer:hover {
        color: #0dcaf0;
        cursor: default;
        text-decoration: none;
    }

.greenNoHoverNoPointerBlinking {
    animation: blinker 1s linear infinite;
    color: green;
    cursor: default;
}

.greenYesHoverNoPointer {
    transition: color 0.2s ease-in-out; /* Note: better to transition just 'color' for performance */
    color: #d3d3d3;
}
    .greenYesHoverNoPointer:hover {
        color: green;
        text-decoration: none;
        cursor: default;
    }

.redYesHoverNoPointer {
    transition: color 0.2s ease-in-out; /* Note: better to transition just 'color' for performance */
    color: #d3d3d3;
}
    .redYesHoverNoPointer:hover {
        color: red;
        text-decoration: none;
        cursor: default;
    }