/* =========================================
   STATISTICS VIEW STYLES
   ========================================= */

/* Main Container */
.stats-view {
    padding-top: 24px;
    padding-bottom: 80px; /* Space for mobile nav */
    animation: fadeIn 0.3s ease-out;
}

/* Header & Filters */
.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.stats-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.stats-select-minimal {
    font-size: 1.15rem; /* Reduced from 1.5rem */
    font-weight: 600; /* Slightly less heavy */
    color: var(--color-text-primary);
    background: transparent;
    border: none;
    padding-right: 18px; /* Tighter padding */
    cursor: pointer;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C3E50' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); /* Darker arrow color explicitly */
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 0.8em; /* Smaller arrow */
}

/* Dark mode adjustment for arrow if possible via filter, or just use currentColor/mask.
   Using stroke='%23...' is hardcoded color. Better to use currentColor with mask or generic svg but color replacement in data uri is tricky without JS or mask.
   Let's try sticking to currentColor behavior which requires NOT encoding the color, but standard select background-image often needs encoded stats.
   Reverting to currentColor approach which works if SVG is simplified or using mask-image, but for broad support let's just use semi-transparent black which looks ok on both or update color var.
   Actually 'currentColor' in data URI SVG doesn't work in all browsers.
   Let's keep it simple: Use a dark grey that works on light mode, and filter invert on dark mode.
*/

[data-theme="dark"] .stats-select-minimal {
    filter: invert(1); /* Simple trick to make black arrow white in dark mode */
}

.stats-filters {
    display: flex;
    gap: 8px;
    background: var(--color-surface);
    padding: 4px;
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.stats-filter-btn {
    background: transparent;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.stats-filter-btn.active {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.3);
}

/* Summary Grid */
.stats-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
    gap: 16px;
    margin-bottom: 24px;
}

/* Full width for the main total card on mobile */
.stats-summary-card.main-card {
    grid-column: span 2;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: white;
}

.stats-summary-card {
    background: var(--color-surface);
    border-radius: 20px;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.08); /* Borde fino y gris explícito */
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02); /* Sutil sombra extra */
}

/* .stats-summary-card:hover {
    transform: translateY(-2px);
} */

.stats-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 4px;
}

.stats-card-label {
    font-size: 0.8rem;
    opacity: 0.8;
    font-weight: 500;
}

.stats-card-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

.stats-summary-card:not(.main-card) .stats-card-icon {
    background: var(--color-bg);
    color: var(--color-primary);
}

.stats-summary-card:not(.main-card) .stats-card-label {
    color: var(--color-text-secondary);
}

.stats-summary-card:not(.main-card) .stats-card-value {
    color: var(--color-text-primary);
}

/* Charts Section */
.stats-section {
    background: var(--color-surface);
    border-radius: 20px;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.08); /* Borde fino y gris explícito */
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.stats-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.stats-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

/* Bar Chart (CSS Specific) */
.bar-chart-container {
    height: 180px; /* Reduced height for mobile */
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4px;
    padding-top: 20px; /* Space for labels if needed */
    position: relative;
    /* Dotted line for avg or grid */
    background-image: linear-gradient(var(--color-border) 1px, transparent 1px);
    background-size: 100% 40px; 
}

.bar-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    position: relative;
    
    /* Tooltip logic */
    cursor: pointer;
}

.bar-column .bar-bg {
    width: 60%; /* Bar width */
    max-width: 16px;
    background: var(--color-surface-variant);
    border-radius: 4px 4px 0 0;
    height: 0%; /* Default */
    transition: height 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Active/Filled Part of Bar */
.bar-column .bar-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--color-primary);
    height: 100%;
    border-radius: 4px 4px 0 0;
    opacity: 0.8;
}

/* Highest Bar Highlight */
.bar-column.highest .bar-fill {
    background: var(--color-accent);
    opacity: 1;
}

.bar-label {
    margin-top: 8px;
    font-size: 0.7rem;
    color: var(--color-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Tooltip on hover/click */
.bar-column::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: var(--bar-height, 0%); /* Use JS variable or 0 */
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px; /* Spacing above bar */
    background: #222;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 100;
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.bar-column:hover::after,
.bar-column:active::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px); /* Slight float up on hover */
}

/* Top Stores List */
.top-stores-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.store-rank-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.store-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.store-icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-surface-variant);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.store-name-bar-container {
    flex: 1;
}

.store-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 4px;
    display: block;
}

.store-progress-bg {
    width: 100%;
    height: 6px;
    background: var(--color-bg);
    border-radius: 3px;
    overflow: hidden;
}

.store-progress-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 3px;
    transition: width 1s ease;
}

.store-amount {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text-primary);
    min-width: 60px;
    text-align: right;
}

/* Desktop Styles */
@media (min-width: 768px) {
    .stats-summary-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .stats-summary-card.main-card {
        grid-column: span 1; /* Reset to 1 col on desktop */
    }

    .stats-summary-card.main-card {
        grid-column: span 1; /* Reset to 1 col on desktop */
    }

    .stats-content-columns {
        display: grid;
        grid-template-columns: 2fr 1fr; /* Izq más ancho para pagos/otros, der para ciudades */
        gap: 20px;
    }
}

/* Payment Stats Styles */
.payment-methods-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-stat-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.payment-label {
    width: 90px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--color-text-primary);
    font-weight: 500;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.payment-bar-track {
    flex: 1;
    height: 8px;
    background: var(--color-bg);
    border-radius: 4px;
    overflow: hidden;
}

.payment-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 1s ease;
}

.payment-value {
    width: 40px;
    text-align: right;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* Top Products Styles */
.top-products-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.product-rank-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

.product-rank-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.product-rank-num {
    width: 28px;
    height: 28px;
    background: var(--color-surface-variant);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.product-rank-item:nth-child(1) .product-rank-num {
    background: #FFD700;
    color: #555;
    box-shadow: 0 2px 4px rgba(255, 215, 0, 0.4);
}

.product-rank-item:nth-child(2) .product-rank-num {
    background: #C0C0C0;
    color: #555;
}

.product-rank-item:nth-child(3) .product-rank-num {
    background: #CD7F32;
    color: #fff;
}

.product-rank-info {
    flex: 1;
    overflow: hidden;
}

.product-rank-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-rank-details {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
}

.empty-msg {
    text-align: center;
    padding: 20px;
    color: var(--color-text-tertiary);
    font-size: 0.9rem;
    font-style: italic;
    background: var(--color-bg);
    border-radius: 12px;
}