/* Common Page Layout Styles */
/* Used by: Songs, Congregations, Users pages */

/* Page Container */
.page-layout,
.songs-page,
.congregations-page,
.users-page,
.speakers-page,
.talks-page {
    padding: 8px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    /* Page Header */
    .page-layout .page-header,
    .songs-page .page-header,
    .congregations-page .page-header,
    .users-page .page-header,
    .speakers-page .page-header,
    .talks-page .page-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        flex-shrink: 0;
    }

        .page-layout .page-header h1,
        .songs-page .page-header h1,
        .congregations-page .page-header h1,
        .users-page .page-header h1,
        .speakers-page .page-header h1,
        .talks-page .page-header h1 {
            font-size: 28px;
            font-weight: 600;
            color: var(--text-primary, #1f2937);
            margin: 0;
        }

    .page-layout .header-actions,
    .songs-page .header-actions,
    .congregations-page .header-actions,
    .users-page .header-actions,
    .speakers-page .header-actions,
    .talks-page .header-actions {
        display: flex;
        gap: 12px;
    }

    /* List Toolbar */
    .page-layout .list-toolbar,
    .songs-page .list-toolbar,
    .congregations-page .list-toolbar,
    .users-page .list-toolbar,
    .speakers-page .list-toolbar,
    .talks-page .list-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid var(--border-color, #e5e7eb);
        background: var(--bg-secondary, #f9fafb);
        flex-shrink: 0;
    }

    .page-layout .list-info,
    .songs-page .list-info,
    .congregations-page .list-info,
    .users-page .list-info,
    .speakers-page .list-info,
    .talks-page .list-info {
        font-size: 14px;
        color: var(--text-secondary, #6b7280);
    }

    /* Loading & Error States */
    .page-layout .loading-container,
    .songs-page .loading-container,
    .congregations-page .loading-container,
    .congregations-page .loading-container,
    .speakers-page .loading-container,
    .talks-page .loading-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px 20px;
        color: var(--text-secondary, #6b7280);
    }

    .page-layout .spinner,
    .songs-page .spinner,
    .congregations-page .spinner,
    .users-page .spinner,
    .speakers-page .spinner,
    .talks-page .spinner {
        width: 48px;
        height: 48px;
        border: 4px solid var(--border-color, #e5e7eb);
        border-top-color: var(--primary-color, #3b82f6);
        border-radius: 50%;
        animation: page-spin 1s linear infinite;
        margin-bottom: 16px;
    }

@keyframes page-spin {
    to {
        transform: rotate(360deg);
    }
}

.page-layout .error-message,
.songs-page .error-message,
.congregations-page .error-message,
.users-page .error-message,
.speakers-page .error-message,
.talks-page .error-message {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #dc2626;
}

.page-layout .error-icon,
.songs-page .error-icon,
.congregations-page .error-icon,
.users-page .error-icon,
.speakers-page .error-icon,
.talks-page .error-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Content Container with List and Detail */
.page-layout .content-container,
.songs-page .songs-container,
.congregations-page .congregations-container,
.users-page .users-container,
.speakers-page .speakers-container,
.talks-page .talks-container {
    display: flex;
    flex-direction: row;
    gap: 16px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.page-layout .content-list,
.songs-page .songs-list,
.congregations-page .congregations-list,
.users-page .users-content,
.speakers-page .speakers-list,
.talks-page .talks-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    min-width: 0;
}

    .page-layout .content-list.has-detail,
    .songs-page .songs-list.has-detail,
    .congregations-page .congregations-list.has-detail,
    .users-page .users-content.has-detail,
    .speakers-page .speakers-list.has-detail,
    .talks-page .talks-list.has-detail {
        flex: 0 0 60%;
        min-width: 0;
    }

/* Unauthorized Message */
.page-layout .unauthorized-message,
.songs-page .unauthorized-message,
.congregations-page .unauthorized-message,
.users-page .unauthorized-message,
.speakers-page .unauthorized-message,
.talks-page .unauthorized-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

    .page-layout .unauthorized-message h2,
    .songs-page .unauthorized-message h2,
    .congregations-page .unauthorized-message h2,
    .users-page .unauthorized-message h2,
    .speakers-page .unauthorized-message h2,
    .talks-page .unauthorized-message h2 {
        font-size: 24px;
        font-weight: 600;
        color: var(--text-primary, #1f2937);
        margin: 0 0 12px 0;
    }

    .page-layout .unauthorized-message p,
    .songs-page .unauthorized-message p,
    .users-page .unauthorized-message p,
    .speakers-page .unauthorized-message p,
    .talks-page .unauthorized-message p {
        font-size: 16px;
        color: var(--text-secondary, #6b7280);
        margin: 0 0 24px 0;
    }

/* Sort icon styling */
.sort-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    vertical-align: middle;
    opacity: 0.7;
}

    .sort-icon svg {
        width: 16px;
        height: 16px;
    }

/* Sortable column header */
.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
    white-space: nowrap;
}

    .sortable:hover {
        background-color: var(--bg-secondary, #f9fafb);
    }

/* Responsive */
@media (max-width: 1024px) {
    .page-layout .content-container,
    .songs-page .songs-container,
    .congregations-page .congregations-container,
    .users-page .users-container,
    .speakers-page .speakers-container,
    .talks-page .talks-container {
        flex-direction: column;
    }

    .page-layout .content-list.has-detail,
    .songs-page .songs-list.has-detail,
    .congregations-page .congregations-list.has-detail,
    .users-page .users-content.has-detail,
    .speakers-page .speakers-list.has-detail,
    .talks-page .talks-list.has-detail {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .page-layout,
    .songs-page,
    .congregations-page,
    .users-page,
    .speakers-page,
    .talks-page {
        padding: 8px;
    }

        .page-layout .page-header,
        .songs-page .page-header,
        .congregations-page .page-header,
        .users-page .page-header,
        .speakers-page .page-header,
        .talks-page .page-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }

        .page-layout .list-toolbar,
        .songs-page .list-toolbar,
        .congregations-page .list-toolbar,
        .users-page .list-toolbar,
        .speakers-page .list-toolbar,
        .talks-page .list-toolbar {
            flex-direction: column;
        }