﻿.search-box {
    background-color: #f5f2f2;
    padding: 1em;
    border-radius: 8px;
    text-align: left;
}

    .search-box div {
        vertical-align: bottom;
    }

    .search-box label {
        font-weight: bold;
    }

.flatpickr-group {
    max-width: 12em;
}

    .flatpickr-group .calendar-btn {
        border-left: 0;
    }

    .flatpickr-group .form-control:focus {
        box-shadow: none;
    }

.rd-date {
    border: 1px solid black;
    height: 2.7em;
}

.rd-search {
    height: 2.7em;
}

.rd-search-btn {
    margin-top: 1.9em;
    height: 2.3em;
}

/* New: reset button mirrors search button sizing */
.rd-reset-btn {
    margin-top: 1.9em;
    height: 2.3em;
}

/* Added underline table style */
.table-underline tbody tr {
    border-bottom: 1px solid #dee2e6;
}

    .table-underline tbody tr:last-child {
        border-bottom: 0;
    }

.btn-ref {
    font-weight: bold;
    color: darkslategray;
}

/* Sort indicator arrow color */
.sort-indicator {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.65rem;
    line-height: 0.7;
    vertical-align: middle;
    user-select: none;
    gap: 2px;
}

    .sort-indicator .arrow {
        display: block;
        /* Make glyph visually wider and shorter */
        font-size: 0.85rem; /* slightly larger base so horizontal scaling has room */
        line-height: 0.55; /* reduces vertical bounding box */
        transform: scaleY(0.55) scaleX(1.1);
        transform-origin: center;
    }

    .sort-indicator .active {
        color: steelblue;
        font-weight: 600;
    }

    .sort-indicator .inactive {
        color: #b0b7c3;
    }

/* Hourglass loading icon (after header text, before arrows) */
.sort-loading .hourglass {
    display: inline-block;
    margin-left: 4px;
    font-size: 0.85rem;
    animation: hg-pulse 1s ease-in-out infinite;
    vertical-align: middle;
}

/* Muted header text while loading (does not affect arrow colors) */
.sort-loading {
    color: #6c757d; /* muted gray */
    opacity: .70;
    transition: color .15s ease, opacity .15s ease;
}

    /* Keep hourglass fully visible despite parent opacity */
    .sort-loading .hourglass {
        opacity: 1;
    }

@keyframes hg-pulse {
    0% {
        opacity: .35;
        transform: scale(.9);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: .35;
        transform: scale(.9);
    }
}
