/**
 * File: assets/css/mbs-admin-social-links.css
 *
 * Admin styles for the add-as-you-go social platform UI — Sprint SOCIAL-LINKS.
 * Loaded only on the Authors tab (enqueued by MBS_Tab_Authors::enqueue()).
 *
 * BEM-style classes:
 *   .mbs-author-social-section          — section wrapper
 *   .mbs-social-sortable                — jQuery UI Sortable list
 *   .mbs-social-row                     — one added-platform row
 *   .mbs-drag-handle                    — grip icon (canonical shared class)
 *   .mbs-social-icon                    — abbreviation badge
 *   .mbs-social-icon-{slug}             — per-platform color (see below)
 *   .mbs-social-row-label               — platform name text
 *   .mbs-social-url-input               — URL text field
 *   .mbs-social-custom-label-input      — custom platform name field
 *   .mbs-social-remove-btn              — remove (x) button
 *   .mbs-social-empty-state             — shown when list is empty
 *   .mbs-social-picker-wrapper          — collapsible <details>
 *   .mbs-social-picker-toggle           — <summary> / toggle button
 *   .mbs-social-picker                  — picker inner container
 *   .mbs-social-picker-search           — search input
 *   .mbs-social-picker-group            — one group (Global / Regional / Other)
 *   .mbs-social-picker-group-label      — group heading text
 *   .mbs-social-picker-buttons          — flex wrap of platform buttons
 *   .mbs-social-picker-btn              — individual platform button
 *   .mbs-social-picker-btn--added       — state: already in the list
 *   .mbs-social-picker-btn--custom      — Other / Custom button
 */

/* ── Section wrapper ─────────────────────────────────────────────────────── */
.mbs-author-social-section {
	margin-top: 18px;
}

.mbs-author-social-section h4 {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: #1d2327;
}

/* ── Sortable list ───────────────────────────────────────────────────────── */
.mbs-social-sortable {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
}

.mbs-social-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	margin-bottom: 4px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 3px;
}

/* Drag placeholder — .mbs-sortable-placeholder rules live in mbs-sortable.css. */

/* ── Drag handle — context override for social rows ─────────────────────── */
/*
 * Base rules (.mbs-drag-handle cursor, color, flex-shrink) live in mbs-sortable.css.
 * These overrides apply the social-row-specific 16px icon size.
 */
.mbs-social-row .mbs-drag-handle {
	font-size: 16px;
	line-height: 1;
	padding: 0 2px;
	color: #999;
}

/* ── Icon badge ──────────────────────────────────────────────────────────── */
.mbs-social-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0;
	color: #fff;
	background: #646970; /* default gray */
}

/* Per-platform colors */
.mbs-social-icon-facebook      { background: #1877f2; }
.mbs-social-icon-instagram     { background: #e1306c; }
.mbs-social-icon-tiktok        { background: #010101; }
.mbs-social-icon-youtube       { background: #ff0000; }
.mbs-social-icon-rumble        { background: #85c742; }
.mbs-social-icon-twitch        { background: #9146ff; }
.mbs-social-icon-linkedin      { background: #0a66c2; }
.mbs-social-icon-twitter       { background: #000000; }
.mbs-social-icon-pinterest     { background: #e60023; }
.mbs-social-icon-threads       { background: #101010; }
.mbs-social-icon-bluesky       { background: #0085ff; }
.mbs-social-icon-truth-social  { background: #5448ee; }
.mbs-social-icon-telegram      { background: #229ed9; }
.mbs-social-icon-whatsapp      { background: #25d366; }
.mbs-social-icon-snapchat      { background: #fffc00; color: #000; }
.mbs-social-icon-reddit        { background: #ff4500; }
.mbs-social-icon-discord       { background: #5865f2; }
.mbs-social-icon-goodreads     { background: #553b08; }
.mbs-social-icon-bookbub       { background: #e9171e; }
.mbs-social-icon-amazon-author { background: #ff9900; color: #000; }
.mbs-social-icon-wattpad       { background: #f68b26; }
.mbs-social-icon-substack      { background: #ff6719; }
.mbs-social-icon-patreon       { background: #ff424d; }
.mbs-social-icon-medium        { background: #000000; }
.mbs-social-icon-tumblr        { background: #35465c; }
.mbs-social-icon-quora         { background: #a82400; }
.mbs-social-icon-weibo         { background: #df2029; }
.mbs-social-icon-xiaohongshu   { background: #fe2c55; }
.mbs-social-icon-douyin        { background: #010101; }
.mbs-social-icon-bilibili      { background: #00a1d6; }
.mbs-social-icon-kuaishou      { background: #ff4906; }
.mbs-social-icon-qzone         { background: #ffc21d; color: #000; }
.mbs-social-icon-vk            { background: #0077ff; }
.mbs-social-icon-line          { background: #00c300; }
.mbs-social-icon-viber         { background: #7360f2; }
.mbs-social-icon-wechat        { background: #07c160; }
.mbs-social-icon-naver         { background: #03c75a; }
.mbs-social-icon-mastodon      { background: #6364ff; }
.mbs-social-icon-custom        { background: #646970; }

/* ── Row label ───────────────────────────────────────────────────────────── */
.mbs-social-row-label {
	flex-shrink: 0;
	min-width: 90px;
	font-size: 12px;
	color: #3c434a;
}

/* ── URL input ───────────────────────────────────────────────────────────── */
.mbs-social-url-input {
	flex: 1 1 auto;
	min-width: 0;
}

/* ── Custom label input ──────────────────────────────────────────────────── */
.mbs-social-custom-label-input {
	flex: 0 0 130px;
}

/* ── Remove button ───────────────────────────────────────────────────────── */
.mbs-social-remove-btn {
	flex-shrink: 0;
	padding: 0 4px;
	color: #b32d2e;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	background: none;
	border: none;
}

.mbs-social-remove-btn:hover {
	color: #8a2424;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.mbs-social-empty-state {
	margin: 0 0 10px;
	color: #646970;
	font-style: italic;
}

/* ── Picker wrapper (<details>) ──────────────────────────────────────────── */
.mbs-social-picker-wrapper {
	margin-top: 6px;
}

.mbs-social-picker-wrapper[open] .mbs-social-picker-toggle {
	background: #f0f0f1;
}

.mbs-social-picker-toggle {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	list-style: none;
}

.mbs-social-picker-toggle::-webkit-details-marker,
.mbs-social-picker-toggle::marker {
	display: none;
}

/* ── Picker inner ────────────────────────────────────────────────────────── */
.mbs-social-picker {
	margin-top: 10px;
	padding: 12px;
	background: #f6f7f7;
	border: 1px solid #dcdcde;
	border-radius: 3px;
}

/* ── Search input ────────────────────────────────────────────────────────── */
.mbs-social-picker-search {
	width: 100%;
	max-width: 280px;
	margin-bottom: 12px;
}

/* ── Group label ─────────────────────────────────────────────────────────── */
.mbs-social-picker-group {
	margin-bottom: 10px;
}

.mbs-social-picker-group-label {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #646970;
}

/* ── Platform buttons ────────────────────────────────────────────────────── */
.mbs-social-picker-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.mbs-social-picker-btn {
	padding: 3px 9px;
	font-size: 12px;
	white-space: nowrap;
	cursor: pointer;
}

.mbs-social-picker-btn--added,
.mbs-social-picker-btn[disabled] {
	opacity: 0.5;
	cursor: default;
}

.mbs-social-picker-btn--custom {
	border-style: dashed;
}
