/* =============================================================================
   AROI Leaderboards CSS (page-specific — only loaded on AROI leaderboard pages)
   ============================================================================= */

/* Section Spacing */
.aroi-section {
    margin-bottom: 40px;
    scroll-margin-top: 20px;
}

.aroi-champion-badge { margin-bottom: 20px; }

/* Top 3 Summary Tables */
.aroi-top3-table thead th:nth-child(1) { width: 30%; }
.aroi-top3-table thead th:nth-child(2) { width: 25%; }
.aroi-top3-table thead th:nth-child(3) { width: 45%; }

/* Complete Rankings Tables - Common patterns */
.aroi-rankings-table thead th:nth-child(1) { width: 5%; }
.aroi-rankings-table thead th:nth-child(2) { width: 25%; }

/* Standard bandwidth/consensus table layout */
.aroi-standard-table thead th:nth-child(3) { width: 12%; }
.aroi-standard-table thead th:nth-child(4) { width: 11%; }
.aroi-standard-table thead th:nth-child(5) { width: 12%; }
.aroi-standard-table thead th:nth-child(6) { width: 15%; }
.aroi-standard-table thead th:nth-child(7) { width: 10%; }
.aroi-standard-table thead th:nth-child(8) { width: 10%; }

/* Specialized table for Exit/Guard operators */
.aroi-specialized-table thead th:nth-child(3) { width: 10%; }
.aroi-specialized-table thead th:nth-child(4) { width: 8%; }
.aroi-specialized-table thead th:nth-child(5) { width: 15%; }
.aroi-specialized-table thead th:nth-child(6) { width: 12%; }
.aroi-specialized-table thead th:nth-child(7) { width: 10%; }
.aroi-specialized-table thead th:nth-child(8) { width: 15%; }

/* Diversity/Category table layout */
.aroi-category-table thead th:nth-child(3) { width: 8%; }
.aroi-category-table thead th:nth-child(4) { width: 15%; }
.aroi-category-table thead th:nth-child(5) { width: 12%; }
.aroi-category-table thead th:nth-child(6) { width: 10%; }
.aroi-category-table thead th:nth-child(7) { width: 10%; }
.aroi-category-table thead th:nth-child(8) { width: 15%; }

/* Geographic Champions (Non-EU Leaders) */
.aroi-geographic-table thead th:nth-child(3) { width: 15%; }
.aroi-geographic-table thead th:nth-child(4) { width: 10%; }
.aroi-geographic-table thead th:nth-child(5) { width: 8%; }
.aroi-geographic-table thead th:nth-child(6) { width: 25%; }

/* Frontier Builders (Rare Countries) */
.aroi-frontier-table thead th:nth-child(3) { width: 10%; }
.aroi-frontier-table thead th:nth-child(4) { width: 12%; }
.aroi-frontier-table thead th:nth-child(5) { width: 10%; }
.aroi-frontier-table thead th:nth-child(6) { width: 23%; }

/* Platform Diversity (Non-Linux Heroes) */
.aroi-platform-table thead th:nth-child(3) { width: 10%; }
.aroi-platform-table thead th:nth-child(4) { width: 8%; }
.aroi-platform-table thead th:nth-child(5) { width: 22%; }

/* AROI Champion Badge Styles - Harmonized Color Tier System */

/* Authority/Network Control (Gold/Orange spectrum) */
.aroi-champion-platinum {
    background: linear-gradient(45deg, #FFD700, #FFA500);
    color: #000;
    box-shadow: 0 2px 6px rgba(255, 215, 0, 0.25);
}

/* DRY: merged .aroi-champion-network + .aroi-champion-bandwidth-legend (identical styles) */
.aroi-champion-network,
.aroi-champion-bandwidth-legend {
    background: linear-gradient(45deg, #FFB300, #FF8C00);
    color: #000;
    box-shadow: 0 2px 6px rgba(255, 179, 0, 0.25);
}

.aroi-champion-exit-authority {
    background: linear-gradient(45deg, #FFAA00, #FF9500);
    color: #000;
    box-shadow: 0 2px 6px rgba(255, 170, 0, 0.25);
}

.aroi-champion-guard-authority {
    background: linear-gradient(45deg, #FF6B35, #F7931E);
    color: #fff;
    box-shadow: 0 2px 6px rgba(255, 107, 53, 0.25);
}

.aroi-champion-guard {
    background: linear-gradient(45deg, #E67E22, #D35400);
    color: #fff;
    box-shadow: 0 2px 6px rgba(230, 126, 34, 0.25);
}

.aroi-champion-exit {
    background: linear-gradient(45deg, #FF8C42, #FF7315);
    color: #fff;
    box-shadow: 0 2px 6px rgba(255, 140, 66, 0.25);
}

/* Innovation & Technology (Purple/Blue spectrum) */
.aroi-champion-platform {
    background: linear-gradient(45deg, #a29bfe, #6c5ce7);
    color: #fff;
    box-shadow: 0 2px 6px rgba(162, 155, 254, 0.25);
}

.aroi-champion-ipv4 {
    background: linear-gradient(45deg, #0984e3, #74b9ff);
    color: #fff;
    box-shadow: 0 2px 6px rgba(9, 132, 227, 0.25);
}

.aroi-champion-ipv6 {
    background: linear-gradient(45deg, #6c5ce7, #a29bfe);
    color: #fff;
    box-shadow: 0 2px 6px rgba(108, 92, 231, 0.25);
}

/* DRY: merged .aroi-champion-diversity + .aroi-champion-bandwidth (identical styles) */
.aroi-champion-diversity,
.aroi-champion-bandwidth {
    background: linear-gradient(45deg, #00b894, #55a3ff);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 184, 148, 0.25);
}

.aroi-champion-global {
    background: linear-gradient(45deg, #00cec9, #55efc4);
    color: #000;
    box-shadow: 0 2px 6px rgba(0, 206, 201, 0.25);
}

.aroi-champion-frontier {
    background: linear-gradient(45deg, #27ae60, #2ecc71);
    color: #fff;
    box-shadow: 0 2px 6px rgba(39, 174, 96, 0.25);
}

/* Reliability & Legacy (Earth tones) */
.aroi-champion-reliability {
    background: linear-gradient(45deg, #8b7355, #a0845c);
    color: #fff;
    box-shadow: 0 2px 6px rgba(139, 115, 85, 0.25);
}

.aroi-champion-veteran {
    background: linear-gradient(45deg, #cd7f32, #b8860b);
    color: #fff;
    box-shadow: 0 2px 6px rgba(205, 127, 50, 0.25);
}

.aroi-champion-legacy {
    background: linear-gradient(45deg, #8b4513, #a0522d);
    color: #fff;
    box-shadow: 0 2px 6px rgba(139, 69, 19, 0.25);
}

/* Total Data Champions (Blue/Teal spectrum) */
.aroi-champion-total-data {
    background: linear-gradient(45deg, #0984e3, #00b894);
    color: #fff;
    box-shadow: 0 2px 6px rgba(9, 132, 227, 0.25);
}

/* AROI Validation Champions (Green verification spectrum) */
.aroi-champion-validation {
    background: linear-gradient(45deg, #00b894, #28a745);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 184, 148, 0.25);
}

/* Enhanced hover effects for all badges */
.aroi-champion-badge .panel-body {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.aroi-champion-badge .panel-body:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* AROI Ranking Badge Styles */
.aroi-rank-gold { background-color: #FFD700; }
.aroi-rank-silver { background-color: #C0C0C0; }
.aroi-rank-bronze { background-color: #CD7F32; }

/* AROI Link Styles */
.aroi-underline-link { text-decoration: underline; color: inherit; }
.aroi-contact-link { text-decoration: underline; }

/* AROI Layout Styles */
.aroi-flex-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.aroi-nav-spacing { margin-bottom: 20px; }
.aroi-nav-spacing h4 { margin-top: 5px; }

.aroi-primary-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
    justify-content: center;
}

.aroi-category-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 15px;
    border-top: 1px solid var(--color-border-light);
    justify-content: center;
}

/* Compact Navigation Styles */
.aroi-compact-nav { margin-bottom: 15px; padding: 10px 15px; }

.aroi-compact-nav-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    font-size: 14px;
}

.aroi-nav-label { font-weight: bold; color: var(--color-nav-active-text); white-space: nowrap; }

.aroi-primary-nav-centered {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.aroi-category-links-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.aroi-nav-link {
    color: var(--color-link);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 13px;
    white-space: nowrap;
}

.aroi-nav-link:hover {
    color: var(--color-link-hover);
    background-color: var(--color-bg-light);
    text-decoration: none;
}

/* Responsive adjustments for compact nav */
@media (max-width: 768px) {
    .aroi-primary-nav-centered { flex-direction: column; align-items: center; gap: 8px; }
    .aroi-category-links-row { justify-content: center; }
    .aroi-nav-link { font-size: 12px; }
}

.aroi-nav-separator { border-top: 1px solid var(--color-border-light); margin: 15px 0; }
.aroi-top-margin { margin-top: 10px; }
.aroi-compact-summary { margin-bottom: 8px; padding: 8px 12px; }
.aroi-compact-summary h5 { margin-top: 0; margin-bottom: 4px; font-size: 15px; line-height: 1.2; }
.aroi-compact-summary .row { margin-bottom: 2px; }
.aroi-compact-summary .col-md-3 { padding-top: 2px; padding-bottom: 2px; }
.aroi-compact-footer { margin-top: 4px; padding-top: 3px; border-top: 1px solid rgba(255,255,255,0.3); }
.aroi-compact-footer small { font-size: 11px; line-height: 1.3; }
.aroi-header-spacing { margin-top: 0; }
.aroi-fixed-nav { position: fixed; bottom: 20px; right: 20px; z-index: 1000; }
.aroi-footer-section { margin-top: 50px; border-top: 2px solid var(--color-border-light); padding-top: 30px; }

/* AROI Pagination — pure CSS, no JavaScript, backward-compatible.
   Works on all browsers with flexbox + :target support (Firefox 20+, all Tor Browser versions).

   Strategy: DOM order puts the default page (1-10) LAST among siblings so the CSS ~ general
   sibling combinator can hide it when any preceding sibling is :target. Flexbox `order` 
   restores the correct visual sequence (1-10 first, 11-20 second, 21-25 third). */

/* Flex container for visual reordering */
.pagination-container {
    display: flex;
    flex-direction: column;
}

/* All pagination sections hidden by default */
.pagination-section { display: none; scroll-margin-top: 80px; }
.pagination-section h4 { margin-top: 20px; margin-bottom: 15px; }

/* Default: show first page (1-10) — last in DOM, first visually via order */
[id$="-1-10"].pagination-section { display: block; order: 1; }
[id$="-11-20"].pagination-section { order: 2; }
[id$="-21-25"].pagination-section { order: 3; }

/* Show any targeted pagination section */
.pagination-section:target { display: block; }

/* Hide ALL non-targeted sections when any section is :target.
   Works because default page (1-10) is LAST in DOM order — the ~ combinator
   reaches it from any :target preceding sibling. Non-default pages that precede
   the :target in DOM are already display:none and unaffected. */
.pagination-section:target ~ .pagination-section:not(:target) { display: none !important; }

/* Compact table styling */
.aroi-rankings-table.aroi-standard-table td,
.aroi-rankings-table.aroi-standard-table th {
    padding: 6px 8px;
    vertical-align: middle;
}
.aroi-rankings-table.aroi-standard-table { margin-bottom: 10px; }

/* Pagination nav below tables */
.pagination-nav-bottom {
    margin: 0 0 30px 0;
    text-align: center;
    border: 1px solid var(--color-border-light);
    border-radius: 5px;
    padding: 4px;
    background-color: var(--color-bg-light);
}
.pagination-nav-bottom a {
    display: inline-block;
    padding: 4px 8px;
    margin: 0 2px;
    border: 1px solid var(--color-link);
    border-radius: 3px;
    color: var(--color-link);
    text-decoration: none;
    background-color: white;
    font-size: 14px;
    line-height: 1.2;
}
.pagination-nav-bottom a:hover,
.pagination-nav-bottom a.active {
    background-color: var(--color-link);
    color: white;
}

/* AROI Panel Background Colors for Champion Badges */
.panel-danger .panel-body { background-color: #f2dede; border-color: #ebccd1; }
.panel-warning .panel-body { background-color: #fcf8e3; border-color: #faebcc; }
.panel-info .panel-body { background-color: #d9edf7; border-color: #bce8f1; }
.panel-success .panel-body { background-color: #dff0d8; border-color: #d6e9c6; }
.panel-primary { border-color: #bce8f1; }
.panel-primary .panel-body { background-color: #d9edf7; }