@import './tab-manager.css';
@import './pattern-selection.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .wpuf-btn-primary {
        @apply wpuf-rounded-md wpuf-bg-primary !wpuf-text-white wpuf-px-4 wpuf-py-3 wpuf-text-sm wpuf-font-semibold hover:wpuf-bg-emerald-700 hover:wpuf-text-white focus:wpuf-text-white focus:wpuf-shadow-none;
    }

    .wpuf-btn-white {
        @apply wpuf-rounded-md wpuf-bg-white wpuf-text-gray-700 wpuf-px-4 wpuf-py-3 wpuf-text-sm wpuf-font-medium hover:wpuf-bg-gray-100 wpuf-border wpuf-border-gray-300;
    }
}

/* Reset WordPress core select styles for the wizard */
.wp-core-ui select {
    min-height: unset !important;
    max-width: unset !important;
}

/* Set white background for WordPress admin body - matches forms-list.css pattern */
/* This file is only loaded on User Directory page, so no scoping needed */
#wpbody,
#wpcontent,
#wpbody-content {
    background: #fff !important;
}

#wpbody-content {
    min-height: 100vh;
}

.wpuf-user-directory-empty {
    text-align: center;
    padding: 2rem;
    color: #6b7280;
    font-style: italic;
}


.wpuf-ud-table {
    width: 100%;
    border-collapse: collapse;
}

.wpuf-ud-thead {
    background-color: #FFFFFF;
}

.wpuf-ud-tbody {
    background-color: white;
}

.wpuf-ud-row {
    border-bottom: 1px solid #e5e7eb;
}

.wpuf-ud-row:hover {
    background-color: #f9fafb;
}

/* User field styles - Basic typography */
.wpuf-user-email,
.wpuf-user-role,
.wpuf-user-posts,
.wpuf-user-joined,
.wpuf-user-field {
    color: #374151;
    font-size: 0.875rem;
}

/* Profile link styles */
.wpuf-text-indigo-600 {
    color: #4f46e5;
}

.hover\:wpuf-text-indigo-900:hover {
    color: #312e81;
}

/* Loading States */
.wpuf-directory-loading {
    text-align: center;
    padding: 3rem;
}

.wpuf-directory-loading .wpuf-animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Empty State */
.wpuf-directory-empty {
    text-align: center;
    padding: 3rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

/* Custom Field Styles - Basic */
.wpuf-custom-field {
    font-size: 0.875rem;
    color: #374151;
}

/* WordPress Block Editor Color Support for Custom Fields */
.wpuf-custom-field.has-text-color,
.wpuf-custom-field.has-text-color * {
    color: inherit !important;
}

.wpuf-custom-field[style*="color"],
.wpuf-custom-field[style*="color"] * {
    color: inherit !important;
}

/* Focus States */
.wpuf-btn:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .wpuf-pagination,
    .wpuf-action-buttons {
        display: none !important;
    }

    .wpuf-table-body {
        border: 1px solid #000;
    }

    .wpuf-user-row {
        border-bottom: 1px solid #000;
    }
}

/* Dropdown Text Truncation - Prevent caret overlap */
.wpuf-ud-search-in,
.wpuf-ud-sort-by,
.wpuf-ud-sort-order {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    /* Ensure sufficient space for caret icon */
    padding-right: 3rem !important;
    /* Ensure consistent appearance across all dropdowns */
    max-width: 100%;
    box-sizing: border-box;
}

/* Ensure dropdown options are also properly truncated */
.wpuf-ud-search-in option,
.wpuf-ud-sort-by option,
.wpuf-ud-sort-order option {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}

/* Override any theme/plugin styles that might affect layout preview images */
.wpuf-user-directory-setup img {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: initial !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/**
 * User Directory - Dynamic Spacing Fix
 * Ensures proper spacing only when content is present
 */

/* Remove empty paragraph elements from layout */
.wpuf-ud-list-layout-2 p:empty,
.wpuf-ud-list-layout-3 p:empty,
.wpuf-ud-list-layout-4 p:empty,
.wpuf-ud-list-layout-5 p:empty,
.wpuf-ud-list-layout-6 p:empty {
    display: none !important;
}

/* Add spacing only between non-empty elements */
.wpuf-ud-list-layout-2 p:not(:empty) + p:not(:empty),
.wpuf-ud-list-layout-3 p:not(:empty) + p:not(:empty),
.wpuf-ud-list-layout-4 p:not(:empty) + p:not(:empty),
.wpuf-ud-list-layout-5 p:not(:empty) + p:not(:empty),
.wpuf-ud-list-layout-6 p:not(:empty) + p:not(:empty) {
    margin-top: 0.25rem;
}

/* Dynamic card heights - prevent excessive whitespace */
.wpuf-ud-list-layout-2 li,
.wpuf-ud-list-layout-3 li,
.wpuf-ud-list-layout-5 li {
    height: auto !important;
}

/* Ensure cards maintain minimum height for visual consistency */
.wpuf-ud-list-layout-2 li {
    min-height: 180px;
}

.wpuf-ud-list-layout-3 li,
.wpuf-ud-list-layout-5 li {
    min-height: 280px;
}

/* Hide empty flex containers */
.wpuf-ud-list .wpuf-flex-col > *:empty {
    display: none !important;
}

/* Social icons container - hide if empty */
.wpuf-social-icons:empty {
    display: none !important;
}

/* Ensure View Profile button stays at bottom with proper spacing */
.wpuf-ud-list-layout-2 .wpuf-mt-auto,
.wpuf-ud-list-layout-3 .wpuf-flex-shrink-0:last-child,
.wpuf-ud-list-layout-5 .wpuf-flex-shrink-0:last-child {
    margin-top: auto;
}

/* Maintain button padding and positioning */
.wpuf-ud-list-layout-3 .wpuf-flex-shrink-0:last-child,
.wpuf-ud-list-layout-5 .wpuf-flex-shrink-0:last-child {
    padding-top: 1rem;
}

/* Ensure consistent button spacing for layouts 4 and 6 */
.wpuf-ud-list-layout-4 .wpuf-mt-auto,
.wpuf-ud-list-layout-6 .wpuf-mt-auto {
    margin-top: auto !important;
    padding-top: 1rem !important;
}

/* Ensure button area doesn't collapse */
.wpuf-ud-list a[href*="profile"] {
    display: inline-flex !important;
    /* padding: 0.5rem 1rem !important; */
}

/* Optimize spacing for user info sections */
.wpuf-ud-list .wpuf-flex-col.wpuf-text-center > :first-child {
    margin-top: 0;
}

.wpuf-ud-list .wpuf-flex-col.wpuf-text-center > :last-child {
    margin-bottom: 0;
}

/* Compact spacing when minimal data is present */
.wpuf-ud-list li:has(p:empty) {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

/* Grid adjustments for responsive behavior */
@media (max-width: 768px) {
    .wpuf-ud-list-layout-2 ul,
    .wpuf-ud-list-layout-3 ul {
        gap: 1rem;
    }
    
    .wpuf-ud-list-layout-2 li,
    .wpuf-ud-list-layout-3 li,
    .wpuf-ud-list-layout-5 li {
        min-height: auto;
    }
}

/* Ensure consistent avatar spacing */
.wpuf-ud-list .wpuf-flex-shrink-0:has(img) {
    flex-shrink: 0;
}

/* Handle empty bio/description fields */
.wpuf-ud-list .wpuf-user-bio:empty {
    display: none !important;
}

/* Adjust content gaps when fields are missing */
.wpuf-ud-list .wpuf-flex-col:not(:has(p:not(:empty))) {
    gap: 0 !important;
}

/* Reduce excessive gaps in layout 4 and 6 */
.wpuf-ud-list-layout-4 li,
.wpuf-ud-list-layout-6 li {
    gap: 1rem !important;
}

/* Remove gap from user info container when empty */
.wpuf-ud-list-layout-4 .wpuf-flex-col.wpuf-text-center,
.wpuf-ud-list-layout-6 .wpuf-flex-col.wpuf-text-center {
    gap: 0.5rem !important;
}

/* Hide empty paragraphs to prevent gaps */
.wpuf-ud-list-layout-4 p:not(:has(a)),
.wpuf-ud-list-layout-6 p:not(:has(a)) {
    display: none;
}

/* Ensure proper spacing only for non-empty paragraphs */
.wpuf-ud-list-layout-4 p:has(a),
.wpuf-ud-list-layout-6 p:has(a) {
    margin-top: 0.25rem;
}

.wpuf-ud-list-layout-4 p:has(a):first-of-type,
.wpuf-ud-list-layout-6 p:has(a):first-of-type {
    margin-top: 0;
}

/* Dropdown menu z-index fix for table rows */
.wpuf-z-\[9999\] {
    z-index: 9999 !important;
}

/* Ensure table container doesn't create stacking context */
.wpuf-overflow-hidden {
    overflow: visible !important;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .wpuf-files-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 0.75rem;
    }

    .wpuf-file-item {
        padding: 0.75rem;
    }

    .wpuf-tab-item-content {
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .wpuf-post-meta,
    .wpuf-comment-meta {
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* File Tab Active State */
.wpuf-file-tab-btn.wpuf-file-tab-active {
    border-bottom-color: #6b7280 !important;
    color: #4b5563 !important;
}

.wpuf-file-tab-btn:not(.wpuf-file-tab-active) {
    border-bottom-color: transparent !important;
    color: #6b7280 !important;
}

.wpuf-file-tab-btn:not(.wpuf-file-tab-active):hover {
    color: #374151 !important;
    border-bottom-color: #d1d5db !important;
}

