/* ============================================================================
   Ranking page redesign — visual skin from RankingPage.html mockup.
   Override stylesheet: loaded AFTER page-layout.css + ranking-redesign.css so it
   restyles the real ranking page's classes (filter sidebar, table, cards,
   toolbar, compare) to the mockup's paper + orange palette.
   Engineering page only for now (add to other ranking pages later).
   Exact tokens/values taken from the mockup's :root and component CSS.
   ============================================================================ */

:root {
    --rk-ink: #1B1C20;
    --rk-orange: #f58220;
    --rk-orange-hover: #e07018;
    --rk-orange-pale: #fdf2e9;
    --rk-paper: #FAFAFA;
    --rk-surface: #FFFFFF;
    --rk-border: #E2E4E8;
    --rk-border-strong: #C4C8D0;
    --rk-text-primary: #1F2127;
    --rk-text-secondary: #525866;
    --rk-text-muted: #8B92A1;
    --rk-radius-sm: 4px;
    --rk-radius: 8px;
    --rk-radius-lg: 12px;
    --rk-shadow-sm: 0 2px 4px rgba(27, 28, 32, 0.04);
    --rk-shadow-md: 0 8px 16px rgba(27, 28, 32, 0.08);
    --rk-font-body: 'Archivo', system-ui, sans-serif;
    --rk-font-display: 'Newsreader', Georgia, serif;
}

/* ── Intro banner (real page uses .page-header) ───────────────────────── */
.page-header {
    background: linear-gradient(258deg, #1e3a8a 0%, #1e3a8a 25%, #1e3a8a 50%, #492e17 100%);
    padding: 36px 40px;
    border-radius: var(--rk-radius);
    text-align: center;
    margin-bottom: 24px;
}
.page-header .page-title {
    font-family: var(--rk-font-display);
    font-size: 2.6rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}
.page-header .page-subtitle {
    color: #e0dddd;
    font-size: 1.1rem;
    font-weight: 400;
}
/* Methodology link — orange underline (overrides the inline blue). */
.page-header .methodology-link {
    color: var(--rk-orange) !important;
    font-weight: 700;
    text-decoration: underline;
    margin-top: 10px;
    display: inline-block;
}
.page-header .methodology-link:hover { color: #fff !important; }

/* Engineering redesign hides the City filter (mockup shows Year/Search/Stream/
   State/Fee only). Scoped here so other ranking pages keep City. */
.filter-group:has(#cityFilter) { display: none; }

/* ── Filter sidebar ───────────────────────────────────────────────────── */
.filter-sidebar,
.filter-card {
    background: var(--rk-surface);
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    box-shadow: var(--rk-shadow-sm);
}
/* The wrapper is a flex row (align-items:stretch by default) so the sidebar
   stretched down to the footer. align-self:start makes it hug its content;
   sticky keeps it in view while the results scroll (mockup behaviour). */
.filter-sidebar {
    align-self: start;
    position: sticky;
    top: 90px;
}
.filter-title {
    font-family: var(--rk-font-body);
    font-size: 16px;
    font-weight: 700;
    color: var(--rk-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* Mockup: icon + text sit together (gap:8px), NOT spread apart. */
    justify-content: flex-start;
    gap: 8px;
}
.filter-title i { color: var(--rk-orange); }
/* Push only the close button to the far right. */
.filter-title .filter-close-btn { margin-left: auto; }

/* Slightly higher specificity so this reliably beats page-layout.css's
   .filter-label { font-size: 0.875rem } regardless of load order. Mockup = 11px. */
.filter-sidebar .filter-label,
.filter-card .filter-label,
.filter-group label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rk-text-secondary);
}
/* Text input */
.filter-group input[type="text"],
.filter-input {
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius-sm);
    font-family: var(--rk-font-body);
    font-size: 14px;
    background: var(--rk-surface);
    color: var(--rk-text-primary);
    padding: 12px 14px;
}

/* Custom select — strip the native OS chevron, add a stroke-based chevron so it
   reads clearly as a dropdown (an open V needs stroke, not fill). */
.filter-group select,
.filter-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius-sm);
    font-family: var(--rk-font-body);
    font-size: 14px;
    color: var(--rk-text-primary);
    padding: 12px 36px 12px 14px;
    cursor: pointer;
    background-color: var(--rk-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23525866' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
.filter-input:focus,
.filter-select:focus {
    outline: none;
    border-color: var(--rk-orange);
    box-shadow: 0 0 0 3px var(--rk-orange-pale);
}

/* Fee range slider (real page uses native .filter-range) — styled to the
   mockup's look: thick orange track + round handle. (The mockup's dual-handle
   custom slider isn't replicated; this is the single native input skinned.) */
.fee-slider { padding: 4px 0 8px; }
.fee-slider-track {
    position: relative; width: 100%; height: 4px;
    background: #e2e4e8; border-radius: 4px; margin: 14px 0 6px; cursor: pointer;
}
.fee-slider-fill {
    position: absolute; height: 100%; background: var(--rk-orange);
    border-radius: 4px; pointer-events: none;
}
.fee-handle {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 18px; height: 18px; background: var(--rk-surface);
    border: 2.5px solid var(--rk-orange); border-radius: 50%; cursor: grab;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.15s, transform 0.15s; z-index: 2; touch-action: none;
}
.fee-handle:hover { box-shadow: 0 4px 12px rgba(245, 130, 32, 0.3); }
.fee-handle:active { cursor: grabbing; transform: translate(-50%, -50%) scale(1.15); }
.fee-handle-left { cursor: default; }
.fee-slider[data-disabled="1"] .fee-handle { border-color: var(--rk-border-strong); cursor: default; }

.fee-slider-ends {
    display: flex; justify-content: space-between;
    font-size: 13px; font-weight: 600; color: var(--rk-text-muted);
    margin-top: 6px; padding: 0 2px;
}
.fee-slider-values {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 15px; font-weight: 700; color: var(--rk-text-primary);
    margin-top: 10px; padding: 8px 14px;
    background: var(--rk-orange-pale); border: 1px solid rgba(245, 130, 32, 0.2);
    border-radius: var(--rk-radius-sm);
}
.fee-slider-range-text {
    font-size: 12px; color: var(--rk-text-muted);
    margin-top: 6px; text-align: center; font-weight: 500;
}

/* Reset button */
.btn-secondary {
    background: var(--rk-surface);
    border: 1px solid var(--rk-border-strong);
    border-radius: var(--rk-radius-sm);
    font-weight: 600;
    color: var(--rk-text-primary);
    font-size: 13px;
}
.btn-secondary:hover {
    background: var(--rk-paper);
    color: var(--rk-orange);
    border-color: var(--rk-orange);
}

/* ── Toolbar (count + sort + view toggle) — bordered white card (mockup) ── */
.ranking-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px 24px;
    background: var(--rk-surface);
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
}
.toolbar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
/* White text on the orange pill (override the old inline grey). */
.ranking-count {
    font-size: 14px;
    font-weight: 600;
    color: #fff !important;
    background: var(--rk-orange);
    padding: 6px 16px;
    border-radius: 20px;
}
.ranking-sort { font-size: 14px; font-weight: 600; color: var(--rk-text-secondary); }
.ranking-sort select {
    padding: 8px 32px 8px 12px;
    font-weight: 500;
}

/* View toggle — one bordered pill; icons + short labels; orange-pale active.
   Override page-layout.css's grey pill (gap/padding/bg) so Table+Card are flush
   inside one border, and drop its bottom margin. */
.view-toggle {
    display: flex;
    gap: 0;
    padding: 0;
    margin-bottom: 0;
    background: transparent;
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius-sm);
    overflow: hidden;
}
.view-toggle button,
.view-toggle .toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--rk-surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--rk-text-secondary);
    border: none;
}
.view-toggle button + button,
.view-toggle .toggle-btn + .toggle-btn { border-left: 1px solid var(--rk-border); }
.view-toggle button.active,
.view-toggle .toggle-btn.active {
    background: var(--rk-orange-pale);
    color: var(--rk-orange);
}
.view-toggle button:hover:not(.active),
.view-toggle .toggle-btn:hover:not(.active) { background: var(--rk-paper); }

/* ── Rankings table ───────────────────────────────────────────────────── */
.view-table-wrapper,
.ranking-table-wrap {
    background: var(--rk-surface);
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    box-shadow: var(--rk-shadow-sm);
    overflow-x: auto;
}
.rankings-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rankings-table th {
    background: #F8F9FA;
    text-align: left;
    padding: 16px 20px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rk-text-secondary);
    border-bottom: 1px solid var(--rk-border);
}
.rankings-table td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--rk-border);
    color: var(--rk-text-primary);
    vertical-align: middle;
}
.rankings-table tr:hover td { background: #FAFAFA; }

/* Rank badge — dark square (mockup). */
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    background: var(--rk-ink);
    color: #fff;
    font-weight: 700;
    border-radius: 4px;
    font-size: 14px;
    padding: 0 8px;
}

/* College name + city */
.college-link, .name-cell a {
    font-weight: 700;
    font-size: 15px;
    color: var(--rk-ink);
}
.college-link:hover, .name-cell a:hover { color: var(--rk-orange); }
.college-city { font-size: 13px; color: var(--rk-text-muted); margin-top: 2px; }

/* Logo cell — circular monogram (mockup). Initials fallback = orange-pale circle;
   real logos sit inside a circular white frame. */
.college-logo,
.college-logo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid var(--rk-border);
    background: var(--rk-orange-pale);
    color: var(--rk-orange);
    font-weight: 700;
    font-size: 14px;
    overflow: hidden;
}
/* Real <img> logos: white bg, contained, circular. */
img.college-logo {
    background: #fff;
    object-fit: contain;
}

/* Compare checkbox */
.compare-checkbox { width: 18px; height: 18px; accent-color: var(--rk-orange); cursor: pointer; }

/* Post-review pill */
.btn-post-review {
    display: inline-block;
    padding: 6px 16px;
    background: transparent;
    border: 1px solid var(--rk-border-strong);
    border-radius: 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--rk-text-primary);
}
.btn-post-review:hover { border-color: var(--rk-orange); color: var(--rk-orange); }

/* ── Card view ────────────────────────────────────────────────────────── */
.ranking-card,
.cards-container .card {
    background: var(--rk-surface);
    border: 1px solid var(--rk-border);
    border-radius: var(--rk-radius);
    transition: box-shadow 0.25s, border-color 0.25s;
}
.ranking-card:hover,
.cards-container .card:hover {
    box-shadow: var(--rk-shadow-md);
    border-color: var(--rk-orange);
}

/* ── Compare bar / modal — dark bar, orange action (mockup) ───────────── */
.compare-tray, .bottom-compare-bar, .compare-bar {
    background: var(--rk-ink);
    color: #fff;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}
.compare-tag {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #fff;
}
.btn-compare-action, .compare-tray .btn-primary {
    background: var(--rk-surface);
    color: var(--rk-ink);
    border-radius: 4px;
    font-weight: 700;
}
.btn-compare-action:not(:disabled):hover,
.compare-tray .btn-primary:not(:disabled):hover {
    background: var(--rk-orange);
    color: #fff;
}

/* Compare modal table headers */
.compare-table th, .compare-modal th {
    background: var(--rk-paper);
    font-weight: 700;
    color: var(--rk-ink);
}

/* ── Overrides on shared base styles (engineering ranking only) ─────────── */

/* The table/cards sit in a .content-section; page-layout gives it 25px padding
   which double-boxes the table card. Remove it here. */
.content-section { padding: 0; }

/* Square the toggle buttons inside the flush pill (page-layout rounds them). */
.view-toggle .toggle-btn { border-radius: 0; margin-right: 0; }

/* Filter selects/inputs → 12px (per request). */
.filter-group select,
.filter-select,
.filter-group input[type="text"],
.filter-input { font-size: 12px; }

/* College name: no underline on hover (colour change only). */
.college-link:hover,
.name-cell a:hover { text-decoration: none; }

/* Pagination — remove the top divider line + extra top space, hide the
   "Showing ranks N–N" info text, and centre the pager horizontally. */
.pagination-container {
    justify-content: center;
    border-top: none;
    margin-top: 8px;
    padding: 8px 0 16px;
}
.pagination-container .pagination-info { display: none; }
/* Active page: use the brand orange instead of the blue gradient. */
.pagination-btn.active {
    background: var(--rk-orange);
    border-color: var(--rk-orange);
}
.pagination-btn:hover:not(.disabled) {
    border-color: var(--rk-orange);
    color: var(--rk-orange);
}