/* Linked by the pages that use it; the layer keeps its old place in the
   cascade, from when core/main.css imported it. */
@layer components {
/* events.css */

/* --- Custom Icons --- */
.icon-pulse::before,
.icon-trophy::before,
.icon-medal::before,
.icon-log::before,
.icon-events::before {
    display: inline-block;
    margin-right: 8px;
    font-style: normal;
    font-size: 1em;
}
.icon-pulse::before  { content: "📡"; }
.icon-trophy::before { content: "🏆"; }
.icon-medal::before  { content: "🥇"; }
.icon-events::before { content: "⚡"; }

/* --- Info Section (Stats & Updates) --- */
.info-section {
    margin-bottom: 40px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.info-block {
    background-color: var(--surface);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.info-block h3 {
    font-size: 1.4em;
    color: var(--accent-teal);
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--accent-teal); /* Blue accent underline */
    padding-bottom: 8px;
}

.info-block ul, .info-block ol {
    list-style-type: none;
    padding-left: 0;
}
.info-block li {
    padding: 5px 0;
    border-bottom: 1px solid var(--surface-3); /* Light separator for list items */
}
.info-block li:last-child {
    border-bottom: none;
}

.events-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.92em;
}
.events-table tr:nth-child(odd) {
    background-color: #f8f9fa;
}
.events-table tr:nth-child(even) {
    background-color: #eef1f5;
}
.events-table td {
    padding: 8px 10px;
    text-align: left;
    vertical-align: middle;
}
.events-table .event-name {
    font-weight: 500;
}
.events-table .event-name a {
    color: #2980b9;
    text-decoration: none;
}
.events-table .event-name a:hover {
    text-decoration: underline;
}
.events-table .event-type {
    color: var(--ink-2);
    font-size: 0.875rem;
}
.events-table .event-status {
    font-size: 0.875rem;
    color: #27ae60;
    font-weight: 600;
}

/* CSS enhancements for the .leaderboard block */

.info-block.leaderboard h4 { /* Style for "Active Tournament Leaders" sub-heading */
    font-size: 1.1em;
    color: var(--ink-2); /* A slightly muted color for the sub-heading */
    margin-top: 15px;
    margin-bottom: 12px;
    padding-bottom: 5px;
    border-bottom: 1px dashed var(--line); /* Subtle separator */
    font-weight: 600; /* Semi-bold */
}

.leaderboard-list li {
    display: flex;
    align-items: center; /* Vertically center items in the row */
    padding: 12px 8px; /* More padding for each list item */
    border-bottom: 1px solid var(--surface-3); /* Lighter, more subtle separator */
    transition: background-color 0.2s ease-in-out;
}

.leaderboard-list li:last-child {
    border-bottom: none; /* No border for the last item */
}

.leaderboard-list li:hover {
    background-color: var(--surface-2); /* Very light grey on hover for feedback */
}

.leaderboard-list .rank {
    font-size: 1em; /* Slightly larger rank font */
    font-weight: 700; /* Bolder rank */
    color: var(--surface); /* White text */
    background-color: #007bff; /* Primary blue, or your theme's accent */
    min-width: 32px;  /* Ensure enough space for two digits and padding */
    height: 32px;
    border-radius: 50%; /* Circular rank badge */
    display: inline-flex; /* To use align-items and justify-content */
    align-items: center;
    justify-content: center;
    margin-right: 15px; /* More space between rank and player name */
    flex-shrink: 0; /* Prevent rank badge from shrinking */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Optional: Distinct colors for top 3 ranks */
.leaderboard-list li:nth-child(1) .rank {
    background-color: #ffc107; /* Gold */
    color: var(--ink); /* Darker text for better contrast on gold */
}
.leaderboard-list li:nth-child(2) .rank {
    background-color: var(--line-strong); /* Silver */
    color: var(--ink);
}
.leaderboard-list li:nth-child(3) .rank {
    background-color: #cd7f32; /* Bronze */
}

.leaderboard-list .player {
    flex-grow: 1; /* Player name takes up remaining space */
    font-size: 1.05em; /* Slightly larger player name */
    color: var(--text-main); /* Standard dark text */
    font-weight: 500;
    margin-right: 10px; /* Space before the score */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-list .score {
    font-weight: 600; /* Semi-bold score */
    font-size: 1em;
    color: #28a745; /* Green for score (success color) */
    background-color: #e9f5ec; /* Very light green background for score */
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap; /* Prevent "pts" from wrapping */
}

.tournament-winner-announcement strong {
    /* If you want the "Overall Winner:" part to be even bolder or different */
    font-weight: 700;
    /* color: var(--ink); */ /* Example: make "Overall Winner" black */
}

/* Style for the "No active tournament leaderboard to display." message */
.info-block.leaderboard > p:not(.tournament-winner-announcement) { /* Target the P if it's the only content (no scores) */
    color: var(--ink-2); /* Muted text color */
    font-style: italic;
    text-align: center;
    padding: 20px 10px; /* Give it some space */
    background-color: var(--surface-2);
    border-radius: 4px;
}

/* Assuming this CSS is within a .system-pulse .info-block or can target 'ul' directly within pulses.html context */
/* If pulses.html is included within .system-pulse info-block: */

.system-pulse ul {
    list-style-type: none;
    padding-left: 0;
    margin-top: 10px; /* Add some space below the "System Pulses" h3 */
}

.system-pulse li {
    display: flex; /* Align items on one line */
    justify-content: space-between; /* Push link to left, timestamp to right */
    align-items: center; /* Vertically align items */
    padding: 10px 5px; /* Add some padding around each item */
    border-bottom: 1px solid #e9ecef; /* Lighter separator */
    transition: background-color 0.2s ease-in-out;
    background-color: #ecf0f1;
}

.system-pulse li:last-child {
    border-bottom: none; /* No border for the last item */
}

.system-pulse li:hover {
    background-color: #f8f9fa; /* Subtle hover effect */
}

.system-pulse li a {
    color: #007bff; /* A common link blue, or your theme's primary link color */
    text-decoration: none;
    font-weight: 500; /* Slightly bolder than normal text */
    flex-grow: 1; /* Allow link to take available space */
    margin-right: 10px; /* Space between link and timestamp */
}

.system-pulse li a:hover {
    text-decoration: underline;
    color: #0056b3; /* Darker blue on hover */
}

.system-pulse li p.timestamp {
    font-size: 0.875rem;
    color: var(--ink-2); /* Muted grey for timestamp */
    margin: 0; /* Remove default paragraph margin */
    white-space: nowrap; /* Prevent timestamp from wrapping if possible */
}

/* Style for the "No recent activity" message if present */
.system-pulse li:only-child { /* If only one li (likely the empty message) */
    justify-content: flex-start; /* Align to the left */
    color: var(--ink-2); /* Muted text color */
    font-style: italic;
}

/* --- App Overview Block --- */
.app-overview-highlight {
    background-color: #eaf7ee !important;
}
.app-overview-highlight .event-status {
    color: #27ae60;
    font-weight: 700;
}

/* --- Live Visitors Block --- */
.live-visitors-count {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--surface);
    background: #27ae60;
    border-radius: 10px;
    padding: 1px 8px;
    margin-left: 6px;
    vertical-align: middle;
}
.event-delta {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}
.delta-badge {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--accent-activity);
    background-color: var(--surface);
    padding: 2px 7px;
    border-radius: 10px;
}

/* Responsive adjustments for info-section elements */
@media (max-width: 992px) {
    .info-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr; /* Stack info blocks */
    }
    /* .section-title style is already in winners.css, if it's global, otherwise copy here too */
    /* For consistency, if this is only for events, and winners.css might not be loaded: */
    .section-title {
        font-size: 1.6em;
    }
    .info-block h3 {
        font-size: 1.2em;
    }
}

@media (max-width: 480px) {
    .info-grid {
        /* grid-template-columns: 1fr; already set */
        gap: 10px;
    }
    .section-title {
        font-size: 1.4em;
        margin-bottom: 15px;
    }
    .info-block h3 {
        font-size: 1.1em;
        margin-bottom: 10px;
    }
    .info-block {
        padding: 10px;
    }
}
}