/* ============================================================
   PRMS SHARED THEME  (v4)
   Light / dark mode, flat sharp-corner design, full-width layout.
   Loaded AFTER each page's own <style> block, and every rule below
   is written at higher specificity than the legacy inline blocks
   (html[data-theme] body ...) so the old hardcoded white/#faf5ff
   declarations can never win - not even with !important.
   ============================================================ */

:root,
html[data-theme="light"] {
    --prms-bg: #f4f5f7;
    --prms-surface: #ffffff;
    --prms-surface-alt: #f4f5f7;
    --prms-text: #1f2430;
    --prms-text-muted: #63697a;
    --prms-border: #e2e4e9;
    --prms-accent: #c8102e;
    --prms-accent-dark: #9c0c23;
    --prms-header-bg: #c8102e;
    --prms-header-text: #ffffff;
    --prms-table-head-bg: #f0f1f4;
    --prms-row: #ffffff;
    --prms-row-alt: #f6f7f9;
    --prms-row-ds: #f2eefc;
    --prms-row-ds-text: #241f33;
    --prms-row-hover: #eceef2;
    --prms-shadow: 0 1px 2px rgba(20, 22, 30, 0.06);
    --prms-gold: #b8860b;
    --prms-silver: #8a8f99;
    --prms-bronze: #a35c2b;
    --prms-container-pad: 24px;
    color-scheme: light;
}

html[data-theme="dark"] {
    --prms-bg: #101218;
    --prms-surface: #191c23;
    --prms-surface-alt: #1f232c;
    --prms-text: #e7e8ec;
    --prms-text-muted: #a2a8b6;
    --prms-border: #2c303b;
    --prms-accent: #e0334f;
    --prms-accent-dark: #b81e37;
    --prms-header-bg: #16181f;
    --prms-header-text: #f2f3f5;
    --prms-table-head-bg: #232733;
    --prms-row: #191c23;
    --prms-row-alt: #1d212a;
    --prms-row-ds: #241f33;
    --prms-row-ds-text: #f0eaff;
    --prms-row-hover: #2a2f3b;
    --prms-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    --prms-gold: #d7a63a;
    --prms-silver: #a7abb5;
    --prms-bronze: #c07a44;
    --prms-container-pad: 24px;
    color-scheme: dark;
}

/* ---------- base ---------- */
html, html body {
    background: var(--prms-bg) !important;
    color: var(--prms-text) !important;
}

body {
    transition: background-color .2s ease, color .2s ease;
}

/* Kill every rounded corner across the PRMS frontend */
.prms-header, .prms-tab, .prms-recent-landings, .prms-recent-card,
.prms-avatar, .prms-double-stamp-badge, .prms-new-badge, .prms-stats-summary,
.prms-winner-row, .prms-winner-label, .prms-winner-time, .prms-winner-duration,
.prms-table-container, .prms-alert, .prms-error, .cup-card, .cup-banner,
.cup-banner-wrapper, .banner-skeleton,
.tournament-item, .table-container, .view-details, .pagination a,
.pagination span, .avatar-img, .stats-mini, .winners-mini, .recent-card,
.recent-landings, .recent-avatar, .stats-summary, .winner-first, .winner-last,
.profileimg, img, .visitor-count, .live-time, .next-tournament, .theme-toggle,
.ds-badge, .ds-badge-small, .cup-result-card, .stat-card {
    border-radius: 0 !important;
}

/* ---------- layout / surfaces ---------- */
html body .main-container,
html body .prms-tournaments-container {
    background: var(--prms-bg) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 20px var(--prms-container-pad) !important;
}

.cup-card, .tournament-item, .prms-recent-landings, .recent-landings,
.stats-summary, .prms-stats-summary, .table-container,
.recent-card, .prms-recent-card, .cup-result-card, .cup-result-body,
.cup-result-header, .stat-card {
    background: var(--prms-surface) !important;
    border-color: var(--prms-border) !important;
    box-shadow: var(--prms-shadow) !important;
}

.cup-header, .tournament-header, .recent-header {
    background: var(--prms-surface) !important;
    border-color: var(--prms-border) !important;
    color: var(--prms-text) !important;
}

.cup-header:hover, .tournament-header:hover, .cup-result-header:hover,
.prms-tab:hover:not(.active) {
    background: var(--prms-surface-alt) !important;
}

.tournament-body, .cup-body {
    background: var(--prms-surface) !important;
}

.page-title, .cup-info {
    border-color: var(--prms-border) !important;
}

.page-title h1, .cup-title h2, .tournament-title, .cup-info h1,
.recent-name, .prms-recent-name, .stat-card .value {
    color: var(--prms-text) !important;
}

.page-title p, .cup-date, .tournament-date, .prms-recent-meta, .recent-meta,
.text-muted, .prms-tab-date, .cup-toggle, .no-data, .stat-card .label {
    color: var(--prms-text-muted) !important;
}

.cup-stats span, .tournament-stats span, .cup-stats-badge span,
.stats-mini, .winners-mini {
    background: var(--prms-surface-alt) !important;
    color: var(--prms-text-muted) !important;
    border: 1px solid var(--prms-border) !important;
}

/* stats bar keeps its own dark tone in both themes */
.stats-summary, .prms-stats-summary {
    background: var(--prms-surface-alt) !important;
}
.stats-summary .stat-item, .stats-summary .stat-value, .stats-summary .stat-label,
.prms-stats-summary .stat-item {
    color: var(--prms-text) !important;
}

/* ---------- header ---------- */
.prms-header {
    background: var(--prms-header-bg) !important;
    width: 100% !important;
    min-width: 0 !important;
    border-bottom: 1px solid var(--prms-border) !important;
}

.prms-header a, .prms-nav a, .prms-header-right {
    color: var(--prms-header-text) !important;
}

/* ---------- banners: edge-to-edge, no inset, no clipping ---------- */
html body .cup-banner-wrapper,
html body .banner-skeleton,
html body .prms-banner-wrapper {
    background: transparent !important;
    overflow: visible !important;
    width: calc(100% + (2 * var(--prms-container-pad))) !important;
    max-width: none !important;
    margin: 0 calc(-1 * var(--prms-container-pad)) 20px !important;
    min-height: 0 !important;
}

html body .cup-banner,
html body .hero-banner,
html body .prms-banner,
html body .banner img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    object-fit: cover !important;
    opacity: 1 !important;
    animation: none !important;
}

/* a bare <img class="cup-banner"> that is a direct child of the container
   still has to break out of the container padding itself */
html body .main-container > .cup-banner {
    width: calc(100% + (2 * var(--prms-container-pad))) !important;
    margin: 0 calc(-1 * var(--prms-container-pad)) 20px !important;
}

/* ---------- tables ---------- */
html body .table-container,
html body .prms-table-container {
    background: var(--prms-surface) !important;
    border: 1px solid var(--prms-border) !important;
}

html body .prms-table,
html body table.prms-table {
    background: var(--prms-surface) !important;
    color: var(--prms-text) !important;
    border-color: var(--prms-border) !important;
}

html body .prms-table th,
html body table.prms-table thead th {
    background: var(--prms-table-head-bg) !important;
    background-color: var(--prms-table-head-bg) !important;
    background-image: none !important;
    color: var(--prms-text) !important;
    border-color: var(--prms-border) !important;
}

html body .prms-table tbody tr > td,
html body table.prms-table tbody tr > td {
    background: var(--prms-row) !important;
    background-color: var(--prms-row) !important;
    background-image: none !important;
    border-color: var(--prms-border) !important;
    color: var(--prms-text) !important;
}

html body .prms-table tbody tr:nth-child(even) > td,
html body table.prms-table tbody tr:nth-child(even) > td {
    background: var(--prms-row-alt) !important;
    background-color: var(--prms-row-alt) !important;
}

/* every nested node inherits the row colour - kills legacy
   color:#999 / color:#333 inline styles inside cells */
html body .prms-table tbody tr > td *,
html body .prms-table tbody tr > td strong,
html body .prms-table tbody tr > td small,
html body .prms-table tbody tr > td span,
html body .prms-table tbody tr > td [style],
html body .prms-table thead th * {
    color: inherit !important;
    background-image: none !important;
}

html body .prms-table tbody tr > td small,
html body .prms-table tbody tr > td .sub {
    opacity: .72;
}

html body .prms-table tbody tr:hover > td,
html body table.prms-table tbody tr:hover > td {
    background: var(--prms-row-hover) !important;
    background-color: var(--prms-row-hover) !important;
}

/* ---------- double stamp rows: always readable ---------- */
html body .prms-table tbody tr.ds-row > td,
html body table.prms-table tbody tr.ds-row > td,
html body .prms-table tbody tr.prms-double-stamp-row > td,
html body table.prms-table tbody tr.prms-double-stamp-row > td,
html body tr.ds-row > td,
html body tr.prms-double-stamp-row > td,
html body td.prms-cell-double-stamp {
    background: var(--prms-row-ds) !important;
    background-color: var(--prms-row-ds) !important;
    background-image: none !important;
    color: var(--prms-row-ds-text) !important;
    border-color: var(--prms-border) !important;
}

html body tr.ds-row > td *,
html body tr.prms-double-stamp-row > td *,
html body tr.ds-row > td [style],
html body td.prms-cell-double-stamp * {
    color: inherit !important;
}

html body .prms-table tbody tr.ds-row:hover > td,
html body .prms-table tbody tr.prms-double-stamp-row:hover > td {
    background: color-mix(in srgb, var(--prms-row-ds) 80%, var(--prms-row-hover)) !important;
}

html body td.prms-cell-double-stamp::before {
    background: var(--prms-row-ds) !important;
}

html body .ds-badge,
html body .ds-badge-small,
html body .prms-double-stamp-badge {
    background: var(--prms-accent) !important;
    color: #fff !important;
    border: 0 !important;
}

/* ---------- tabs / pills / badges ---------- */
html body .prms-tab {
    background: var(--prms-surface) !important;
    color: var(--prms-text) !important;
    border-color: var(--prms-border) !important;
}

html body .prms-tab.active {
    background: var(--prms-accent) !important;
    border-color: var(--prms-accent) !important;
    color: #fff !important;
}
html body .prms-tab.active * { color: #fff !important; }

.prms-tabs-row {
    border-color: var(--prms-border) !important;
}

.view-details, .prms-winner-row, .winner-first {
    background: var(--prms-accent) !important;
    color: #fff !important;
}

.view-details:hover {
    background: var(--prms-accent-dark) !important;
}

.winner-last, .prms-last-winner {
    background: var(--prms-accent-dark) !important;
    color: #fff !important;
}

.winner-first *, .winner-last *, .prms-winner-row * { color: #fff !important; }

.back-link { color: var(--prms-accent) !important; }

.pagination span {
    background: var(--prms-accent) !important;
    border-color: var(--prms-accent) !important;
    color: #fff !important;
}

.pagination a {
    background: var(--prms-surface) !important;
    color: var(--prms-text) !important;
    border-color: var(--prms-border) !important;
}

/* ---------- clean rank badges (replace medal emoji) ---------- */
.rank-medal {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-left: 6px;
    vertical-align: middle;
}

.rank-medal.rank-1 { background: var(--prms-gold); }
.rank-medal.rank-2 { background: var(--prms-silver); }
.rank-medal.rank-3 { background: var(--prms-bronze); }

/* ---------- theme toggle switch ---------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.12);
    padding: 5px 10px;
    font-size: 12px;
    color: var(--prms-header-text);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.theme-toggle .track {
    width: 30px;
    height: 16px;
    background: rgba(0, 0, 0, 0.35);
    position: relative;
}

.theme-toggle .thumb {
    width: 12px;
    height: 12px;
    background: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: left .15s ease;
}

html[data-theme="dark"] .theme-toggle .thumb {
    left: 16px;
}

/* small status dots used in place of the old Font Awesome icons */
.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: currentColor;
    opacity: .8;
    margin-right: 6px;
    vertical-align: middle;
}

@media (max-width: 768px) {
    :root, html[data-theme] { --prms-container-pad: 12px; }
    html, body { min-width: 0 !important; }
    .main-container, .prms-header, .prms-tournaments-container { min-width: 0 !important; }
}
