table, th, td {
  border: 1px solid var(--col);
  border-collapse: collapse;
  padding: .5em;
  font-size: 1rem;
  /* font-family: monospace; */
}

/* Filter Section Layout */
.filter-section {
    /* margin-bottom: 20px; */
    padding: 15px;
    /* border: 1px solid #ccc;
    background: #f9f9f9; */
}

.filter-group {
    margin-bottom: 10px;
}

.filter-group p {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

/* Button Layout */
.filter-btn {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 0 5px 0;
    font-size: 0.85rem;
    cursor: pointer;
    background: var(--col);
    border-radius: 20px;
    border: none;
    font-family: monospace;
    color var(--bg);
}
.id {
    text-align: left;
}
.filter-btn:hover {
    background: var(--acc);
}

/* Active State (Selected) */
.filter-btn.active {
    background: var(--sel);
    color: white;
    border-color: #3f6076;
}

/* Read More / Read Less Styles */
.desc-hidden {
    display: none;
}

.desc-expanded .desc-hidden {
    display: inline;
}

.desc-toggle {
    background: var(--col);
    border: none;
    color: var(--bg);
    font-family: monospace;
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 5px;
    font-size: 0.75rem;
}

.desc-toggle:hover {
    background-color: var(--acc);
}
thead {
    background: var(--col);
}
/* Sort Button Base Styles */

th button.sort {
    background: none;
    border: none;
    cursor: pointer;
    font-family: monospace;
    color: var(--bg);
    padding: 5px 10px 5px 0; /* Space for arrow */
    position: relative;
    text-align: left;
    font-size: 0.85rem;
    width: 100%;
}

thead th:hover {
    background: var(--acc); /* Infomaniak blue on hover */
    text-decoration: underline;
}

/* Arrow Indicators (Hidden by default) */
th button.sort::after {
    content: '';
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    /* font-size: 0.8em; */
    opacity: 0.3; /* Faint arrow for inactive columns */
}

/* Default state: Show faint up/down or just nothing? 
   Let's show nothing for inactive, and arrows only for active */
th button.sort::after {
    display: none;
}

/* Active: Ascending (↓) */
th button.sort.asc::after {
    content: '▼';
    display: block;
    opacity: 1;
    /* color: #3f6076; */
}

/* Active: Descending (↑) */
th button.sort.desc::after {
    content: '▲';
    display: block;
    align-self: right;
    opacity: 1;
}

/* Optional: Make active column header text bold/color */
th button.sort.asc,
th button.sort.desc {
    color: var(--sel);
}
.controls {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
#view-toggle {
    display: inline-block;
    padding: 6px 12px;
    font-size: 0.85rem;
    cursor: pointer;
    background: var(--col);
    border-radius: 20px;
    border: none;
    font-family: monospace;
    color var(--bg);
}
.search {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 0 5px 0;
    font-size: 0.85rem;
    cursor: pointer;
    background: var(--col);
    border-radius: 20px;
    border: none;
    font-family: monospace;
    color var(--acc);
}

/* Restyling after hiding the formatting of the date of events and created column */

.date_of_events, .created_at {
    font-size: 0;
}

.date_of_events > span, .created_at > span {
    color: var(--col);
    font-size: 1rem;
    padding: 5px;
}

.time_of_events {
    display: none;
}