/**

 * NeuraNav Trends - Enhanced Analytics Styles

 * @version 2.0 - Charts, Word Cloud, Heatmap

 */



.trends-page {

    max-width: 1400px;

    margin: 0 auto;

    padding: 20px;

}



/* Transparency Banner */

.transparency-banner {

    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(59, 130, 246, 0.1));

    border: 1px solid var(--nw-success);

    border-radius: 12px;

    padding: 20px 24px;

    margin-bottom: 24px;

}



.transparency-content {

    display: flex;

    align-items: flex-start;

    gap: 16px;

}



.transparency-content i {

    font-size: 24px;

    color: var(--nw-success);

    margin-top: 2px;

}



.transparency-content strong {

    display: block;

    font-size: 16px;

    color: var(--text-primary);

    margin-bottom: 4px;

}



.transparency-content p {

    font-size: 13px;

    color: var(--text-secondary);

    margin: 0;

    line-height: 1.5;

}



/* Page Header */

.trends-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 24px;

    flex-wrap: wrap;

    gap: 16px;

}



.trends-title h1 {

    font-size: 28px;

    font-weight: 700;

    color: var(--text-primary);

    margin: 0 0 8px 0;

    display: flex;

    align-items: center;

    gap: 12px;

}



.trends-title h1 i {

    color: var(--nw-accent);

}



.trends-title p {

    color: var(--text-secondary);

    margin: 0;

    font-size: 14px;

}



/* Period Selector */

.period-selector {

    display: flex;

    gap: 8px;

    background: var(--bg-secondary);

    padding: 4px;

    border-radius: 8px;

}



.period-btn {

    padding: 8px 16px;

    border-radius: 6px;

    font-size: 13px;

    font-weight: 500;

    color: var(--text-secondary);

    text-decoration: none;

    transition: all 0.2s;

}



.period-btn:hover {

    color: var(--text-primary);

    background: var(--bg-tertiary);

}



.period-btn.active {

    background: var(--nw-accent);

    color: white;

}



/* Tab Navigation */

.trends-tabs {

    display: flex;

    gap: 8px;

    margin-bottom: 24px;

    padding-bottom: 16px;

    border-bottom: 1px solid var(--border-color);

    overflow-x: auto;

    scrollbar-width: none;

}



.trends-tabs::-webkit-scrollbar {

    display: none;

}



.trends-tab {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 20px;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 500;

    color: var(--text-secondary);

    text-decoration: none;

    white-space: nowrap;

    transition: all 0.2s;

}



.trends-tab:hover {

    color: var(--text-primary);

    background: var(--bg-secondary);

}



.trends-tab.active {

    background: var(--nw-accent);

    color: white;

}



/* Stats Grid */

.stats-grid-4 {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 16px;

    margin-bottom: 24px;

}



.stat-card {

    background: var(--bg-secondary);

    border-radius: 12px;

    padding: 20px;

    display: flex;

    align-items: center;

    gap: 16px;

}



.stat-card.accent {

    background: linear-gradient(135deg, var(--nw-accent), #2563eb);

    color: white;

}



.stat-card.accent .stat-label {

    color: rgba(255, 255, 255, 0.8);

}



.stat-icon {

    width: 48px;

    height: 48px;

    border-radius: 12px;

    background: var(--bg-tertiary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    color: var(--nw-accent);

}



.stat-card.accent .stat-icon {

    background: rgba(255, 255, 255, 0.2);

    color: white;

}



.stat-data {

    display: flex;

    flex-direction: column;

}



.stat-value {

    font-size: 28px;

    font-weight: 700;

    color: var(--text-primary);

    line-height: 1.2;

}



.stat-card.accent .stat-value {

    color: white;

}



.stat-label {

    font-size: 13px;

    color: var(--text-secondary);

}



/* Cards */

.card {

    background: var(--bg-secondary);

    border-radius: 12px;

    overflow: hidden;

}



.card-header {

    padding: 16px 20px;

    border-bottom: 1px solid var(--border-color);

}



.card-title {

    font-size: 16px;

    font-weight: 600;

    color: var(--text-primary);

    margin: 0;

    display: flex;

    align-items: center;

    gap: 10px;

}



.card-title i {

    color: var(--nw-accent);

}



.card-body {

    padding: 20px;

}



/* Chart Cards */

.chart-card .card-body {

    height: 300px;

}



/* Overview Grid */

.overview-grid {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 24px;

}



/* Quick Stats */

.quick-stats {

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.quick-stat {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 12px 0;

    border-bottom: 1px solid var(--border-color);

}



.quick-stat:last-child {

    border-bottom: none;

}



.qs-label {

    color: var(--text-secondary);

    font-size: 14px;

}



.qs-value {

    font-size: 18px;

    font-weight: 600;

    color: var(--text-primary);

}



/* Word Cloud */

.word-cloud {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    gap: 12px 20px;

    padding: 20px;

    min-height: 200px;

}



.cloud-word {

    color: var(--nw-accent);

    text-decoration: none;

    transition: all 0.2s;

    padding: 4px 8px;

    border-radius: 4px;

}



.cloud-word:hover {

    background: var(--nw-accent);

    color: white;

    transform: scale(1.1);

}



/* Trending List */

.trending-list {

    display: flex;

    flex-direction: column;

}



.trending-item {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 16px;

    text-decoration: none;

    border-bottom: 1px solid var(--border-color);

    transition: background 0.2s;

}



.trending-item:last-child {

    border-bottom: none;

}



.trending-item:hover {

    background: var(--bg-tertiary);

}



.trending-rank {

    width: 32px;

    height: 32px;

    border-radius: 8px;

    background: var(--bg-tertiary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 600;

    color: var(--text-secondary);

    font-size: 14px;

}



.trending-rank.top-1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #78350f; }

.trending-rank.top-2 { background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #374151; }

.trending-rank.top-3 { background: linear-gradient(135deg, #f59e0b, #d97706); color: #78350f; }



.trending-info {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.trending-query {

    font-weight: 500;

    color: var(--text-primary);

    font-size: 15px;

}



.trending-meta {

    font-size: 12px;

    color: var(--text-secondary);

}



.trending-count {

    text-align: right;

}



.count-value {

    display: block;

    font-size: 18px;

    font-weight: 600;

    color: var(--nw-accent);

}



.count-label {

    font-size: 11px;

    color: var(--text-secondary);

    text-transform: uppercase;

}



/* Discoveries Grid */

.discoveries-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 16px;

}



.discovery-card {

    background: var(--bg-tertiary);

    border-radius: 12px;

    padding: 20px;

    display: flex;

    align-items: center;

    gap: 16px;

    text-decoration: none;

    transition: all 0.2s;

    position: relative;

}



.discovery-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);

}



.discovery-rank-badge {

    position: absolute;

    top: -8px;

    left: -8px;

    width: 28px;

    height: 28px;

    border-radius: 50%;

    background: var(--bg-secondary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 600;

    font-size: 12px;

    color: var(--text-secondary);

    border: 2px solid var(--bg-tertiary);

}



.discovery-rank-badge.top-1 { background: #fbbf24; color: #78350f; }

.discovery-rank-badge.top-2 { background: #9ca3af; color: #374151; }

.discovery-rank-badge.top-3 { background: #f59e0b; color: #78350f; }



.discovery-icon {

    width: 48px;

    height: 48px;

    border-radius: 10px;

    background: var(--bg-secondary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    color: var(--nw-accent);

}



.discovery-details {

    flex: 1;

    min-width: 0;

}



.discovery-id {

    display: block;

    font-weight: 500;

    color: var(--text-primary);

    font-size: 14px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.discovery-type {

    font-size: 12px;

    color: var(--text-secondary);

}



.discovery-stats {

    text-align: right;

}



.click-count {

    display: block;

    font-size: 20px;

    font-weight: 700;

    color: var(--nw-accent);

}



.click-label {

    font-size: 11px;

    color: var(--text-secondary);

}



/* Categories Layout */

.categories-layout {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 24px;

}



.donut-container {

    height: 300px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.categories-list {

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.category-row {

    display: flex;

    align-items: center;

    gap: 16px;

}



.category-icon-wrap {

    width: 40px;

    height: 40px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

}



.category-info {

    flex: 1;

}



.category-name {

    display: block;

    font-weight: 500;

    color: var(--text-primary);

    font-size: 14px;

    margin-bottom: 6px;

}



.category-bar-wrap {

    height: 6px;

    background: var(--bg-tertiary);

    border-radius: 3px;

    overflow: hidden;

}



.category-bar-fill {

    height: 100%;

    border-radius: 3px;

    transition: width 0.5s ease;

}



.category-stats {

    text-align: right;

}



.category-count {

    display: block;

    font-weight: 600;

    color: var(--text-primary);

    font-size: 16px;

}



.category-pct {

    font-size: 12px;

    color: var(--text-secondary);

}



/* Heatmap */

.heatmap-container {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.heatmap-grid {

    display: flex;

    flex-direction: column;

    gap: 2px;

    flex: 1;

}



.heatmap-row {

    display: flex;

    gap: 2px;

}



.heatmap-y-labels {

    display: flex;

    flex-direction: column;

    gap: 2px;

    margin-right: 8px;

}



.heatmap-day {

    height: 20px;

    display: flex;

    align-items: center;

    font-size: 11px;

    color: var(--text-secondary);

}



.heatmap-cell {

    flex: 1;

    height: 20px;

    border-radius: 3px;

    background: rgba(59, 130, 246, 0.1);

    cursor: pointer;

    transition: transform 0.1s;

}



.heatmap-cell:hover {

    transform: scale(1.2);

    z-index: 1;

}



.heatmap-x-labels {

    display: flex;

    justify-content: space-between;

    padding: 8px 0 0 48px;

}



.heatmap-x-labels span {

    font-size: 11px;

    color: var(--text-secondary);

}



.heatmap-legend {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 8px;

    font-size: 11px;

    color: var(--text-secondary);

}



.legend-scale {

    display: flex;

    gap: 2px;

}



.legend-scale div {

    width: 16px;

    height: 16px;

    border-radius: 3px;

}



/* Behavior Grid */

.behavior-grid {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 24px;

    margin-top: 24px;

}



/* Zero Results */

.zero-results-list {

    display: flex;

    flex-direction: column;

    gap: 8px;

    max-height: 300px;

    overflow-y: auto;

}



.zero-result-item {

    display: flex;

    justify-content: space-between;

    padding: 10px 12px;

    background: var(--bg-tertiary);

    border-radius: 6px;

}



.zr-query {

    color: var(--text-primary);

    font-size: 13px;

}



.zr-count {

    color: var(--text-secondary);

    font-size: 12px;

}



/* Privacy Notice */

.privacy-notice {

    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));

    border: 1px solid var(--nw-success);

    border-radius: 10px;

    padding: 14px 20px;

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 24px;

}



.privacy-notice i {

    color: var(--nw-success);

    font-size: 18px;

}



.privacy-notice span {

    color: var(--text-secondary);

    font-size: 14px;

}



/* Aether Personal Stats */

.aether-personal-stats {

    margin-bottom: 24px;

}



.aether-big-stat {

    background: linear-gradient(135deg, #10b981, #059669);

    border-radius: 16px;

    padding: 40px;

    text-align: center;

    margin-bottom: 24px;

}



.aether-icon {

    font-size: 48px;

    color: rgba(255, 255, 255, 0.9);

    margin-bottom: 16px;

}



.aether-value {

    font-size: 56px;

    font-weight: 700;

    color: white;

    line-height: 1;

}



.aether-label {

    font-size: 16px;

    color: rgba(255, 255, 255, 0.8);

    margin-top: 8px;

}



.aether-stat-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 16px;

}



.aether-stat-card {

    background: var(--bg-secondary);

    border-radius: 12px;

    padding: 24px;

    text-align: center;

}



.aether-stat-card i {

    font-size: 24px;

    color: var(--nw-accent);

    margin-bottom: 12px;

}



.stat-num {

    display: block;

    font-size: 28px;

    font-weight: 700;

    color: var(--text-primary);

}



.stat-text {

    font-size: 13px;

    color: var(--text-secondary);

}



/* Earn Tips */

.earn-tips {

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.earn-tip {

    display: flex;

    align-items: center;

    gap: 16px;

    padding: 16px;

    background: var(--bg-tertiary);

    border-radius: 10px;

}



.tip-icon {

    width: 48px;

    height: 48px;

    border-radius: 12px;

    background: rgba(59, 130, 246, 0.1);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    color: var(--nw-accent);

}



.tip-content {

    flex: 1;

}



.tip-content strong {

    display: block;

    color: var(--text-primary);

    margin-bottom: 4px;

}



.tip-content p {

    margin: 0;

    font-size: 13px;

    color: var(--text-secondary);

}



.tip-reward {

    font-size: 18px;

    font-weight: 700;

    color: #10b981;

}



/* Login Required Panel */

.login-required-panel {

    text-align: center;

    padding: 60px 20px;

    background: var(--bg-secondary);

    border-radius: 16px;

}



.lock-icon {

    width: 80px;

    height: 80px;

    margin: 0 auto 24px;

    border-radius: 50%;

    background: var(--bg-tertiary);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 32px;

    color: var(--text-secondary);

}



.login-required-panel h3 {

    font-size: 24px;

    color: var(--text-primary);

    margin: 0 0 12px;

}



.login-required-panel p {

    color: var(--text-secondary);

    margin: 0 0 24px;

}



.login-required-panel .btn {

    margin: 0 8px;

}



.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 24px;

    border-radius: 8px;

    font-weight: 500;

    font-size: 14px;

    text-decoration: none;

    transition: all 0.2s;

}



.btn-primary {

    background: var(--nw-accent);

    color: white;

}



.btn-primary:hover {

    background: #2563eb;

}



.btn-outline {

    background: transparent;

    color: var(--text-primary);

    border: 1px solid var(--border-color);

}



.btn-outline:hover {

    background: var(--bg-tertiary);

}



/* Empty State */

.empty-state {

    text-align: center;

    padding: 40px 20px;

    color: var(--text-secondary);

}



.empty-state i {

    font-size: 48px;

    margin-bottom: 16px;

    opacity: 0.5;

}



.empty-state.success i {

    color: var(--nw-success);

    opacity: 1;

}



/* Responsive */

@media (max-width: 1024px) {

    .stats-grid-4 {

        grid-template-columns: repeat(2, 1fr);

    }

    

    .overview-grid,

    .categories-layout,

    .behavior-grid {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 768px) {

    .trends-header {

        flex-direction: column;

    }

    

    .stats-grid-4 {

        grid-template-columns: 1fr;

    }

    

    .trends-tabs {

        gap: 4px;

    }

    

    .trends-tab {

        padding: 8px 12px;

        font-size: 13px;

    }

    

    .trends-tab i {

        display: none;

    }

    

    .aether-stat-grid {

        grid-template-columns: 1fr;

    }

    

    .discoveries-grid {

        grid-template-columns: 1fr;

    }

}