/**
 * HairColorGPT - Cache Stats Bar (Minimal Flat)
 *
 * @package HairColorGPT_Unified
 * @since 2.1.0
 */

/* ==========================================================================
   Cache Stats Bar - Minimal Flat Design
   ========================================================================== */

.hcgpt-cache-bar {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--hcgpt-surface);
    border-bottom: 1px solid #e0e0e0;
    padding: 8px 20px;
    margin: -10px -20px 20px -22px;
    font-size: var(--hcgpt-font-size-12);
    color: #616161;
}

.hcgpt-cache-bar-label {
    font-weight: var(--hcgpt-font-weight-medium);
    color: #424242;
    text-transform: var(--hcgpt-text-transform-uppercase);
    letter-spacing: var(--hcgpt-letter-spacing-05px);
    font-size: var(--hcgpt-font-size-11);
}

.hcgpt-cache-bar-stats {
    display: flex;
    align-items: center;
    gap: 20px;
}

.hcgpt-cache-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}

.hcgpt-cache-stat-icon {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.hcgpt-cache-stat-value {
    font-weight: var(--hcgpt-font-weight-semibold);
    color: #1d2327;
    font-variant-numeric: tabular-nums;
}

.hcgpt-cache-stat-label {
    color: #757575;
}

/* Divider */
.hcgpt-cache-bar-divider {
    width: 1px;
    height: 20px;
    background: #e0e0e0;
}

/* Status indicators */
.hcgpt-cache-stat--ok .hcgpt-cache-stat-value {
    color: #2e7d32;
}

.hcgpt-cache-stat--warn .hcgpt-cache-stat-value {
    color: #f57c00;
}

.hcgpt-cache-stat--error .hcgpt-cache-stat-value {
    color: #c62828;
}

/* Actions */
.hcgpt-cache-bar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.hcgpt-cache-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    font-size: var(--hcgpt-font-size-11);
    font-weight: var(--hcgpt-font-weight-medium);
    color: #616161;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex: 0 0 auto;
}

.hcgpt-cache-btn:hover {
    background: #f5f5f5;
    border-color: #bdbdbd;
    color: #424242;
}

.hcgpt-cache-btn--flush:hover {
    background: #ffebee;
    border-color: #ef9a9a;
    color: #c62828;
}

.hcgpt-cache-btn--refresh:hover {
    background: #e3f2fd;
    border-color: #90caf9;
    color: #1565c0;
}

.hcgpt-cache-btn .dashicons {
    font-size: var(--hcgpt-font-size-12);
    width: 12px;
    height: 12px;
    line-height: var(--hcgpt-line-height-12px);
}

.hcgpt-cache-btn--loading {
    opacity: 0.6;
    pointer-events: none;
}

.hcgpt-cache-btn--loading .dashicons {
    animation: hcgpt-spin 1s linear infinite;
}

@keyframes hcgpt-spin {
    100% { transform: rotate(360deg); }
}

/* Last update time */
.hcgpt-cache-bar-time {
    font-size: var(--hcgpt-font-size-10);
    color: #9e9e9e;
}

/* Responsive */
@media (max-width: 960px) {
    .hcgpt-cache-bar {
        flex-wrap: wrap;
        gap: 12px;
        padding: 10px 16px;
        margin: -10px -16px 16px -18px;
    }

    .hcgpt-cache-bar-stats {
        gap: 12px;
    }

    .hcgpt-cache-stat-label {
        display: none;
    }

    .hcgpt-cache-bar-actions {
        width: auto;
        justify-content: flex-end;
        padding-top: 0;
        border-top: 0;
        margin-top: 0;
    }
}

@media (max-width: 600px) {
    .hcgpt-cache-bar {
        margin: -10px -10px 16px -12px;
        padding: 8px 12px;
    }

    .hcgpt-cache-bar-label {
        display: none;
    }

    .hcgpt-cache-bar-divider {
        display: none;
    }
}