/**
 * BHCNet Custom Styles - Clean & Targeted
 * Applies on top of bhcnet-ui-system.css without conflicts
 */

/* ==============================================
   1. GLOBAL - Rounded Buttons & Design System
   ============================================== */

button, .button, a.button,
input[type="submit"], input[type="button"],
.bb-primary-button, .bp-primary-action a,
.generic-button a, div.generic-button a,
.friendship-button a, .friendship-button button {
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

input[type="text"], input[type="email"],
input[type="password"], input[type="search"],
textarea, select {
    border-radius: 8px !important;
}

/* Primary CTA buttons */
#buddypress a.button,
#buddypress button:not(.dropdown-toggle),
.bp-primary-action a,
div.generic-button a,
.friendship-button a {
    background: linear-gradient(135deg, #14B8A6, #0D9488) !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    box-shadow: 0 2px 4px rgba(20,184,166,0.25) !important;
}

#buddypress a.button:hover,
#buddypress button:not(.dropdown-toggle):hover,
.bp-primary-action a:hover,
div.generic-button a:hover {
    background: linear-gradient(135deg, #0D9488, #0F766E) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(20,184,166,0.35) !important;
}

/* ==============================================
   2. MEMBERS PAGE LAYOUT
   ============================================== */

/* Members grid */
#members-list,
ul.members-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

@media (min-width: 640px) {
    #members-list, ul.members-list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 1024px) {
    #members-list, ul.members-list {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (min-width: 1280px) {
    #members-list, ul.members-list {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Member card */
#members-list li, ul.members-list li {
    background: white !important;
    border-radius: 12px !important;
    padding: 20px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    margin: 0 !important;
}

#members-list li:hover, ul.members-list li:hover {
    box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
    transform: translateY(-2px) !important;
}

/* Avatar circle */
#members-list .item-avatar img,
ul.members-list .item-avatar img,
img.avatar {
    border-radius: 50% !important;
}

/* ==============================================
   3. SEARCH BAR
   ============================================== */

.dir-search,
#search-members-form {
    margin-bottom: 24px !important;
}

.dir-search input[type="search"],
.dir-search input[type="text"],
#members_search {
    width: 100% !important;
    padding: 14px 20px 14px 50px !important;
    font-size: 16px !important;
    border: 2px solid #E5E7EB !important;
    border-radius: 12px !important;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M11 19A8 8 0 1 0 11 3a8 8 0 0 0 0 16zM21 21l-4.35-4.35' stroke='%2314B8A6' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 14px center !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
    transition: all 0.2s ease !important;
}

.dir-search input:focus,
#members_search:focus {
    outline: none !important;
    border-color: #14B8A6 !important;
    box-shadow: 0 0 0 3px rgba(20,184,166,0.15) !important;
}

/* Filter tabs */
.item-list-tabs ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
}

.item-list-tabs ul li { margin: 0 !important; }

.item-list-tabs ul li a {
    display: inline-flex !important;
    padding: 8px 16px !important;
    background: white !important;
    border: 2px solid #E5E7EB !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #6B7280 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.item-list-tabs ul li a:hover {
    border-color: #14B8A6 !important;
    color: #0F766E !important;
    background: #F0FDFA !important;
}

.item-list-tabs ul li.selected a,
.item-list-tabs ul li.current a {
    background: #14B8A6 !important;
    border-color: #14B8A6 !important;
    color: white !important;
}

/* ==============================================
   4. MOBILE RESPONSIVE - Safe Rules Only
   ============================================== */

@media (max-width: 639px) {
    /* Stack items on mobile */
    #members-list, ul.members-list {
        grid-template-columns: 1fr !important;
    }

    /* Larger tap targets */
    button, .button, a.button,
    input[type="submit"] {
        min-height: 44px !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
    }

    input[type="text"], input[type="search"],
    input[type="email"], select, textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
        min-height: 44px !important;
    }

    /* Reduce padding on mobile */
    #buddypress,
    .bp-wrap {
        padding: 0 12px !important;
    }
}

/* ==============================================
   5. DROPDOWN / KEBAB MENU
   ============================================== */

.action-menu,
.more-actions,
.generic-button {
    position: relative !important;
}

.action-menu ul,
.more-actions ul,
.activity-meta ul {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    right: 0 !important;
    background: white !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
    min-width: 180px !important;
    padding: 6px !important;
    z-index: 9999 !important;
    display: none !important;
    list-style: none !important;
}

.action-menu.open ul,
.more-actions.open ul,
.activity-meta.open ul {
    display: block !important;
}

.action-menu ul li a,
.more-actions ul li a,
.activity-meta ul li a {
    display: block !important;
    padding: 10px 14px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    color: #374151 !important;
    text-decoration: none !important;
    transition: background 0.15s !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.action-menu ul li a:hover,
.more-actions ul li a:hover {
    background: #F0FDFA !important;
    color: #0F766E !important;
    transform: none !important;
}

/* ==============================================
   6. SELECT DROPDOWNS - Fix Text Cutoff
   ============================================== */

select,
#members-order-by,
.bp-select-filter {
    height: auto !important;
    min-height: 44px !important;
    padding: 10px 36px 10px 14px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    border: 2px solid #E5E7EB !important;
    border-radius: 8px !important;
    background-color: white !important;
    color: #374151 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%236B7280' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    cursor: pointer !important;
}

/* ==============================================
   7. LOADING SKELETON
   ============================================== */

@keyframes shimmer {
    0% { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

.skeleton-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.skeleton-pulse {
    border-radius: 4px;
    background: linear-gradient(90deg, #F3F4F6 25%, #E5E7EB 50%, #F3F4F6 75%);
    background-size: 600px 100%;
    animation: shimmer 1.5s infinite linear;
}

/* Fade in for member cards */
#members-list li {
    animation: fadeUp 0.3s ease both;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

#members-list li:nth-child(1) { animation-delay: 0.03s; }
#members-list li:nth-child(2) { animation-delay: 0.06s; }
#members-list li:nth-child(3) { animation-delay: 0.09s; }
#members-list li:nth-child(4) { animation-delay: 0.12s; }
#members-list li:nth-child(5) { animation-delay: 0.15s; }
#members-list li:nth-child(6) { animation-delay: 0.18s; }
#members-list li:nth-child(7) { animation-delay: 0.21s; }
#members-list li:nth-child(8) { animation-delay: 0.24s; }