/* =========================================================
   FOLLO BuddyPress member-area components
   Notifications, Messages, Friends and Groups.
   Supports Nouveau + older BuddyPress template markup.
   ========================================================= */

/* ---------- Secondary member navigation ---------- */
body.follo-ui .buddypress-wrap .bp-subnavs,
body.follo-ui .buddypress-wrap .bp-navs,
body.follo-ui #buddypress .item-list-tabs,
body.buddypress .buddypress-wrap .bp-subnavs {
    margin-bottom: 22px;
}

/* ---------- Filters / toolbar ---------- */
body.follo-ui .buddypress-wrap .subnav-filters,
body.follo-ui .buddypress-wrap .bp-list-filters,
body.follo-ui .buddypress-wrap .notifications-options-nav,
body.follo-ui #buddypress .notifications-options-nav,
body.follo-ui #buddypress .messages-options-nav,
body.follo-ui #buddypress .item-list-tabs#subnav + .item-list-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0 0 18px;
}

body.follo-ui .buddypress-wrap .subnav-filters select,
body.follo-ui .buddypress-wrap .bp-list-filters select,
body.follo-ui #buddypress .notifications-options-nav select,
body.follo-ui #buddypress .messages-options-nav select,
body.follo-ui #buddypress select[name="notification-filter"],
body.follo-ui #buddypress select[name="members-order-by"],
body.follo-ui #buddypress select[name="groups-order-by"] {
    width: auto;
    min-width: 190px;
    min-height: 42px;
    margin: 0;
    padding: 8px 38px 8px 12px;
    border: 1px solid var(--follo-border);
    border-radius: var(--follo-radius);
    background-color: #fff;
    color: var(--follo-text);
    box-shadow: var(--follo-shadow-sm);
}

/* ---------- Notifications list/table ---------- */
body.follo-ui .buddypress-wrap table.notifications,
body.follo-ui #buddypress table.notifications,
body.follo-ui #buddypress #notifications-bulk-management table {
    width: 100%;
    margin: 8px 0 12px;
    border: 1px solid var(--follo-border-light);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--follo-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--follo-shadow-sm);
}

body.follo-ui .buddypress-wrap table.notifications th,
body.follo-ui .buddypress-wrap table.notifications td,
body.follo-ui #buddypress table.notifications th,
body.follo-ui #buddypress table.notifications td {
    padding: 13px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--follo-border-light) !important;
    vertical-align: middle;
}

body.follo-ui .buddypress-wrap table.notifications thead th,
body.follo-ui #buddypress table.notifications thead th {
    background: var(--follo-surface-soft);
    color: #475569;
    font-size: 13px;
    font-weight: 750;
}

body.follo-ui .buddypress-wrap table.notifications tbody tr:last-child td,
body.follo-ui #buddypress table.notifications tbody tr:last-child td {
    border-bottom: 0 !important;
}

body.follo-ui .buddypress-wrap table.notifications tbody tr:hover td,
body.follo-ui #buddypress table.notifications tbody tr:hover td {
    background: #fbfdff;
}

body.follo-ui .buddypress-wrap table.notifications .notification-description a,
body.follo-ui #buddypress table.notifications .notification-description a {
    color: var(--follo-primary);
    font-weight: 600;
}

body.follo-ui .buddypress-wrap table.notifications .notification-actions,
body.follo-ui #buddypress table.notifications .notification-actions {
    white-space: nowrap;
}

body.follo-ui .buddypress-wrap table.notifications input[type="checkbox"],
body.follo-ui #buddypress table.notifications input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
}

/* Notifications pagination/count */
body.follo-ui .buddypress-wrap .bp-pagination,
body.follo-ui #buddypress .pagination {
    margin: 8px 0;
    color: var(--follo-text-muted);
    font-size: 12px;
}

/* Bulk Actions + Apply: prevent clipped select text and add clear gap. */
body.follo-ui .buddypress-wrap .notifications-options-nav,
body.follo-ui #buddypress .notifications-options-nav,
body.follo-ui #buddypress #notifications-bulk-management .notifications-options-nav {
    justify-content: flex-start;
    gap: 12px !important;
    margin-top: 12px;
}

body.follo-ui .buddypress-wrap .notifications-options-nav select,
body.follo-ui #buddypress .notifications-options-nav select,
body.follo-ui #buddypress #notification-bulk-manage {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 150px !important;
    min-height: 44px !important;
    padding: 9px 38px 9px 12px !important;
    line-height: 1.3 !important;
    overflow: visible !important;
}

body.follo-ui .buddypress-wrap .notifications-options-nav input[type="submit"],
body.follo-ui #buddypress .notifications-options-nav input[type="submit"],
body.follo-ui #buddypress #notification-bulk-manage-submit {
    flex: 0 0 auto;
    min-width: 92px;
    margin: 0 !important;
}

/* ---------- Messages ---------- */
/* Remove stray list bullets from BuddyPress message filter/search wrappers. */
body.follo-ui .buddypress-wrap .bp-messages-filters ul,
body.follo-ui .buddypress-wrap .bp-messages-filters li,
body.follo-ui .buddypress-wrap .subnav-filters ul,
body.follo-ui .buddypress-wrap .subnav-filters li,
body.follo-ui #buddypress .messages-options-nav ul,
body.follo-ui #buddypress .messages-options-nav li,
body.follo-ui #buddypress #message-threads,
body.follo-ui #buddypress #message-threads > li {
    list-style: none !important;
}

body.follo-ui .buddypress-wrap .bp-messages-filters ul,
body.follo-ui .buddypress-wrap .subnav-filters ul,
body.follo-ui #buddypress .messages-options-nav ul {
    margin: 0 !important;
    padding: 0 !important;
}

body.follo-ui .buddypress-wrap .bp-messages-filters li,
body.follo-ui .buddypress-wrap .subnav-filters li,
body.follo-ui #buddypress .messages-options-nav li {
    margin: 0 !important;
    padding: 0 !important;
}

body.follo-ui .buddypress-wrap .bp-messages-search-form,
body.follo-ui #buddypress .message-search,
body.follo-ui #buddypress #search-message-form {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 18px auto;
    max-width: 360px;
}

body.follo-ui .buddypress-wrap .bp-messages-search-form input[type="search"],
body.follo-ui #buddypress #search-message-form input[type="text"],
body.follo-ui #buddypress #search-message-form input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    margin: 0 !important;
}

body.follo-ui .buddypress-wrap .bp-messages-search-form button,
body.follo-ui #buddypress #search-message-form input[type="submit"],
body.follo-ui #buddypress #search-message-form button {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px;
}

/* ---------- Friends / Groups ---------- */
body.follo-ui .buddypress-wrap .members-type-navs + .subnav-filters,
body.follo-ui .buddypress-wrap .groups-type-navs + .subnav-filters,
body.follo-ui #buddypress #members-order-select,
body.follo-ui #buddypress #groups-order-select {
    margin-bottom: 18px;
}

/* General member/group list card cleanup */
body.follo-ui .buddypress-wrap ul.bp-list,
body.follo-ui #buddypress ul.item-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.follo-ui .buddypress-wrap ul.bp-list > li,
body.follo-ui #buddypress ul.item-list > li {
    border-bottom: 1px solid var(--follo-border-light);
}

/* ---------- AJAX loading/empty notices ---------- */
/* Nouveau commonly renders these as .bp-feedback with nested .bp-icon.
   Force FOLLO styling after BuddyPress/Divi CSS. */
body.follo-ui .buddypress-wrap .bp-feedback,
body.buddypress .buddypress-wrap .bp-feedback,
body.follo-ui #buddypress .bp-feedback,
body.follo-ui #buddypress .bp-template-notice,
body.follo-ui #buddypress div#message {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    min-height: 0 !important;
    margin: 14px 0 20px !important;
    padding: 13px 15px !important;
    border: 1px solid #dbe5f0 !important;
    border-left: 4px solid #64748b !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    color: #475569 !important;
    box-shadow: none !important;
    line-height: 1.5 !important;
    overflow: hidden !important;
}

body.follo-ui .buddypress-wrap .bp-feedback .bp-icon,
body.buddypress .buddypress-wrap .bp-feedback .bp-icon,
body.follo-ui #buddypress .bp-feedback .bp-icon,
body.follo-ui #buddypress .bp-template-notice .bp-icon,
body.follo-ui #buddypress div#message .bp-icon {
    display: none !important;
}

body.follo-ui .buddypress-wrap .bp-feedback p,
body.buddypress .buddypress-wrap .bp-feedback p,
body.follo-ui #buddypress .bp-feedback p,
body.follo-ui #buddypress .bp-template-notice p,
body.follo-ui #buddypress div#message p {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
}

/* Loading gets a refined amber status, not the legacy yellow icon strip. */
body.follo-ui .buddypress-wrap .bp-feedback.loading,
body.buddypress .buddypress-wrap .bp-feedback.loading,
body.follo-ui #buddypress .bp-feedback.loading,
body.follo-ui #buddypress .bp-template-notice.loading {
    border-color: #fde7b1 !important;
    border-left-color: #f59e0b !important;
    background: #fffbeb !important;
    color: #854d0e !important;
}

/* Information / empty result */
body.follo-ui .buddypress-wrap .bp-feedback.info,
body.buddypress .buddypress-wrap .bp-feedback.info,
body.follo-ui #buddypress .bp-feedback.info,
body.follo-ui #buddypress .bp-template-notice.info {
    border-color: #bae6fd !important;
    border-left-color: #0284c7 !important;
    background: #f0f9ff !important;
    color: #075985 !important;
}

/* Decorative status dot. */
body.follo-ui .buddypress-wrap .bp-feedback::before,
body.buddypress .buddypress-wrap .bp-feedback::before,
body.follo-ui #buddypress .bp-feedback::before,
body.follo-ui #buddypress .bp-template-notice::before {
    content: "" !important;
    display: block !important;
    flex: 0 0 8px !important;
    width: 8px !important;
    height: 8px !important;
    margin: .45em 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: currentColor !important;
    opacity: .65 !important;
}

@media (max-width: 767px) {
    body.follo-ui .buddypress-wrap .subnav-filters,
    body.follo-ui .buddypress-wrap .notifications-options-nav,
    body.follo-ui #buddypress .notifications-options-nav {
        justify-content: stretch;
    }

    body.follo-ui .buddypress-wrap .subnav-filters select,
    body.follo-ui .buddypress-wrap .notifications-options-nav select,
    body.follo-ui #buddypress .notifications-options-nav select {
        width: 100% !important;
        min-width: 0 !important;
    }

    body.follo-ui .buddypress-wrap table.notifications,
    body.follo-ui #buddypress table.notifications {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.follo-ui .buddypress-wrap .notifications-options-nav,
    body.follo-ui #buddypress .notifications-options-nav {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px !important;
    }

    body.follo-ui .buddypress-wrap .notifications-options-nav input[type="submit"],
    body.follo-ui #buddypress .notifications-options-nav input[type="submit"] {
        width: 100%;
    }

    body.follo-ui .buddypress-wrap .bp-messages-search-form,
    body.follo-ui #buddypress #search-message-form {
        width: 100%;
        max-width: none;
    }
}

/* =========================================================
   v1.7 - Native BuddyPress select polish
   ========================================================= */

/* BuddyPress/Nouveau wraps many selects in .select-wrap. Remove the
   extra wrapper border/arrow box and let the select itself be the control. */
body.follo-ui .buddypress-wrap .select-wrap,
body.follo-ui #buddypress .select-wrap,
body.follo-ui .buddypress-wrap .select-wrap:hover,
body.follo-ui #buddypress .select-wrap:hover {
	position: relative;
	width: auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	overflow: visible !important;
}

body.follo-ui .buddypress-wrap .select-wrap::before,
body.follo-ui .buddypress-wrap .select-wrap::after,
body.follo-ui #buddypress .select-wrap::before,
body.follo-ui #buddypress .select-wrap::after {
	display: none !important;
	content: none !important;
}

/* Filters: clean, borderless soft controls with one integrated chevron. */
body.follo-ui .buddypress-wrap .subnav-filters select,
body.follo-ui .buddypress-wrap .bp-list-filters select,
body.follo-ui #buddypress select[name="notification-filter"],
body.follo-ui #buddypress select[name="members-order-by"],
body.follo-ui #buddypress select[name="groups-order-by"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	min-height: 42px !important;
	padding: 9px 38px 9px 14px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background-color: #f8fafc !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 13px center !important;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important;
	color: var(--follo-text) !important;
	cursor: pointer;
}

body.follo-ui .buddypress-wrap .subnav-filters select:focus,
body.follo-ui .buddypress-wrap .bp-list-filters select:focus,
body.follo-ui #buddypress select[name="notification-filter"]:focus,
body.follo-ui #buddypress select[name="members-order-by"]:focus,
body.follo-ui #buddypress select[name="groups-order-by"]:focus {
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(11, 111, 211, .12) !important;
}

/* Notifications top filter. */
body.follo-ui #buddypress select[name="notification-filter"],
body.follo-ui .buddypress-wrap select[name="notification-filter"] {
	width: 220px !important;
	min-width: 220px !important;
}

/* Friends/Groups ordering controls. */
body.follo-ui #buddypress select[name="members-order-by"],
body.follo-ui .buddypress-wrap select[name="members-order-by"],
body.follo-ui #buddypress select[name="groups-order-by"],
body.follo-ui .buddypress-wrap select[name="groups-order-by"] {
	width: 158px !important;
	min-width: 158px !important;
}

/* Bulk Actions: no outer border, no cutoff, no detached arrow box. */
body.follo-ui .buddypress-wrap .notifications-options-nav .select-wrap,
body.follo-ui #buddypress .notifications-options-nav .select-wrap {
	flex: 0 0 180px !important;
	width: 180px !important;
	min-width: 180px !important;
	overflow: visible !important;
}

body.follo-ui .buddypress-wrap .notifications-options-nav select,
body.follo-ui #buddypress .notifications-options-nav select,
body.follo-ui #buddypress #notification-bulk-manage {
	appearance: none !important;
	-webkit-appearance: none !important;
	box-sizing: border-box !important;
	width: 180px !important;
	min-width: 180px !important;
	max-width: 180px !important;
	height: 42px !important;
	min-height: 42px !important;
	margin: 0 !important;
	padding: 9px 38px 9px 14px !important;
	border: 0 !important;
	border-radius: 10px !important;
	background-color: #f8fafc !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 13px center !important;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .05) !important;
	line-height: 1.2 !important;
	text-indent: 0 !important;
	text-overflow: clip !important;
	white-space: nowrap !important;
	overflow: visible !important;
}

/* Let BuddyPress action tooltips escape the rounded notification table. */
body.follo-ui .buddypress-wrap table.notifications,
body.follo-ui #buddypress table.notifications,
body.follo-ui #buddypress #notifications-bulk-management table,
body.follo-ui .buddypress-wrap table.notifications .notification-actions,
body.follo-ui #buddypress table.notifications .notification-actions {
	overflow: visible !important;
}

body.follo-ui .buddypress-wrap table.notifications .notification-actions a,
body.follo-ui #buddypress table.notifications .notification-actions a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	min-height: 28px;
}

/* Data Export: explicit class added by follo-ui.js avoids relying on
   BuddyPress wrapper names that vary between versions. */
body.follo-ui .follo-data-export-action {
	margin-left: 0 !important;
	padding-left: 0 !important;
	margin-bottom: 0 !important;
}

body.follo-ui .follo-data-erase-heading {
	clear: both;
	margin-top: 56px !important;
}