/* Table Styling and Sorting */

/* Filter Bar - Compact layout for tabs and checkbox */
.filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--pico-spacing);
    gap: var(--pico-spacing);
}

.filter-bar .type-filter-tabs {
    flex: 0 1 auto;
}

.filter-bar .filter-checkbox {
    flex: 0 0 auto;
}

.filter-bar .filter-checkbox label {
    margin: 0;
    display: flex;
    align-items: center;
    gap: calc(var(--pico-spacing) * 0.5);
    font-size: 0.875em;
}

.filter-bar .filter-checkbox input[type="checkbox"] {
    margin: 0;
}

/* Type Filter Tab Styling */
.type-filter-tabs a {
    margin-right: calc(var(--pico-spacing) * 0.25); /* Very small spacing between tabs */
    text-decoration: underline; /* Standard link underline */
    color: var(--pico-color);
    transition: all var(--pico-transition);
}

/* Tab hover state */
.type-filter-tabs a:hover {
    color: var(--pico-primary);
    font-weight: calc(var(--pico-font-weight) * 1.25); /* Slightly bolder text on hover */
    text-decoration-thickness: 2px; /* Slightly thicker underline on hover */
}

/* Tab active/selected state */
.type-filter-tabs a.active {
    color: var(--pico-primary);
    font-weight: calc(var(--pico-font-weight) * 1.5);
    text-decoration: underline;
    text-decoration-thickness: 3px; /* Thick underline for active */
}

/* Tab focus state for accessibility */
.type-filter-tabs a:focus {
    outline: 2px solid var(--pico-primary-focus);
    outline-offset: 2px;
}

/* Mobile responsiveness for filter bar */
@media (max-width: 768px) {
    /* Tablet breakpoint */
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: calc(var(--pico-spacing) * 0.5);
    }

    .filter-bar .type-filter-tabs {
        flex-wrap: wrap;
        justify-content: center;
    }

    .filter-bar .filter-checkbox {
        margin-top: calc(var(--pico-spacing) * 0.5);
    }
}

/* Dense Table Layout */
.table-container {
    overflow-x: auto;
    margin-top: calc(var(--pico-spacing) * 0.5);
}

.archdioceses-table,
.communities-table {
    width: 100%;
    margin: 0;
    font-size: 0.875em; /* Slightly smaller for density */
}

/* Compact table spacing */
.archdioceses-table th,
.archdioceses-table td,
.communities-table th,
.communities-table td {
    padding: calc(var(--pico-form-element-spacing-vertical) * 0.66)
        calc(var(--pico-form-element-spacing-horizontal) * 0.75);
}

/* Header styling */
.archdioceses-table thead th,
.communities-table thead th {
    font-weight: calc(var(--pico-font-weight) * 1.5);
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.05em;
    color: var(--pico-muted-color);
}

/* Sortable column header */
.sortable {
    padding: 0;
}

.sort-button {
    width: 100%;
    padding: calc(var(--pico-form-element-spacing-vertical) * 0.66)
        calc(var(--pico-form-element-spacing-horizontal) * 0.75);
    margin: 0;
    background: none;
    border: none;
    color: var(--pico-muted-color);
    font-weight: calc(var(--pico-font-weight) * 1.5);
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.05em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    transition: color var(--pico-transition);
}

/* Center-aligned sort buttons (for numeric columns) */
.text-center .sort-button {
    justify-content: center;
    text-align: center;
}

.sort-button:hover {
    color: var(--pico-primary);
    background-color: var(--pico-accordion-border-color);
}

.sort-indicator {
    font-size: 0.875em;
    opacity: 0.5;
    margin-left: calc(var(--pico-spacing) * 0.5);
}

.sort-button:hover .sort-indicator {
    opacity: 1;
}

/* Alternating row colors */
.archdioceses-table tbody tr:nth-child(even),
.communities-table tbody tr:nth-child(even) {
    background-color: var(--pico-accordion-border-color);
}

/* Row hover effect */
.archdioceses-table tbody tr:hover,
.communities-table tbody tr:hover {
    background-color: var(--pico-dropdown-hover-background-color);
    transition: background-color var(--pico-transition);
}

/* Text alignment helpers */
.text-center {
    text-align: center;
}

/* Name cell styling */
.name-cell a {
    color: var(--pico-color);
    text-decoration: none;
    display: block;
    padding: 0;
}

.name-cell a:hover {
    color: var(--pico-primary);
    text-decoration: underline;
}

/* Archdiocese name text wrapping - CSS-only approach */
.archdiocese-name {
    word-break: break-word; /* Breaks at any character when needed */
    overflow-wrap: break-word; /* Fallback for older browsers */
    hyphens: auto; /* Let browser add hyphens where appropriate */
    line-height: 1.4; /* Slightly increased for better readability */
    max-width: 35ch; /* Reduced width to force wrapping at earlier break points */
    display: block; /* Ensure block-level for max-width to work */
}

/* Checkbox column styling */
.checkbox-column {
    width: 50px;
    text-align: center;
}

.checkbox-column input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}

/* Inactive row styling */
.inactive-row {
    opacity: 0.6;
}

.inactive-row td {
    color: var(--pico-muted-color);
}

.inactive-row:hover {
    opacity: 0.8;
}

/* Selected row styling */
.archdioceses-table tbody tr.selected,
.communities-table tbody tr.selected {
    background-color: var(--pico-primary-focus);
}

.archdioceses-table tbody tr.selected:hover,
.communities-table tbody tr.selected:hover {
    background-color: var(--pico-primary-hover-background);
}

/* Bulk actions styling */
.bulk-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--pico-spacing);
}

.bulk-actions button {
    margin: 0;
}

/* Responsive behavior */
@media (max-width: 768px) {
    /* Tablet breakpoint */
    .table-container {
        margin-left: calc(var(--pico-spacing) * -1);
        margin-right: calc(var(--pico-spacing) * -1);
        padding: 0 var(--pico-spacing);
    }

    .archdioceses-table {
        min-width: 700px; /* Increased to accommodate checkbox column */
    }

    /* Make first two columns sticky on mobile (checkbox and name) */
    .archdioceses-table th:first-child,
    .archdioceses-table td:first-child,
    .archdioceses-table th:nth-child(2),
    .archdioceses-table td:nth-child(2) {
        position: sticky;
        background-color: var(--pico-background-color);
        z-index: 1;
    }

    .archdioceses-table th:first-child,
    .archdioceses-table td:first-child {
        left: 0;
    }

    .archdioceses-table th:nth-child(2),
    .archdioceses-table td:nth-child(2) {
        left: 50px; /* Width of checkbox column */
    }

    .archdioceses-table tbody tr:nth-child(even) td:first-child,
    .archdioceses-table tbody tr:nth-child(even) td:nth-child(2) {
        background-color: var(--pico-accordion-border-color);
    }

    .archdioceses-table tbody tr:hover td:first-child,
    .archdioceses-table tbody tr:hover td:nth-child(2) {
        background-color: var(--pico-dropdown-hover-background-color);
    }

    .archdioceses-table tbody tr.selected td:first-child,
    .archdioceses-table tbody tr.selected td:nth-child(2) {
        background-color: var(--pico-primary-focus);
    }
}