/* PowerBoxDJ forum additions: package badge, avatar borders, contributor rank, country flag,
   like button, and the shared dark/light toggle.
   Self-contained so everything survives a style change. */

/* ── package badge ──────────────────────────── */
.pbdj-tier {
	display: inline-block;
	font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	line-height: 1.5; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
	color: var(--pb-gold, #7a5800); background: rgba(255, 201, 0, .12); border: 1px solid rgba(255, 201, 0, .45);
}
dd.profile-pbdj { margin-top: 3px; line-height: 1.5; }

/* ── avatar: tier border + liked marker ─────── */
/* 2px, as asked. Free deliberately has none, so the border means "this member has paid" at a
   glance and the colour says how much. */
.pbdj-av { display: inline-block; position: relative; line-height: 0; border-radius: 4px; }
.pbdj-av img { display: block; border-radius: 3px; }

.pbdj-av-white { box-shadow: 0 0 0 2px #ffffff; }
.pbdj-av-red   { box-shadow: 0 0 0 2px #d02a2a; }
.pbdj-av-gold  { box-shadow: 0 0 0 2px #ffc900; }

/* The private "I have credited this person" underline. Sits below the picture and is only ever
   rendered for the reader who cast the like - nobody else sees it. */
.pbdj-av-liked::after {
	content: ""; position: absolute; left: 8%; right: 8%; bottom: -6px;
	height: 3px; border-radius: 2px; background: #e0322f;
	box-shadow: 0 0 6px rgba(224, 50, 47, .65);
}
.pbdj-av.pbdj-av-liked { margin-bottom: 7px; }

/* ── contributor rank ───────────────────────── */
dd.profile-pbdj-rank { margin-top: 2px; }
.pbdj-rank-label { font-size: .92em; color: inherit; opacity: .75; }
.pbdj-rank {
	font-family: "Cascadia Mono", Consolas, ui-monospace, monospace;
	font-size: .95em; font-weight: 700; color: var(--pb-gold, #7a5800);
	background: rgba(255, 201, 0, .08); border: 1px solid rgba(255, 201, 0, .28);
	border-radius: 4px; padding: 0 6px; white-space: nowrap;
}

/* ── country flag ───────────────────────────── */
dd.profile-pbdj-country { margin-top: 3px; }
.pbdj-flag {
	display: inline-block; width: 20px; height: 15px;
	border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
	vertical-align: middle;
}

/* ── like button ────────────────────────────── */
dd.profile-pbdj-like { margin-top: 6px; }
.pbdj-like {
	display: inline-flex; align-items: center; gap: 5px;
	font: inherit; font-size: .92em; font-weight: 600;
	padding: 3px 10px; cursor: pointer;
	color: var(--pb-text-2, #4a4a55); background: rgba(127, 127, 127, .08);
	border: 1px solid var(--pb-line, #cfcfd8); border-radius: 999px;
	transition: color .13s, border-color .13s, background .13s;
}
.pbdj-like:hover { color: #e0322f; border-color: rgba(224, 50, 47, .55); background: rgba(224, 50, 47, .10); }
.pbdj-like .pbdj-like-icon { font-size: 1.05em; line-height: 1; }
.pbdj-like.is-liked { color: #e0322f; border-color: rgba(224, 50, 47, .6); background: rgba(224, 50, 47, .13); }
.pbdj-like[disabled] { opacity: .5; cursor: default; }

/* ── the shared theme toggle + language picker ─ */
.pbdj-tools {
	display: inline-flex; align-items: center; gap: 8px; margin-left: 14px; vertical-align: middle;
}
.pbdj-toolbtn {
	font: inherit; font-size: 12px; line-height: 1.6;
	padding: 3px 10px; cursor: pointer; white-space: nowrap;
	/* Fallbacks are deliberately neutral rather than dark: on a style with no PowerBoxDJ palette
	   (prosilver / phpBB Default) the control then borrows that style's own colours instead of
	   dropping a dark pill onto a pale navbar. */
	color: var(--pb-text-2, inherit);
	background: var(--pb-panel-2, transparent);
	border: 1px solid var(--pb-line, currentColor);
	border-radius: 999px;
	transition: color .13s, border-color .13s;
}
.pbdj-toolbtn:hover { color: var(--pb-gold, inherit); border-color: var(--pb-gold-dim, currentColor); }
select.pbdj-toolbtn { padding-right: 6px; }

/* ══════════════════════════════════════════════
   LIGHT THEME — EXTENSION WIDGETS ONLY
   The board chrome (page background, rows, panels, links, buttons) is repainted by the STYLE, in
   styles/powerbox/theme/powerbox.css. It used to be done here, but this file is loaded on every
   style, so those rules also repainted prosilver - which meant the stock "phpBB Default" style was
   not actually stock. Only this extension's own widgets are themed here now.

   Every widget colour above is read through var(--pb-…) with a light-safe fallback, so on a style
   that defines no PowerBoxDJ palette (prosilver / phpBB Default) the widgets fall back to values
   that stay legible on phpBB's own pale background instead of using dark-theme gold.
   ══════════════════════════════════════════════ */

/* Badge and rank need real contrast on white, not the dark-mode gold. */
html[data-theme="light"] .pbdj-tier {
	color: #7a5800; background: rgba(255, 201, 0, .22); border-color: rgba(154, 111, 0, .5);
}
html[data-theme="light"] .pbdj-rank {
	color: #7a5800; background: rgba(255, 201, 0, .16); border-color: rgba(154, 111, 0, .35);
}
/* A white border is invisible on a white page - use a dark outline for the same "paid" signal. */
html[data-theme="light"] .pbdj-av-white { box-shadow: 0 0 0 2px #55555f; }
html[data-theme="light"] .pbdj-flag { box-shadow: 0 0 0 1px rgba(0, 0, 0, .22); }
html[data-theme="light"] .pbdj-like { color: #4a4a55; background: rgba(0, 0, 0, .03); border-color: var(--pb-line, #cfcfd8); }

/* Google's injected translate bar shifts the whole document down; keep the sticky chrome sane. */
body > .skiptranslate { display: none !important; }
body { top: 0 !important; }