/* ============================================================================
   MODERN DASHBOARD STYLES - Soft, Premium UI
   ============================================================================
   
   This file modernizes the dashboard with:
   - Soft borders (subtle strokes with low opacity)
   - Smooth rounded corners (8-12px range)
   - Layered surfaces with elevation
   - Reduced visual noise
   - Smooth transitions and hover states
   ============================================================================ */

/* ========== Filter Panel - Modern Soft Styling ========== */
.filter-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  transition: var(--transition-base);
}

.filter-panel:hover {
  box-shadow: var(--shadow-xl);
}

.filter-header {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-lg);
}

.filter-section {
  margin-bottom: var(--space-lg);
}

/* Filter inputs and selects */
.filter-select,
.filter-input,
.sentiment-input {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--secondary-bg);
  transition: var(--transition-fast);
}

.filter-select:hover,
.filter-input:hover,
.sentiment-input:hover {
  border-color: var(--border-strong);
}

.filter-select:focus,
.filter-input:focus,
.sentiment-input:focus {
  border-color: var(--border-accent);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.08);
  outline: none;
}

/* Checkboxes - softer styling */
.checkmark {
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.checkmark:hover {
  border-color: var(--border-accent);
  background: rgba(102, 126, 234, 0.04);
}

.checkbox-label:hover {
  background: rgba(102, 126, 234, 0.04);
  border-radius: var(--radius-md);
}

/* Time buttons - pill style */
.time-btn {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: transparent;
  transition: var(--transition-fast);
}

.time-btn:hover {
  border-color: var(--border-accent);
  background: rgba(102, 126, 234, 0.06);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.time-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

/* Clear filters button */
.clear-filters-btn {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

.clear-filters-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ========== Trending Panel - Modern Soft Styling ========== */
.trending-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  transition: var(--transition-base);
}

.trending-panel:hover {
  box-shadow: var(--shadow-xl);
}

.trending-header {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* Trending items - soft cards */
.trending-item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--secondary-bg);
  transition: var(--transition-fast);
}

.trending-item:hover {
  border-color: var(--border-default);
  background: var(--card-bg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* Period selector - pill group */
.trending-period-selector {
  background: var(--secondary-bg);
  border-radius: var(--radius-lg);
  padding: 3px;
  border: 1px solid var(--border-subtle);
}

.period-btn {
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  border: none;
}

.period-btn:hover {
  background: rgba(102, 126, 234, 0.08);
}

.period-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: var(--shadow-sm);
}

/* ========== News Cards - Modern Soft Styling ========== */
.news-card {
  background: var(--card-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
}

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

.news-card-header {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-sm);
}

/* Token info - soft badges */
.news-card .token {
  background: var(--secondary-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
}

.news-card .token-symbol,
.news-card .company-name,
.news-card .sector-industry-tag,
.news-card .category-label,
.news-card .market-cap-label,
.news-card .market-type-label {
  border-radius: var(--radius-md);
  border: none !important;
  box-shadow: var(--shadow-xs);
  transition: var(--transition-fast);
}

.news-card .token-symbol:hover,
.news-card .company-name:hover,
.news-card .sector-industry-tag:hover,
.news-card .category-label:hover,
.news-card .market-cap-label:hover,
.news-card .market-type-label:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* HLC values - soft indicators */
.hlc-item {
  background: var(--secondary-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: var(--transition-fast);
}

.hlc-item:hover {
  border-color: var(--border-default);
  background: var(--card-bg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs);
}

/* Report container - layered surface */
.report-container {
  background: var(--secondary-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  /* padding: var(--space-lg); */
}

.report-card {
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: var(--transition-fast);
}

.report-card:hover {
  border-color: var(--border-default);
  box-shadow: var(--shadow-sm);
}

/* Action buttons - soft interactive */
.action-buttons {
  background: var(--secondary-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
}

.action-buttons button {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  transition: var(--transition-fast);
}

.action-buttons button:hover {
  border-color: var(--border-accent);
  background: rgba(102, 126, 234, 0.06);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.action-buttons button.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

/* Summary container - soft surface */
.summary-container {
  background: var(--secondary-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

/* ========== Mobile Buttons - Modern Soft Styling ========== */
/* .mobile-buttons-container {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
} */

html.light .mobile-buttons-container {
  background: rgba(255, 255, 255, 0.95);
  /* border-bottom: 1px solid var(--border-default); */
}

.mobile-filter-btn,
.mobile-trending-btn,
.mobile-create-alert-btn {
  flex-shrink: 0;
  background: var(--card-bg);
  color: var(--text-color);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  border-radius: 6px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  transition: var(--transition-fast);
  padding: 6px 12px;
  height: 30px;
  gap: 5px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.mobile-filter-btn:hover,
.mobile-trending-btn:hover,
.mobile-create-alert-btn:hover {
  background: rgba(102, 126, 234, 0.04);
  border-color: var(--border-color, rgba(0, 0, 0, 0.12));
}

.mobile-filter-btn:active,
.mobile-trending-btn:active,
.mobile-create-alert-btn:active {
  background: rgba(102, 126, 234, 0.08);
  transform: scale(0.98);
}

/* ========== Mobile Modals - Modern Soft Styling ========== */
.mobile-filter-modal,
.mobile-trending-modal {
  backdrop-filter: blur(12px);
}

.mobile-filter-content,
.mobile-trending-content {
  background: var(--card-bg);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  border: 1px solid var(--border-default);
  border-bottom: none;
  box-shadow: var(--shadow-2xl);
}

.mobile-filter-header,
.mobile-trending-header {
  border-bottom: 1px solid var(--border-subtle);
}

.close-mobile-filter,
.close-mobile-trending {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: transparent;
  transition: var(--transition-fast);
}

.close-mobile-filter:hover,
.close-mobile-trending:hover {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.08);
}

.mobile-filter-footer {
  border-top: 1px solid var(--border-subtle);
}

.apply-filters-btn {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: var(--transition-fast);
}

.apply-filters-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ========== Token Filter Indicator - Modern Soft Styling ========== */
.token-filter-indicator-main {
  background: var(--card-bg);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-lg);
}

.token-filter-icon-main {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.clear-token-filter-btn-main {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
}

.clear-token-filter-btn-main:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ========== Loading States - Modern Soft Styling ========== */
.skeleton-card {
  background: var(--card-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.loading-spinner {
  border-radius: var(--radius-md);
}

/* ========== Scrollbars - Minimal & Soft ========== */
.filter-panel::-webkit-scrollbar,
.trending-panel::-webkit-scrollbar,
.mobile-filter-body::-webkit-scrollbar,
.mobile-trending-body::-webkit-scrollbar {
  width: 4px;
}

.filter-panel::-webkit-scrollbar-track,
.trending-panel::-webkit-scrollbar-track,
.mobile-filter-body::-webkit-scrollbar-track,
.mobile-trending-body::-webkit-scrollbar-track {
  background: transparent;
}

.filter-panel::-webkit-scrollbar-thumb,
.trending-panel::-webkit-scrollbar-thumb,
.mobile-filter-body::-webkit-scrollbar-thumb,
.mobile-trending-body::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--radius-full);
  transition: var(--transition-fast);
}

.filter-panel::-webkit-scrollbar-thumb:hover,
.trending-panel::-webkit-scrollbar-thumb:hover,
.mobile-filter-body::-webkit-scrollbar-thumb:hover,
.mobile-trending-body::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* Ensure gradient borders don't override */
.news-card,
.trending-item {
  border-image: none !important;
}

/* ========== Sentiment Progress Bar - Soft Styling ========== */
.sentiment-progress-bar {
  background: var(--secondary-bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.sentiment-progress-fill {
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
}

/* ========== Icon Buttons - Soft Interactive ========== */
.icon-btn {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--secondary-bg);
  transition: var(--transition-fast);
}

.icon-btn:hover {
  border-color: var(--border-accent);
  background: rgba(102, 126, 234, 0.06);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ========== Responsive Adjustments ========== */
@media (max-width: 768px) {
  /* Maintain soft styling on mobile */
  .news-card {
    border-radius: var(--radius-lg);
  }
  
  .mobile-filter-content,
  .mobile-trending-content {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
}