/* ─────────────────────────────────────────────────────────────────────────
   CitCom. User Insights – Admin Styles
   ───────────────────────────────────────────────────────────────────────── */

/* ── Layout ---------------------------------------------------------------- */
.cui-wrap {
	--cui-primary:   #2b1a3c;
	--cui-accent:    #9ad14d;
	--cui-teal:      #17a398;
	--cui-success:   #00a32a;
	--cui-warning:   #dba617;
	--cui-danger:    #d63638;
	--cui-border:    #c3c4c7;
	--cui-bg:        #f6f7f7;
	--cui-card-bg:   #fff;
	--cui-radius:    6px;
	--cui-shadow:    0 1px 3px rgba(0,0,0,.08);
}

/* ── WC product list Insights column button ------------------------------- */
.column-cui_insights {
	text-align: left;
}
.cui-wc-insights-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: transparent;
	color: #2271b1 !important;
	border: 1px solid #2271b1;
	border-radius: 4px;
	padding: 3px 7px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s, border-color .15s, color .15s;
}
.cui-wc-insights-btn:hover,
.cui-wc-insights-btn:focus {
	background: #f0f6fc;
	border-color: #135e96;
	color: #135e96 !important;
	outline: none;
}
.cui-wc-insights-btn .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 1;
	color: currentColor;
}
.cui-wc-insights-count {
	color: currentColor;
}

/* ── Branded page header --------------------------------------------------- */
.cui-brand-header {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #2b1a3c;
	border-radius: var(--cui-radius);
	padding: 14px 24px;
	margin: 12px 0 24px;
	box-shadow: 0 2px 8px rgba(43,26,60,.25);
}

.cui-brand-header .cui-brand-logo {
	height: 36px;
	width: auto;
	flex-shrink: 0;
}

.cui-brand-header .cui-brand-divider {
	width: 1px;
	height: 28px;
	background: rgba(154,209,77,.35);
	flex-shrink: 0;
}

.cui-brand-header .cui-brand-title {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.cui-brand-header .cui-brand-title strong {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	line-height: 1.2;
	letter-spacing: .01em;
}

.cui-brand-header .cui-brand-title span {
	font-size: 11px;
	color: #9ad14d;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 500;
}

.cui-brand-header .cui-brand-spacer {
	flex: 1;
}

.cui-brand-header .cui-brand-badge {
	background: rgba(154,209,77,.15);
	border: 1px solid rgba(154,209,77,.4);
	color: #9ad14d;
	border-radius: 4px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.cui-brand-icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	color: #9ad14d;
	margin-right: 4px;
}

.cui-brand-icon svg {
	height: 22px;
	width: auto;
	fill: currentColor;
}

/* ── Profile mini-nav (back / edit buttons) -------------------------------- */
.cui-profile-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

/* ── Stats row ------------------------------------------------------------- */
.cui-stats-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 20px 0 24px;
}

.cui-wrap .column-user {
    width: 15%;
}

.cui-wrap .column-email {
    width: 15%;
}

.cui-wrap .column-role {
    width: unset;
}

.column-user.has-row-actions {
    white-space: nowrap;
}

.cui-user-cell {
    display: flex;
    gap: 12px;
}

.cui-user-cell .cui-avatar {
    border-radius: 50%;
    margin-top: 5px;
}

.cui-user-cell .button {
    margin-top: 6px;
}

.cui-stat-card {
	background: var(--cui-card-bg);
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius);
	box-shadow: var(--cui-shadow);
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 180px;
	flex: 1;
}

.cui-stat-card.small {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	min-width: 120px;
	flex: 0 1 auto;
	padding: 12px 16px;
}

.cui-stat-card.wc {
	border-top: 3px solid var(--cui-teal);
}

.cui-stat-icon {
	font-size: 28px;
	width: 28px;
	height: 28px;
	color: var(--cui-accent);
	flex-shrink: 0;
}

.cui-stat-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cui-stat-value {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.1;
	color: #1d2327;
}

.cui-stat-card.small .cui-stat-value {
	font-size: 20px;
}

.cui-stat-label {
	font-size: 12px;
    line-height: 14px;
	color: #646970;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ── Breadcrumb (legacy — kept for compat) --------------------------------- */
.cui-breadcrumb {
	margin: 8px 0 16px;
	font-size: 13px;
	color: #50575e;
}

.cui-breadcrumb a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	text-decoration: none;
}

.cui-profile-header {
	display: flex;
	align-items: center;
	gap: 20px;
	background: #fff;
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius);
	padding: 20px 24px;
	margin-bottom: 20px;
	box-shadow: var(--cui-shadow);
}

.cui-avatar-lg img,
.cui-avatar-lg {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	flex-shrink: 0;
}

.cui-profile-identity h1 {
	margin: 0 0 4px;
	font-size: 22px;
	line-height: 1.2;
}

.cui-profile-meta {
	margin: 0;
	color: #50575e;
	font-size: 13px;
}

.cui-dot {
	margin: 0 6px;
	opacity: .4;
}

.cui-role-badge {
	background: #f0f0f1;
	border: 1px solid #c3c4c7;
	border-radius: 3px;
	padding: 1px 7px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.cui-wishlist-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	background: #fff5f7;
	border: 1px solid #f5a0b0;
	border-radius: 3px;
	padding: 1px 7px;
	font-size: 12px;
	font-weight: 600;
	color: #c0365a;
}

/* ── Tabs ------------------------------------------------------------------ */
.cui-tabs {
	display: flex;
	gap: 0;
	border-bottom: 2px solid var(--cui-border);
	margin-bottom: 20px;
}

.cui-tab {
	display: inline-block;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 500;
	color: #50575e;
	text-decoration: none;
	border: 2px solid transparent;
	border-bottom: none;
	border-radius: var(--cui-radius) var(--cui-radius) 0 0;
	margin-bottom: -2px;
	transition: color .15s;
}

.cui-tab:hover {
	color: var(--cui-primary);
}

.cui-tab.active {
	color: var(--cui-primary);
	background: #fff;
	border-color: var(--cui-border);
	border-bottom-color: #fff;
	border-top: 3px solid var(--cui-accent);
	padding-top: 8px;
}

/* ── Tab content ----------------------------------------------------------- */
.cui-tab-content {
	background: #fff;
	border: 1px solid var(--cui-border);
	border-radius: 0 var(--cui-radius) var(--cui-radius) var(--cui-radius);
	padding: 24px;
	box-shadow: var(--cui-shadow);
}

.cui-two-col {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 24px;
}

@media (max-width: 1100px) {
	.cui-two-col {
		grid-template-columns: 1fr;
	}
}

/* ── Table helpers --------------------------------------------------------- */
.cui-avatar img {
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 6px;
}

.cui-user-link {
	text-decoration: none;
	color: #1d2327;
}

.cui-user-link:hover {
	color: var(--cui-primary);
}

.cui-muted {
	color: #8c8f94;
	font-size: 12px;
}

.cui-empty {
	color: #8c8f94;
	font-style: italic;
	padding: 12px 0;
}

/* ── Badges ---------------------------------------------------------------- */
.cui-badge {
	display: inline-block;
	background: #f0f0f1;
	border: 1px solid #c3c4c7;
	border-radius: 3px;
	padding: 1px 6px;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .04em;
	vertical-align: middle;
	margin-left: 4px;
}

.cui-badge.danger {
	background: #fce8e8;
	border-color: #f0a3a3;
	color: #8f1f1f;
}

.cui-status-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 11px;
	background: #e6f3e6;
	color: #165816;
}

/* ── Notices --------------------------------------------------------------- */
.cui-notice-info {
	background: #f0faf9;
	border-left: 4px solid var(--cui-teal);
	padding: 12px 16px;
	border-radius: 0 4px 4px 0;
	margin: 0;
}

/* ── Wishlist grid --------------------------------------------------------- */
.cui-wishlist-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
	margin-top: 12px;
}

.cui-wishlist-item {
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius);
	overflow: hidden;
	background: #fff;
	transition: box-shadow .15s;
}

.cui-wishlist-item:hover {
	box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

.cui-wishlist-item.out-of-stock {
	opacity: .7;
}

.cui-wishlist-item img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	display: block;
}

.cui-wishlist-info {
	padding: 10px 12px;
}

.cui-wishlist-info a {
	text-decoration: none;
	color: #1d2327;
	font-size: 13px;
	line-height: 1.3;
	display: block;
	margin-bottom: 4px;
}

.cui-wishlist-info a:hover {
	color: var(--cui-primary);
}

.cui-wishlist-price {
	font-weight: 600;
	color: #1d2327;
	font-size: 13px;
}

/* ── CRM Notes ------------------------------------------------------------- */
.cui-add-note-form {
	margin-bottom: 20px;
}

.cui-add-note-form textarea {
	display: block;
	width: 100%;
	margin-bottom: 8px;
	resize: vertical;
}

.cui-note-item {
	background: #fafafa;
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius);
	padding: 14px 16px;
	margin-bottom: 12px;
	position: relative;
}

.cui-note-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 12px;
	margin-bottom: 8px;
	color: #50575e;
}

/* ── Profile card (Notes tab sidebar) ------------------------------------- */
.cui-profile-card {
	background: #fff;
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius);
	box-shadow: var(--cui-shadow);
	overflow: hidden;
}

.cui-profile-card-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	background: var(--cui-primary);
	color: #fff;
}

.cui-profile-card-avatar {
	border-radius: 50%;
	flex-shrink: 0;
	border: 2px solid rgba(255,255,255,.45);
}

.cui-profile-card-name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	line-height: 1.3;
}

.cui-profile-card-company {
	display: block;
	font-size: 12px;
	color: rgba(255,255,255,.82);
	margin-top: 1px;
}

.cui-profile-card-role {
	display: inline-block;
	margin-top: 4px;
	font-size: 11px;
	font-weight: 500;
	background: rgba(255,255,255,.2);
	color: #fff;
	border-radius: 20px;
	padding: 1px 8px;
	letter-spacing: .3px;
}

.cui-profile-card-section {
	padding: 14px 20px;
	border-bottom: 1px solid var(--cui-border);
}

.cui-profile-card-section:last-of-type {
	border-bottom: none;
}

.cui-profile-card-section h4 {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: #8c8f94;
}

.cui-profile-card-dl {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 6px 10px;
	align-items: start;
	margin: 0;
}

.cui-profile-card-dl dt {
	margin: 0;
	color: #8c8f94;
	line-height: 1.5;
}

.cui-profile-card-dl dt .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
}

.cui-profile-card-dl dd {
	margin: 0;
	font-size: 13px;
	color: #1d2327;
	word-break: break-all;
	line-height: 1.5;
}

.cui-profile-card-dl dd a {
	color: var(--cui-primary);
	text-decoration: none;
}

.cui-profile-card-dl dd a:hover {
	text-decoration: underline;
}

.cui-profile-card-address {
	font-size: 13px;
	font-style: normal;
	color: #1d2327;
	line-height: 1.8;
	margin: 0;
}

.cui-profile-card-footer {
	padding: 14px 20px;
	border-top: 1px solid var(--cui-border);
	background: #f9f9f9;
}

.cui-profile-card-footer .button .dashicons {
	vertical-align: middle;
	font-size: 14px;
	width: 14px;
	height: 14px;
	margin-right: 2px;
}

.cui-note-meta strong {
	color: #1d2327;
}

.cui-note-text {
	font-size: 14px;
	line-height: 1.6;
	color: #1d2327;
}

.cui-note-edit-area {
	margin-top: 10px;
}

.cui-note-edit-area textarea {
	width: 100%;
	margin-bottom: 6px;
	resize: vertical;
}

.cui-note-delete,
.cui-note-edit {
	background: none !important;
	border: none !important;
	cursor: pointer;
	color: #8c8f94 !important;
	padding: 0 !important;
	line-height: 1 !important;
	font-size: 16px !important;
	transition: color .15s;
	margin-left: auto;
}

.cui-note-delete:hover { color: var(--cui-danger) !important; }
.cui-note-edit:hover   { color: var(--cui-primary) !important; }

/* ── Filters --------------------------------------------------------------- */
.cui-filters select {
	margin-right: 6px;
}

/* ── Scrollable table container ------------------------------------------- */
.cui-table-scroll {
	max-height: 360px;
	overflow-y: auto;
	border: 1px solid var(--cui-border);
	border-radius: var(--cui-radius);
}

.cui-table-scroll table {
	border: none;
	box-shadow: none;
}

.cui-table-scroll thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background: #f6f7f7;
	box-shadow: 0 1px 0 var(--cui-border);
}

/* ── WordPress table overrides -------------------------------------------- */
.cui-wrap .wp-list-table th,
.cui-wrap .wp-list-table td {
	vertical-align: middle;
}

/* ── Tablenav / pagination overrides (WP floats these by default) --------- */
.cui-pagination-row .tablenav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: auto;
	margin: 8px 0;
	padding: 2px 0;
	clear: both;
}

.cui-pagination-row .tablenav-pages {
	float: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 6px;
	height: auto;
	margin: 0;
	font-size: 13px;
}

.cui-pagination-row .tablenav-pages .displaying-num {
	color: #50575e;
	font-style: italic;
	margin: 0;
}

.cui-pagination-row .tablenav-pages .pagination-links {
	display: flex;
	align-items: center;
	gap: 3px;
}

.cui-pagination-row .tablenav-pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	min-height: 30px;
	padding: 0 8px;
	font-size: 13px;
	line-height: 1;
	color: #2271b1;
	text-decoration: none;
	background: #f6f7f7;
	border: 1px solid #8c8f94;
	border-radius: 3px;
	box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

.cui-pagination-row .tablenav-pages .page-numbers.current {
	background: #2271b1;
	border-color: #2271b1;
	color: #fff;
	box-shadow: none;
}

.cui-pagination-row .tablenav-pages .page-numbers.dots {
	background: none;
	border: none;
	box-shadow: none;
	min-width: auto;
	color: #50575e;
}

.cui-pagination-row .tablenav-pages .page-numbers:not(.dots):hover,
.cui-pagination-row .tablenav-pages .page-numbers:not(.current):focus {
	background: #f0f0f1;
	border-color: #2271b1;
	color: #2271b1;
	outline: 2px solid transparent;
}

.cui-pagination-row .tablenav-pages.one-page .pagination-links {
	display: none;
}

/* ── Product list: filter row --------------------------------------------- */
.cui-filters-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
}

.cui-quick-filters {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.cui-filters-row .cui-search-form {
	flex: 1;
	margin: 0;
}

.cui-filters-row .cui-search-form .search-box {
	margin: 0;
	padding: 0;
}

/* ── Product list: column widths ------------------------------------------ */
.cui-product-table .column-thumb {
	width: 52px;
}

.cui-product-table .column-thumb img {
	display: block;
}

.cui-product-table .column-sku {
	width: 120px;
}

.cui-product-table .column-views,
.cui-product-table .column-unique-viewers,
.cui-product-table .column-purchases,
.cui-product-table .column-revenue,
.cui-product-table .column-wishlists {
	width: 90px;
}

.cui-product-table .column-last-viewed {
	width: 120px;
}

.cui-product-table .column-actions {
	width: 110px;
}

/* ── Freemium: upgrade notice ──────────────────────────────────────────────── */

.cui-upgrade-notice {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fdf8ff;
	border: 1px solid #c9a9e0;
	border-left: 4px solid var(--cui-primary, #2b1a3c);
	border-radius: var(--cui-radius, 6px);
	padding: 14px 18px;
	margin: 20px 0;
	font-size: 14px;
	color: #333;
}

.cui-upgrade-notice .dashicons {
	color: var(--cui-primary, #2b1a3c);
	font-size: 20px;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.cui-upgrade-notice .button-primary {
	margin-left: auto;
	white-space: nowrap;
	background: var(--cui-primary, #2b1a3c);
	border-color: var(--cui-primary, #2b1a3c);
}

.cui-upgrade-notice .button-primary:hover {
	background: #3d2755;
	border-color: #3d2755;
}

/* Mark [Pro] tabs with a subtle badge colour */
.cui-tab:not(.active)[href*="tab=woocommerce"][href$="[Pro]"],
.cui-tabs a.cui-tab:not(.active) {
	/* no-op: visual difference handled by [Pro] text label */
}