html, body {
    height: 100%;
}

/* Add padding to small screens for a footer if footer present*/
@media (max-width: 575.98px) {
    body.has-mobile-footer {
        padding-bottom: 100px;
    }
}

.mobile-id-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
    /* Ensures it's on top of most other content */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    /* Optional: Adds a nice shadow */
}


.container {
    overflow-y: hidden;
}

.container-fluid.main {
    min-height: 100%;
}

.container.main {
    margin-top: -140px;
    padding-top: 140px;
}

#map {
    height: 600px;
}

.modal.fade {
    background: rgba(0, 0, 0, 0.5);
}

.modal-backdrop.fade {
    opacity: 0;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.animate-confirm {
    animation: pulse 0.5s ease;
}

.badge.badge-bigger {
  font-size: 1rem;
}

.badge.lead{
    font-size: 1.25rem; 
    font-weight: 300;
}


/*
  1. Style the table ROW with the progress gradient.
     This is the layer we want to be visible.
*/
.table-progress-row tr {
    background-image: linear-gradient(to right,
            var(--progress-color, rgba(0, 123, 255, 0.2)) var(--progress-percent, 0%),
            transparent var(--progress-percent, 0%));
    background-repeat: no-repeat;
}

/*
  2. THIS IS THE CRITICAL FIX: Force the table CELLS to be transparent.
     Bootstrap applies an opaque background to `<td>` elements by default.
     This rule overrides Bootstrap's style, making the `<tr>` background visible.
     The `!important` flag ensures this rule wins.
*/
.table-progress-row td,
.table-progress-row th {
    background-color: transparent !important;
}

/*
  3. Apply the hover effect directly to the row.
     This darkens the entire row, including the gradient and the transparent area.
     A transition is added for a smooth visual effect.
*/
.table-progress-row tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.075) !important;
    /* Use !important to override Bootstrap's cell-level hover */
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

/* --- Color Helper Classes (Unchanged) --- */
.table-progress-row .bg-progress-success {
    --progress-color: rgba(25, 135, 84, 0.2);
}

.table-progress-row .bg-progress-info {
    --progress-color: rgba(13, 202, 240, 0.2);
}

.table-progress-row .bg-progress-warning {
    --progress-color: rgba(255, 193, 7, 0.25);
}

.table-progress-row .bg-progress-danger {
    --progress-color: rgba(220, 53, 69, 0.2);
}

.table-progress-row .bg-progress-secondary {
    --progress-color: rgba(108, 117, 125, 0.2);
}