/* ============================================================================
 * PAGE STYLES: Rankings Page (css/pages/rankings.css)
 *
 * Content:
 *  1. Heading Typography & Layout Fixes
 *  2. Rankings Table Overrides & Layout
 *  3. Pagination Component Specifics
 * ============================================================================ */

/* Table Card Header (H2 replacement for old H4 size) */
.ranking .table-header-left h2 {
  font-size: var(--fs-h4, 1.125rem) !important; /* Purana H4 size maintain rakhne ke liye */
  font-weight: 600 !important;
  margin: 0;
  line-height: 1.2;
}

/* Keep long ranking labels from changing the trigger height. */
.ranking .custom-select,
.custom-select-trigger,
.ranking-select-box {
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 16px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

.ranking .custom-select .select-display,
.custom-select-trigger .selected-text,
.ranking-select-box .selected-option {
  min-width: 0;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.ranking .custom-select .select-display {
  width: 100%;
  height: 100%;
  padding: 0 !important;
}

.ranking .custom-select .select-text,
.custom-select-trigger .selected-text,
.ranking-select-box .selected-option {
  max-width: calc(100% - 24px) !important;
}

.ranking .custom-select .toggle-icon {
  flex: 0 0 auto;
}

/* --- Rankings Table Overrides & Layout --- */
.ranking .sps-table-responsive {
  width: 100%;
  overflow-x: auto;
}

.ranking .sps-table {
  min-width: 875px;
  width: 100%;
}

/* Cell Sizing & Typography */
.ranking .sps-table th {
  padding: 1.2rem 1.5rem;
  font-size: var(--fs-body-sm) !important;
}

.ranking .sps-table td {
  padding: 0.95rem 1.5rem;
  font-size: var(--fs-body-sm) !important;
}

/* Specialized Table Elements */
.ranking .sps-table td .chart {
  width: 80px;
  aspect-ratio: 1.2;
}

.ranking .sps-table td .badge {
  min-width: 90px;
  white-space: nowrap;
}

/* Column Alignment Rules */
/* Left-aligned columns: Stock Profile, SPS Score, and Target Price */
.ranking .sps-table th:nth-child(2),
.ranking .sps-table td:nth-child(2),
.ranking .sps-table th:nth-child(3),
.ranking .sps-table td:nth-child(3),
.ranking .sps-table th:nth-child(7),
.ranking .sps-table td:nth-child(7) {
  text-align: left;
}

/* Center-aligned columns: Rank #, Global Ranking, Consensus, Factor Analysis, Actions */
.ranking .sps-table th:nth-child(1),
.ranking .sps-table td:nth-child(1),
.ranking .sps-table th:nth-child(4),
.ranking .sps-table td:nth-child(4),
.ranking .sps-table th:nth-child(5),
.ranking .sps-table td:nth-child(5),
.ranking .sps-table th:nth-child(6),
.ranking .sps-table td:nth-child(6),
.ranking .sps-table th:nth-child(8),
.ranking .sps-table td:nth-child(8) {
  text-align: center;
}

/* --- Pagination Component Specifics --- */
.pagination-wrapper {
  background: var(--theme-bg-500);
}

/* --- Compact Rankings Page Spacing --- */
.rankings-main-content {
  padding-top: 12px;
}

.rankings-main-content .controler {
  align-items: flex-end;
}

.rankings-main-content .ranking-page-toolbar {
  flex: 0 1 560px;
  min-width: 0;
}

.rankings-main-content .ranking-page-toolbar .custom-select-container {
  flex: 1 1 280px;
  width: auto !important;
  min-width: 220px;
  max-width: 380px;
  margin: 0;
  --font-size: 0.875rem;
}

.rankings-main-content .ranking-page-toolbar .filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: auto;
  flex: 0 0 auto;
  margin: 0;
}

.rankings-main-content .ranking .table-header {
  gap: 8px;
  padding: 8px 12px;
}

.rankings-main-content .ranking .table-header-left h2 {
  font-size: 1.125rem !important;
  line-height: 1.2;
}

.rankings-main-content .ranking .sps-table th,
.rankings-main-content .ranking .sps-table td {
  padding: 10px 16px;
}

@media (max-width: 768px) {
  .rankings-main-content .ranking-page-toolbar {
    flex: 1 1 auto;
    width: 100%;
  }

  .rankings-main-content .ranking-page-toolbar .custom-select-container {
    flex: 0 1 auto;
    width: 100% !important;
    max-width: none;
  }

  .rankings-main-content .ranking-page-toolbar .filter {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0;
  }
}

@container (max-width: 635px) {
  .rankings-main-content .ranking .table-header .pagination-info,
  .rankings-main-content .ranking .table-header-right .button {
    margin-top: 8px;
  }
}