/* =====================================================================
   SHARED COMPONENT: TOOLBAR LAYOUT + DATA TABLE
   -----------------------------------------------------------------------
   Toolbar BUTTON SKIN (.filter-reset-btn) is already global, defined
   in header.css and loaded on every page automatically — do not
   redefine it here or anywhere page-specific. This file only holds:
     - toolbar layout containers (.button-group-container etc.)
     - the .clean-table skeleton for pages using that table style

   Only link this file on pages that actually use .clean-table.
   Pages with a different table (e.g. omnidat.php's .platform-table)
   should NOT link this — its .table-wrapper/.table-scroll-container
   rules will collide with that page's own table sizing.

   Currently included on: legacygenre_titles.php, newadditions.php, platforms.php, mame_browser.php, removedfiles.php, companies.php, company_details.php, regions.php, region_titles.php, contributors.php, title_details.php, datfiles.php, omni1_platforms.php, undumped_platforms.php, undumped_roms.php
   ===================================================================== */

/* ---------------------------------------------------------------------
   Toolbar layout (search box, filter tags, count, buttons)
   --------------------------------------------------------------------- */
.button-group-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    width: 100%;
}

.search-and-buttons-container {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}

.main-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-left: auto; /* pushes the button group to the right edge of the toolbar */
    flex-wrap: wrap;
}

/* Toolbar buttons: use .filter-reset-btn, already styled globally in
   header.css (loaded on every page) — do not redefine it here. */

/* =====================================================================
   DATA TABLE: .clean-table
   Page-specific column widths (data-column-id rules) stay in the
   page's own CSS file — this covers only the generic table skeleton.
   ===================================================================== */
.table-scroll-container {
    position: relative;
    box-shadow: var(--table-shadow);
    background-color: var(--table-bg);
    border-radius: 8px;
    border: 1px solid var(--table-border);
    margin-top: 20px;
}

.table-wrapper {
    position: relative;
    max-height: 70vh;
    overflow-x: auto;
    overflow-y: auto;
    white-space: nowrap;
    box-shadow: var(--table-shadow);
    background-color: var(--table-bg);
    -webkit-overflow-scrolling: touch;
}

.clean-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    background-color: var(--table-bg);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    color: var(--main-text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.clean-table thead th {
    position: sticky;
    top: 0;
    padding: 10px;
    background-color: var(--table-container-bg, #f8f8f8);
    z-index: 10;
}

.clean-table th,
.clean-table td {
    border: 1px solid var(--table-border);
    padding: 8px 10px;
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color 0.3s ease;
}

.clean-table th {
    background-color: var(--table-header-bg);
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease;
}

.clean-table tr.odd-row {
    background-color: var(--table-row-odd-bg);
}

.clean-table tr.even-row {
    background-color: var(--table-row-even-bg);
}

.clean-table tbody tr:hover {
    background-color: var(--table-row-hover-bg);
    cursor: pointer;
}

.clean-table tbody tr:hover td {
    color: var(--table-row-hover-text);
}

.clean-table a {
    color: var(--table-link-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.clean-table .hide-column,
.hide-column {
    display: none !important;
}

/* Sortable column headers */
th.sortable {
    position: relative;
    padding-right: 24px; /* space for the sort indicator */
}

th.sortable::after {
    content: "⇅";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7em;
    opacity: 0.3;
    transition: opacity 0.2s;
}

th.sortable:hover::after {
    opacity: 1;
}

th.sort-asc::after {
    content: "↑";
    opacity: 1;
    color: var(--sort-indicator-active-color);
    font-size: 0.9em;
    font-weight: bold;
}

th.sort-desc::after {
    content: "↓";
    opacity: 1;
    color: var(--sort-indicator-active-color);
    font-size: 0.9em;
    font-weight: bold;
}

th.sort-active {
    color: var(--sort-indicator-active-color);
    font-weight: 600;
}