/**
* @package phpBB Extension - Who is where
* @copyright (c) 2016/2026 dmzx - https://www.dmzx-web.net & martin - https://www.martins-play-ground.uk
* @license proprietary
*
* v2 dashboard redesign (2026-07-03), matching the dt2bapps System-Info
* / Smart-read-out visual language (same colour tokens, ported here
* under a wiw- prefix). Deliberately self-contained -- does not assume
* either of those extensions is also installed on this board.
*
* 2026-07-03 (part 3): dropped every Font Awesome icon class. This
* extension never loaded any FA stylesheet (confirmed: only
* whoiswhere.css is INCLUDECSS'd), and a live screenshot showed every
* fa-* glyph rendering as an empty box. The collapse chevron is now a
* CSS-only border-triangle (see .wiw-collapse-icon) instead of an <i>
* icon-font glyph -- zero font/asset dependency, matches the technique
* already used for the collapse toggle in Smart-read-out.
*/

.wiw-dashboard {
	--wiw-bg: #0b0e14;
	--wiw-panel: rgba(255,255,255,0.04);
	--wiw-panel-border: rgba(255,255,255,0.08);
	--wiw-text: #e8eaf0;
	--wiw-text-dim: #8b93a7;
	--wiw-accent: #6ea8fe;
	--wiw-ok: #34d399;
	--wiw-warn: #fbbf24;
	--wiw-danger: #fb7185;
	--wiw-radius: 14px;

	background: var(--wiw-bg);
	color: var(--wiw-text);
	border-radius: var(--wiw-radius);
	padding: 18px 20px;
	margin: 16px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
}

.wiw-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.wiw-header h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .2px; color: var(--wiw-text); }

.wiw-live-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--wiw-ok);
	margin-left: auto;
	animation: wiw-pulse 2s infinite;
}
@keyframes wiw-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.5); }
	70%  { box-shadow: 0 0 0 8px rgba(52,211,153,0); }
	100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

.wiw-collapse-btn {
	background: transparent;
	border: 1px solid var(--wiw-panel-border);
	border-radius: 6px;
	color: var(--wiw-text-dim);
	width: 24px; height: 24px;
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
	margin-left: 8px;
	transition: color .15s ease, border-color .15s ease;
}
.wiw-collapse-btn:hover { color: var(--wiw-text); border-color: rgba(255,255,255,0.2); }

/* CSS-only chevron -- no icon font. Points up (expanded) by default;
   aria-expanded="false" rotates it to point down. */
.wiw-collapse-icon {
	display: block;
	width: 7px; height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-135deg);
	margin-top: 2px;
	transition: transform .15s ease;
}
.wiw-collapse-btn[aria-expanded="false"] .wiw-collapse-icon {
	transform: rotate(45deg);
	margin-top: -2px;
}

.wiw-legend {
	display: flex;
	gap: 14px;
	font-size: 11px;
	color: var(--wiw-text-dim);
	margin-bottom: 12px;
}
.wiw-legend .wiw-dot { margin-right: 5px; }

.wiw-body[hidden] { display: none; }

.wiw-table-wrap { width: 100%; }

.wiw-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.wiw-table thead th {
	text-align: left;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--wiw-text-dim);
	padding: 0 10px 8px;
	border-bottom: 1px solid var(--wiw-panel-border);
	font-weight: 600;
	white-space: nowrap;
}

.wiw-table tbody td {
	padding: 9px 10px;
	border-bottom: 1px solid rgba(255,255,255,0.05);
	vertical-align: middle;
	color: var(--wiw-text);
}

.wiw-table tbody tr:last-child td { border-bottom: none; }

.wiw-col-user { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.wiw-avatar img { border-radius: 50%; width: 24px; height: 24px; object-fit: cover; vertical-align: middle; }
.wiw-username { font-weight: 600; font-size: 13px; }
.wiw-badge {
	display: inline-block;
	margin-left: 4px;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	padding: 2px 4px;
	border-radius: 4px;
	background: var(--wiw-panel-border);
	color: var(--wiw-text-dim);
	vertical-align: middle;
}

.wiw-col-online { text-align: center; }
.wiw-dot {
	display: inline-block;
	width: 8px; height: 8px;
	border-radius: 50%;
}
.wiw-dot--green  { background: var(--wiw-ok);     box-shadow: 0 0 0 3px rgba(52,211,153,.15); }
.wiw-dot--orange { background: var(--wiw-warn); }
.wiw-dot--red    { background: var(--wiw-danger); }

.wiw-col-country img { vertical-align: middle; }

.wiw-col-location a { color: var(--wiw-accent); text-decoration: none; }
.wiw-col-location a:hover { text-decoration: underline; }

.wiw-col-arrived { color: var(--wiw-text-dim); font-size: 12px; white-space: nowrap; }

.wiw-col-browser { color: var(--wiw-text-dim); font-size: 12px; white-space: nowrap; }
.wiw-col-browser img { vertical-align: middle; }

@media (max-width: 700px) {
	.wiw-col-country, .wiw-col-arrived { display: none; }
}