/* Shared list / filter styles (guilds, players, online players, some admin pages), on the dark
   helios tokens. The site background, hero and panel chrome come from helios.css, so this file
   no longer sets the body background or re-colours .profile-hero / .myth-panel-header. */

.modern-card {
    background: linear-gradient(180deg, var(--hx-body-top), var(--hx-body-bottom));
    border: 1px solid var(--hx-edge);
    clip-path: var(--hx-shape);
    overflow: hidden;
}

.modern-card > .myth-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.myth-panel-title h2 {
    margin: 0;
    display: inline-block;
}

/* --- Filter rows --- */
.filter-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 1.25rem;
}

.filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 0;
    background: var(--hx-inset);
    padding: 10px 14px;
    border: 1px solid var(--hx-edge-faint);
    clip-path: var(--hx-shape-sm);
    transition: border-color .2s ease;
}

.filter-row:hover {
    border-color: var(--hx-edge-soft);
}

.filter-label {
    font-weight: 700;
    color: var(--hx-text-dim);
    min-width: 110px;
    margin-right: 14px;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-label i {
    color: var(--hx-accent);
    width: 16px;
    text-align: center;
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex-grow: 1;
    min-width: 0;
}

/* Filter pills: the client's toggle buttons. A steel key with an indicator light that glows in
   the filter's colour when the toggle is on (faction red, class blue, prestige gold, gender violet). */
.filter-pill {
    --pill: var(--hx-teal);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 6px 14px 6px 12px;
    background: linear-gradient(180deg, var(--hx-steel-hi), var(--hx-steel-lo));
    color: var(--hx-text-dim);
    border: 1px solid var(--hx-edge-soft);
    clip-path: var(--hx-shape-sm);
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    user-select: none;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hx-ice) 10%, transparent);
}
/* the indicator light */
.filter-pill::before {
    content: '';
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--hx-inset);
    box-shadow: inset 0 0 0 1px var(--hx-edge-soft);
    transition: background .2s, box-shadow .2s;
}
.filter-pill:hover {
    border-color: var(--hx-edge);
    color: var(--hx-ice);
}
.filter-pill:active { transform: translateY(1px); }
.filter-pill[data-type="faction"] { --pill: var(--hx-hp); }
.filter-pill[data-type="profession"] { --pill: var(--hx-mp); }
.filter-pill[data-type="prestige"] { --pill: var(--hx-gold); }
.filter-pill[data-type="gender"] { --pill: var(--hx-elite); }
.filter-pill.active {
    color: var(--hx-ice);
    border-color: color-mix(in srgb, var(--pill) 75%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--pill) 34%, var(--hx-steel-hi)), color-mix(in srgb, var(--pill) 16%, var(--hx-steel-lo)));
    box-shadow: inset 0 0 14px color-mix(in srgb, var(--pill) 22%, transparent), 0 0 12px color-mix(in srgb, var(--pill) 22%, transparent);
}
.filter-pill.active::before {
    background: var(--pill);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pill) 30%, transparent), 0 0 8px var(--pill);
}
@media (max-width: 575.98px) {
    .filter-label { min-width: 0; width: 100%; margin-right: 0; }
    .filter-pill { min-height: 40px; }
}

/* --- Select2 match --- */
.select2-container--bootstrap-5 .select2-selection {
    border-radius: 0;
    font-size: .85rem;
    font-weight: 500;
    padding: 4px;
}

.guild-dropdown-container {
    max-width: 300px;
    width: 100%;
}

/* --- DataTables --- */
.table-responsive {
    background: transparent;
    border: 0;
    padding: 0;
}

table.dataTable {
    margin-top: .5rem !important;
    margin-bottom: .5rem !important;
}

.table-dark {
    background-color: transparent;
    color: var(--hx-text);
}

.table-dark th {
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .78rem;
    border-bottom: none;
    white-space: nowrap;
}

div.dataTables_wrapper div.dataTables_filter {
    text-align: right;
}

div.dataTables_wrapper div.dataTables_filter input {
    padding: 6px 14px;
    font-size: .9rem;
    max-width: 100%;
}

div.dataTables_wrapper div.dataTables_length select {
    padding: 4px 30px 4px 10px;
    font-size: .9rem;
}

@media (max-width: 767.98px) {
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_length { text-align: center; }
    div.dataTables_wrapper div.dataTables_paginate ul.pagination { justify-content: center; flex-wrap: wrap; }
}