/* Wrapper: controls total width and centers the table */
.events-table-wrapper {
    max-width: 44rem;          /* ~700px */
    margin: 2.5rem auto;
    padding: 0 1.25rem;
}

/* Table: fill wrapper, natural column widths */
.events-table {
    width: 100%;
    border-collapse: separate;   /* required for rounded corners */
    border-spacing: 0;           /* remove gaps */
    font-size: 0.9rem;
    border-radius: 0.5rem;       /* rounded corners */
    overflow: hidden;            /* ensures rounding clips children */
    background: #1a1a1a;         /* dark base */
}

/* Header row */
.events-table th {
    font-weight: 600;
    padding: 0.6rem 0.75rem;
    text-align: left;
    white-space: nowrap;
    background: #2a2a2a;         /* dark header */
    color: #fff;
    border-bottom: 0.15rem solid #333;
}

/* Body cells */
.events-table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    white-space: nowrap;
    color: #e0e0e0;
    border-bottom: 0.05rem solid #2a2a2a;
}

/* Hover highlight */
.events-table tr:hover td {
    background: #333;
}

/* Centered filter bar */
.events-filters {
    max-width: 50rem;              /* ~800px */
    margin: 0 auto 2rem auto;      /* center + spacing */
    display: flex;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0;
}

/* Labels — readable on dark backgrounds */
.events-filters label {
    font-size: 0.9rem;
    color: #f5f5f5;                /* light gray, visible on dark */
    font-weight: 500;
}

/* Dropdowns — force light background + dark text */
.events-filters select {
    padding: 0.35rem 0.75rem;
    font-size: 0.9rem;
    border-radius: 0.4rem;
    border: 0.1rem solid #ccc;
    background: #ffffff;           /* force white so text is visible */
    color: #222;                   /* readable dark text */
}

/* Apply button */
.events-filters .btn {
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
}