/* Table container */
.size-restricted-table-clip {
    overflow: hidden; /*  This clips the scrollbar track corners */
}

.size-restricted-table-container {
    overflow-y: auto;
    overflow-x: auto;
    width: 100%;
    border: none;
    border-radius: 0;
}

.size-restricted-table-container::-webkit-scrollbar {
    height: 14px;
}

@media (min-width: 768px) {
    .size-restricted-table-container::-webkit-scrollbar {
        height: 16px;
    }
}

/* For safari */
.size-restricted-table-container::-webkit-scrollbar-thumb {
    border-radius: 12px;
    border: 3px solid #f1f1f1;
    background: #d1d1d1;
}

.size-restricted-table-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.table-container {
    overflow-x: auto;
    border-radius: 0.375rem;
    border-width: 1px;
    border-color: #d1d1d1;
    margin-top: 1rem;
    width: 100%;
}

.dark .table-container,
.dark .size-restricted-table-container {
    border-color: rgb(55 65 81);
}

/* Base table styles */
.table-base {
    width: 100%;
    font-size: 0.875rem;
    text-align: left;
    color: rgb(107 114 128);
    border-color: rgb(229 231 235);
}

.dark .table-base {
    color: rgb(156 163 175);
    border-color: rgb(55 65 81);
}

/* Table header styles */
.table-header {
    font-size: 0.875rem;
    color: #454545;
    font-weight: 500;
    font-style: normal;
    line-height: 150%;
    background-color: #e7e7e7;
    border-bottom-width: 1px;
    border-color: #d1d1d1;
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 20;
}

.dark .table-header {
    color: rgb(209 213 219);
    background-color: rgb(63 74 80);
    border-color: rgb(72, 83, 89);
}

/* Table header cell styles */
.table-header-cell {
    padding: 1rem 1.5rem;
}

.table-header-cell::first-letter {
    text-transform: capitalize;
}

/* Table header text styles */
.table-header-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: #454545;
}

.dark .table-header-text {
    color: rgb(209 213 219);
}

/* Table row styles */
.table-row {
    background-color: #ffffff;
    border-color: #d1d1d1;
}

.dark .table-row {
    background-color: rgb(49 60 67);
    border-color: rgb(55 65 81);
}

/* These are used in the organization detail page */
.table-row-hover:hover {
    background-color: #f6f6f6;
    transition:
        color 150ms,
        background-color 150ms,
        border-color 150ms,
        text-decoration-color 150ms,
        fill 150ms,
        stroke 150ms,
        opacity 150ms,
        box-shadow 150ms,
        transform 150ms,
        filter 150ms,
        backdrop-filter 150ms;
}

.dark .table-row-hover:hover {
    background-color: rgb(63 74 80);
}

/* Table cell styles */
.table-cell {
    padding: 1rem 1.5rem;
    max-width: 0;
}

/* Table cell link styles for the detail pages when there are 4 columns, for example */
.table-cell-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* Table cell text styles */
.table-cell-text {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    color: #454545;
}

.dark .table-cell-text {
    color: rgb(209 213 219);
}

/* for the select button in the lists of entities */
.table-action-link {
    font-weight: 500;
    color: rgb(37 99 235);
    text-decoration: underline;
    cursor: pointer;
}

.dark .table-action-link {
    color: rgb(96 165 250);
}

.table-action-link:hover {
    text-decoration: underline;
}

/* for table actions in project memberships and project members */
.table-action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 1rem;
    border-radius: 0.375rem;
    transition: background-color 0.15s ease-in-out;
    cursor: pointer;
    width: fit-content;
}

/* For buttons that need a minimum width (like in project tables) */
.table-action-button-fixed {
    min-width: 90px;
}

.table-action-button-text {
    color: white;
}

/* edit project member, for example */
.table-action-button-primary {
    background-color: #017bc2;
}

.table-action-button-primary:hover {
    background-color: #0265a2;
}

.table-action-button-primary:hover .table-action-button-text {
    text-decoration: underline;
}

/* delete buttons (project member delete, for example) */
.table-action-button-danger {
    background-color: #e50043;
}

.table-action-button-danger:hover {
    background-color: #ae033a;
}

.table-action-button-danger:hover .table-action-button-text {
    text-decoration: underline;
}

.reset-filter {
    color: #0265a2;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.reset-filter:hover {
    color: #0265a2;
    text-decoration: underline;
}

.dark .reset-filter {
    color: #0284d6;
}

.filter-label {
    color: #4f4f4f;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 0.5rem;
    display: block;
}

.dark .filter-label {
    color: white;
}

/* import pagination bar */
.pagination-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 16px 24px;
}