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

.dark .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;
}

.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;
}