/* Header */
.app-header {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: var(--border-radius-lg);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-md);
    z-index: 10;
}

.logo-container img {
    height: 35px;
    filter: brightness(0) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    /* Converts white logo to black to match light header */
    opacity: 0.85;
    /* Slightly soften the pure black to match the slate text */
}

#logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stats-container {
    display: flex;
    gap: 20px;
}

.stat-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    padding: 10px 20px;
    border-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-light);
}

.clickable-stat-card {
    cursor: pointer;
    position: relative;
    user-select: none;
}

.clickable-stat-card.active {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border: 2px solid #6366f1;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
    transform: translateY(-2px);
}

.clickable-stat-card.active .stat-value {
    color: #4f46e5;
}

.clickable-stat-card .stat-subtext {
    font-size: 0.65rem;
    color: var(--text-secondary);
    margin-top: 2px;
    font-weight: 600;
}

#stat-duplicates {
    font-size: 0.68rem;
    color: #b91c1c;
    background: #fee2e2;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 700;
    margin-top: 4px;
    display: inline-block;
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.badge-unique-tag {
    background: #10b981;
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    letter-spacing: 0.3px;
}

.duplicate-group-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ede9fe;
    color: #4f46e5;
    border: 1px solid #c7d2fe;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 6px;
}

.duplicate-group-badge:hover {
    background: #4f46e5;
    color: white;
    transform: scale(1.05);
}

.stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    font-weight: 600;
}

/* `display: contents` dissolves this wrapper, so the value and the duplicate
   badge stay direct flex children of the card and stack exactly as they did
   before it existed. The phone breakpoint turns it into a real flex row to put
   the two side by side. */
.stat-value-row {
    display: contents;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent-color);
}

.filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 10px;
    /* Keep Search reachable while picking filters further up the sidebar. */
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 10px 0;
    background: rgba(255, 255, 255, 0.95);
}

.filter-actions .btn {
    flex: 1;
    justify-content: center;
}

/* Filters apply only on Search; flag unapplied changes so the user knows to click it. */
.filter-pending-hint {
    flex-basis: 100%;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--accent-color);
}

#btn-search.filters-pending {
    background-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}