/* ==========================================================================
   TOP-TARGETS.CSS - Styles for the Top Recruiting Targets page
   (view_top_targets.jsp). Div-based layout; no table, no DataTables.
   ========================================================================== */

/* --- Wrapper --- */
.rt-targets {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 8px 16px;
    background-color: var(--color-bg-surface);
}

/* --- Page title --- */
.rt-targets__title {
    font-size: 1.8em;
    text-align: center;
    margin: 0 0 12px 0;
    background-color: var(--color-bg-surface);
    color: var(--color-text);
}

/* --- List container: grid with 8 columns --- */
.rt-targets__list {
    --rt-col-photo: 56px;
    --rt-col-name: minmax(120px, 1.5fr);
    --rt-col-ht: 4rem;
    --rt-col-wt: 3.5rem;
    --rt-col-town: minmax(80px, 1fr);
    --rt-col-state: 3rem;
    --rt-col-school: minmax(100px, 1fr);
    --rt-col-schools: minmax(120px, 2fr);
    display: grid;
    grid-template-columns: var(--rt-col-photo) var(--rt-col-name) var(--rt-col-ht) var(--rt-col-wt) var(--rt-col-town) var(--rt-col-state) var(--rt-col-school) var(--rt-col-schools);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

/* 9 columns when sport is shown (param.sport eq 'Any') */
.rt-targets__list.rt-targets__list--with-sport {
    grid-template-columns: var(--rt-col-photo) var(--rt-col-name) 4.5rem var(--rt-col-ht) var(--rt-col-wt) var(--rt-col-town) var(--rt-col-state) var(--rt-col-school) var(--rt-col-schools);
}

/* --- Header row (subgrid so cells align with row columns) --- */
.rt-targets__header {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    background-color: var(--color-bg-th);
}

.rt-targets__header-cell {
    background-color: var(--color-bg-th);
    color: var(--color-th-text);
    font-weight: bold;
    font-size: 13px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--color-border);
}

.rt-targets__header .rt-targets__header-cell:first-child {
    border-top-left-radius: 8px;
}

.rt-targets__header .rt-targets__header-cell:last-child {
    border-top-right-radius: 8px;
}

/* --- Section (position group) --- */
.rt-targets__section-title {
    grid-column: 1 / -1;
    background-color: var(--color-bg-th);
    color: var(--color-th-text);
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    margin: 0;
}

/* Dark mode: make position sections stand out from data rows */
html.dark-mode .rt-targets__section-title {
    background-color: var(--dm-overlay-12, rgba(255, 255, 255, 0.12));
    color: var(--dm-text-primary);
    border-bottom: 1px solid var(--dm-overlay-15, rgba(255, 255, 255, 0.15));
    border-left: 4px solid var(--dm-border-light, rgba(255, 255, 255, 0.2));
    padding-left: 12px;
    letter-spacing: 0.05em;
}

/* --- Data row (subgrid for column alignment) --- */
.rt-targets__row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
}

/* Row is clickable to profile; links inside (photo, name) still work */
.rt-targets__row[data-href] {
    cursor: pointer;
}

.rt-targets__row--odd .rt-targets__cell {
    background-color: var(--color-bg-row-odd);
}

.rt-targets__row--even .rt-targets__cell {
    background-color: var(--color-bg-row-even);
}

.rt-targets__cell {
    padding: 8px;
    border-bottom: 1px solid var(--color-border-light);
    font-size: 14px;
    color: var(--color-text);
    display: flex;
    align-items: center;
    min-width: 0;
}

.rt-targets__cell a {
    color: var(--site-secondary);
    text-decoration: none;
}

.rt-targets__cell a:hover {
    text-decoration: underline;
    color: var(--site-primary);
}

/* Dark mode: never use site primary or secondary on dark row — use theme text only (reinforced in dark-mode-vars.jspf) */
html.dark-mode .rt-targets__cell a,
html.dark-mode .rt-targets__cell .logo-area.utip a,
html.dark-mode .rt-targets__cell a.profile_tip {
    color: var(--dm-text-primary, var(--color-text)) !important;
}
html.dark-mode .rt-targets__cell a:hover,
html.dark-mode .rt-targets__cell a:focus,
html.dark-mode .rt-targets__cell .logo-area.utip a:hover,
html.dark-mode .rt-targets__cell a.profile_tip:hover {
    color: var(--dm-text-secondary, var(--color-text-secondary)) !important;
    text-decoration: underline;
}

.rt-targets__cell--photo {
    justify-content: center;
}

.rt-targets__cell--photo img {
    width: 50px;
    height: auto;
    display: block;
    border-radius: 4px;
}

.rt-targets__cell--name {
    flex-wrap: wrap;
    gap: 2px 6px;
}

.rt-targets .profile_tip {
    font-size: 1.1em;
}

.rt-targets__cell--name img[src*="star"] {
    vertical-align: middle;
}

/* --- Footer --- */
.rt-targets__footer {
    grid-column: 1 / -1;
    background-color: var(--color-bg-th);
    min-height: 8px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* ==========================================================================
   RESPONSIVE: tablet and below (≤768px) — card layout, no column headers
   Same as mobile so 641–768px doesn't show the cramped header row.
   ========================================================================== */
@media (max-width: 768px) {
    .rt-targets__list {
        display: block;
        overflow: visible;
        border-radius: 8px;
        padding: 12px;
        background-color: var(--color-bg-light);
    }

    .rt-targets__list.rt-targets__list--with-sport {
        display: block;
    }

    /* Hide header row; we use data-label on each cell instead */
    .rt-targets__header {
        display: none !important;
    }

    /* Position section: clear header bar with spacing so sections read as blocks */
    .rt-targets__section-title {
        display: block;
        border-radius: 0;
        padding: 12px 14px;
        margin-top: 16px;
        margin-bottom: 0;
        font-size: 14px;
        letter-spacing: 0.5px;
    }

    .rt-targets__section-title:first-child {
        margin-top: 0;
    }

    /* Each recruit as a card: border, shadow, rounded corners */
    .rt-targets__row {
        display: block;
        grid-column: unset;
        grid-template-columns: unset;
        background-color: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        margin-bottom: 12px;
        overflow: hidden;
    }

    .rt-targets__row:last-of-type {
        margin-bottom: 0;
    }

    .rt-targets__row--odd {
        background-color: var(--color-bg-surface);
    }

    .rt-targets__row--even {
        background-color: var(--color-bg-surface);
    }

    .rt-targets__cell {
        display: block;
        padding: 6px 12px;
        border-bottom: none;
        background: none !important;
    }

    .rt-targets__cell[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: var(--color-text-secondary);
        margin-right: 4px;
    }

    .rt-targets__cell--photo {
        padding: 10px 12px;
        border-bottom: 1px solid var(--color-border-light);
        border-radius: 10px 10px 0 0;
    }

    .rt-targets__cell--photo::before {
        content: none;
    }

    .rt-targets__cell--name {
        font-weight: 500;
        padding-bottom: 8px;
    }

    .rt-targets__cell--name::before {
        content: none;
    }

    .rt-targets__footer {
        display: block;
        min-height: 6px;
    }
}

/* ==========================================================================
   RESPONSIVE: mobile (≤640px) — tighter spacing
   ========================================================================== */
@media (max-width: 640px) {
    .rt-targets {
        padding: 0 6px 12px;
    }

    .rt-targets__title {
        font-size: 1.4em;
        margin-bottom: 10px;
    }
}