/* ===========================================================
   Infopolitie – Dashboard extension
   Design: infopolitie2026 tokens  ·  Phase 5
   =========================================================== */

/* ── token fallbacks (when parent theme variable not present) ── */
#dashboard {
	--ip-blue:       #006699;
	--ip-blue-dark:  #004d73;
	--ip-orange:     #EC6400;
	--ip-surface:    #f5f8fb;
	--ip-surface-2:  #eaf1f7;
	--ip-border:     #d3e4ee;
	--ip-text:       #2c3e50;
	--ip-text-muted: #617a90;
	--ip-radius:     10px;
	--ip-radius-sm:  6px;
	--ip-shadow:     0 2px 10px rgba(0, 102, 153, .10);

	/* ipcheck widget tokens (overridden per-style for dark themes) */
	--ipcd-row-bdr:  #dde8f0;
	--ipcd-code-bg:  #e8f0f6;
	--ipcd-code-col: inherit;
	--ipcd-pop-bg:   #ffffff;
	--ipcd-pop-bdr:  #c0cdda;
	--ipcd-btn-bg:   #edf2f7;
	--ipcd-btn-bdr:  #b0c4d4;
}

/* modal vars on :root so the fixed overlay (outside #dashboard) can inherit them */
:root {
	--ipcd-modal-bg:     #ffffff;
	--ipcd-modal-col:    inherit;
	--ipcd-modal-bdr:    #c0cdda;
	--ipcd-modal-btn-bg: #edf2f7;
}

/* ── outer wrapper ─────────────────────────────────────────── */
#dashboard {
	background: var(--ip-surface);
	border: 1px solid var(--ip-border);
	border-radius: var(--ip-radius);
	box-shadow: var(--ip-shadow);
	margin: 8px 0 12px;
	overflow: hidden;
}

/* ── title bar ─────────────────────────────────────────────── */
#dashtitle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--ip-blue);
	color: #fff;
	font-weight: 600;
	font-size: 0.95em;
	letter-spacing: .02em;
	padding: 7px 12px;
	cursor: pointer;
	user-select: none;
}

#dashtitle:hover { background: var(--ip-blue-dark); }

#dashtitle .icon,
.dashboardarrow { color: #fff; }

/* ── content grid ──────────────────────────────────────────── */
#dashboard_content {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 10px;
}

/* ── generic card ──────────────────────────────────────────── */
.stat-block {
	flex: 1 1 220px;
	max-width: 320px;
	background: #fff;
	border: 1px solid var(--ip-border);
	border-radius: var(--ip-radius-sm);
	padding: 10px 12px;
	font-size: .88em;
	color: var(--ip-text);
	word-break: break-word;
	box-sizing: border-box;
}

/* cards that need more room (online list, pending, wahv) */
.stat-block.online-list,
.stat-block.pending-users,
.stat-block.wahv-search {
	max-width: 480px;
}

.stat-block h3 {
	margin: 0 0 6px;
	padding: 0 0 5px;
	border-bottom: 1px solid var(--ip-border);
	font-size: .9em;
	font-weight: 600;
	color: var(--ip-blue);
}

.stat-block h3 a             { color: inherit; text-decoration: none; }
.stat-block h3 a:hover       { color: var(--ip-orange); text-decoration: underline; }

.stat-block p {
	margin: 0;
	line-height: 1.5;
}

/* ── avatar / user card ────────────────────────────────────── */
#testblock {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-start;
}

/* reminder spans full width below avatar + text */
#testblock > .uniform-reminder {
	flex: 1 1 100%;
	margin-top: 0;
}

/* ── pending users card ────────────────────────────────────── */
.pending-count {
	display: inline-block;
	min-width: 20px;
	text-align: center;
	background: var(--ip-orange);
	color: #fff;
	font-size: .78em;
	font-weight: 700;
	border-radius: 10px;
	padding: 1px 6px;
	margin: 0 3px;
	line-height: 1.4;
	vertical-align: middle;
}

.pending-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pending-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	padding: 5px 0;
	border-bottom: 1px dashed var(--ip-border);
}

.pending-list li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.pending-username {
	font-weight: 600;
	color: var(--ip-text);
}

.pending-meta {
	color: var(--ip-text-muted);
	font-size: .9em;
}

.pending-fraud         { font-weight: 700; }
.pending-fraud.score-low  { color: #27ae60; }
.pending-fraud.score-med  { color: #e67e22; }
.pending-fraud.score-high { color: #c0392b; }

.pending-actions { margin-left: auto; }

.btn-approve,
.btn-deny,
.btn-deny-ban {
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: .9em;
	padding: 3px 7px;
	margin: 0 2px;
	line-height: 1;
	transition: opacity .15s;
}

.btn-approve               { background: #27ae60; color: #fff; }
.btn-approve:hover         { opacity: .82; }
.btn-deny                  { background: #e67e22; color: #fff; }
.btn-deny:hover            { opacity: .82; }
.btn-deny-ban              { background: #c0392b; color: #fff; }
.btn-deny-ban:hover        { opacity: .82; }

/* ── WAHV search card ──────────────────────────────────────── */
.wahv-search { flex: 1 1 280px; position: relative; }

.wahv-input-wrap {
	display: flex;
	align-items: center;
	gap: 4px;
}

.wahv-input {
	flex: 1;
	padding: 5px 8px;
	border: 1px solid var(--ip-border);
	border-radius: var(--ip-radius-sm);
	font-size: .88em;
	color: var(--ip-text);
	background: #fff;
	outline: none;
	transition: border-color .15s;
}

.wahv-input:focus {
	border-color: var(--ip-blue);
	box-shadow: 0 0 0 2px rgba(0, 102, 153, .15);
}

.wahv-clear {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.1em;
	color: var(--ip-text-muted);
	padding: 2px 5px;
	border-radius: 4px;
	line-height: 1;
}

.wahv-clear:hover {
	background: var(--ip-surface-2);
	color: var(--ip-text);
}

.wahv-suggestions {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	background: #fff;
	border: 1px solid var(--ip-border);
	border-radius: var(--ip-radius-sm);
	box-shadow: var(--ip-shadow);
	max-height: 200px;
	overflow-y: auto;
	z-index: 20;
}

.wahv-suggestion {
	padding: 6px 10px;
	font-size: .87em;
	cursor: pointer;
	color: var(--ip-text);
	border-bottom: 1px solid var(--ip-surface-2);
}

.wahv-suggestion:last-child              { border-bottom: none; }
.wahv-suggestion:hover,
.wahv-suggestion--active                 { background: var(--ip-surface-2); color: var(--ip-blue); }

.wahv-result {
	margin-top: 8px;
	padding: 4px 0 2px;
}

/* Injected .ip-wahv chip: reflow as flex for extra readability */
.wahv-result .ip-wahv {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
	font-size: .9em;
	padding: 6px 10px;
	margin: 0;
	border-radius: var(--ip-radius-sm);
}

/* ── WAHV copy-as-text widget ──────────────────────────────── */
.wahv-copy-wrap {
	margin-top: 6px;
}

.wahv-copy-btn {
	background: none;
	border: 1px solid var(--ip-border);
	border-radius: var(--ip-radius-sm);
	cursor: pointer;
	color: var(--ip-text-muted);
	font-size: .8em;
	padding: 2px 7px;
	line-height: 1.6;
	transition: background .15s, color .15s;
}

.wahv-copy-btn:hover {
	background: var(--ip-surface-2);
	color: var(--ip-blue);
	border-color: var(--ip-blue);
}

.wahv-copy-ta {
	display: block;
	width: 100%;
	margin-top: 5px;
	padding: 5px 7px;
	font-family: monospace;
	font-size: .85em;
	color: var(--ip-text);
	background: var(--ip-surface-2);
	border: 1px solid var(--ip-border);
	border-radius: var(--ip-radius-sm);
	resize: none;
	cursor: text;
	box-sizing: border-box;
}

/* ── uniformleden membership reminder ──────────────────────── */
.uniform-reminder {
	margin: 6px 0 0;
	padding: 4px 8px;
	border-radius: var(--ip-radius-sm);
	font-size: .84em;
	background: var(--ip-surface-2);
	border-left: 3px solid var(--ip-blue);
	color: var(--ip-text-muted);
	line-height: 1.5;
}

.uniform-reminder--special {
	border-left-color: #27ae60;
	background: #eafaf1;
	color: #1a7a3c;
	font-weight: 600;
}

.uniform-reminder--warn {
	border-left-color: #e67e22;
	background: #fef6ec;
	color: #7d4a00;
}

.uniform-reminder--urgent {
	border-left-color: #c0392b;
	background: #fdf0ee;
	color: #7b0d0d;
}

.uniform-reminder--expired {
	border-left-color: #c0392b;
	background: #fdf0ee;
	color: #c0392b;
	font-weight: 600;
}

.uniform-extend-btn {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 8px;
	background: var(--ip-blue);
	color: #fff !important;
	border-radius: var(--ip-radius-sm);
	font-size: .85em;
	text-decoration: none;
	white-space: nowrap;
	vertical-align: middle;
}

.uniform-extend-btn:hover {
	background: var(--ip-blue-dark);
	text-decoration: none !important;
}

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
	#dashboard_content { flex-direction: column; }
	.stat-block        { flex: none; width: 100%; max-width: 100%; }
}

/* ── dark mode ─────────────────────────────────────────────── */
/*
 * #dashboard re-declares token fallbacks at element level, which
 * beats :root dark-mode overrides. We must re-override at the same
 * or higher specificity with [data-theme="dark"] #dashboard.
 */
[data-theme="dark"] #dashboard {
	--ip-surface:    #0f1923;
	--ip-surface-2:  #182430;
	--ip-border:     #2a3d4d;
	--ip-text:       #d0dde8;
	--ip-text-muted: #7a96aa;
	--ip-blue:       #3fa8d8;
	--ip-blue-dark:  #2a7aa6;
	--ip-orange:     #f07a20;
	--ip-shadow:     0 2px 10px rgba(0,0,0,.50);
}

[data-theme="dark"] #dashboard {
	background: var(--ip-surface);
	border-color: var(--ip-border);
}

[data-theme="dark"] .stat-block {
	background: var(--ip-surface-2);
	border-color: var(--ip-border);
	color: var(--ip-text);
}

[data-theme="dark"] .wahv-input,
[data-theme="dark"] .wahv-suggestions {
	background: var(--ip-surface-2);
	border-color: var(--ip-border);
	color: var(--ip-text);
}

[data-theme="dark"] .wahv-suggestion {
	color: var(--ip-text);
	border-bottom-color: var(--ip-border);
}

[data-theme="dark"] .wahv-suggestion:hover,
[data-theme="dark"] .wahv-suggestion--active {
	background: #0d2030;
	color: var(--ip-blue);
}

[data-theme="dark"] .uniform-reminder {
	background: var(--ip-surface-2);
	border-left-color: var(--ip-blue);
	color: var(--ip-text-muted);
}

[data-theme="dark"] .uniform-reminder--special {
	background: #0d2d0f;
	border-left-color: #2a9940;
	color: #7ecb7e;
}

[data-theme="dark"] .uniform-reminder--warn {
	background: #2a1f00;
	border-left-color: #d06010;
	color: #d4954a;
}

[data-theme="dark"] .uniform-reminder--urgent,
[data-theme="dark"] .uniform-reminder--expired {
	background: #2d0a0d;
	border-left-color: #c0392b;
	color: #d87a7a;
}