/* ==========================================================================
   HMSweb - Candidate Pipeline Dashboard Styles
   ========================================================================== */

/* 🔍 Global Filter Bar Styling Layout */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
}

/* Positions the visual anchor icon neatly inside the input wrapper box */
.search-icon {
    position: absolute;
    left: 14px;
    color: #6c757d;
    font-size: 0.95rem;
    pointer-events: none; /* Prevents blocking clicks on the input below it */
}

/* Custom design treatments for our dedicated search bar input */
.dashboard-search-input {
    padding-left: 38px; /* Leave precise layout spacing so text doesn't overlap the glass icon */
    height: 42px;
    border-radius: 8px;
    border: 1px solid #ced4da;
    font-size: 0.95rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

    /* Custom interactive active glow state */
    .dashboard-search-input:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
        outline: 0;
    }

/* ==========================================================================
   🗂️ Interactive Candidate Deck Cards & Animations
   ========================================================================== */

/* Gives our candidate cards an elegant hover lift indicator */
.candidate-card-wrapper .card {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

    .candidate-card-wrapper .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
    }

/* Smooth opacity fade state out when cards are actively filtered from view */
.candidate-card-wrapper {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* The core engine state used by our vanilla JS filter bar script */
.candidate-card-hidden {
    display: none !important;
}

/* ==========================================================================
   📐 Bootstrap Offcanvas Timeline Custom Layout Overrides
   ========================================================================== */

#timelineContent {
    font-size: 0.95rem;
}

/* Custom line spacing adjustments for internal raw list descriptions */
.card-description ul {
    padding-left: 1.1rem;
    margin-bottom: 0;
}

.card-description li {
    margin-bottom: 4px;
}

/* ==========================================================================
   📊 Step 2: Metric Interactive Status Overlays
   ========================================================================== */
@media (min-width: 768px) {
    .col-md-2-5 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}

.metric-card {
    transition: transform 0.2s, box-shadow 0.2s;
    border-radius: 8px;
}

    .metric-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }

.metric-clickable {
    cursor: pointer !important;
}

    .metric-clickable.active-filter {
        background-color: rgba(13, 110, 253, 0.04) !important;
        box-shadow: inset 0 0 0 2px #0d6efd, 0 0.5rem 1rem rgba(0, 0, 0, 0.08) !important;
    }

.row-hidden {
    display: none !important;
}