/**
* @package phpBB Extension - Who is where
* @copyright (c) 2016/2026 dmzx - https://www.dmzx-web.net & martin - https://www.martins-play-ground.uk
* @license http://opensource.org/licenses/gpl-2.0.php GNU General Public License v2
*
* 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.
*
* 2026-07-03 (part 5): table-layout: fixed + explicit column widths, to
* stop columns visibly shifting on every poll-refresh that changed any
* cell's text length.
*
* 2026-07-03 (part 6): EVERY column now gets an explicit percentage,
* summing to 100% per breakpoint -- there is no longer a single
* no-width "absorber" column.
*
* 2026-07-03 (part 7): TWO bugs sharing one root cause, confirmed on a
* live screenshot -- the username text had disappeared entirely, AND
* every column's data cells no longer lined up under their headers.
* Root cause: display: flex sat directly on <td class="wiw-col-user">.
* A table cell with display: flex can stop being treated as a proper
* table-cell by the table-layout: fixed column-sizing algorithm in some
* engines, which both squeezed the username into an unpredictably
* narrow box and threw off every other column's computed width relative
* to its header. Fix: flex now lives on an inner .wiw-user-inner span
* (see who_is_where_table.html); the <td> itself keeps its default
* table-cell display and participates in fixed-layout sizing normally.
* Also added explicit header+data text-align pairs for Online/Country
* (icon-only columns look better centered) with enough specificity to
* beat the earlier default-left .wiw-table thead th rule, so the header
* label and the row's dot/flag actually sit in the same place.
*/

.wiw-dashboard {
	--wiw-bg: transparent;
	--wiw-panel: rgba(0,0,0,0.04);
	--wiw-panel-border: rgba(0,0,0,0.15);
	--wiw-row-border: rgba(0,0,0,0.08);
	--wiw-text: currentColor;
	--wiw-text-dim: #6b7884;
	--wiw-ok: #1fa971;
	--wiw-warn: #e0a000;
	--wiw-danger: #e5484d;
	--wiw-radius: 7px;

	background: var(--wiw-bg);
	color: var(--wiw-text);
	border: 1px solid var(--wiw-panel-border);
	border-radius: var(--wiw-radius);
	padding: 12px 16px;
	margin: 4px 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
	/* Belt-and-suspenders: if content still doesn't fit at some
	   viewport width nobody tested, scroll the panel horizontally
	   instead of letting it overflow the page. */
	max-width: 100%;
	overflow-x: auto;
}

.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(31,169,113,.5); }
	70%  { box-shadow: 0 0 0 8px rgba(31,169,113,0); }
	100% { box-shadow: 0 0 0 0 rgba(31,169,113,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;
	flex-shrink: 0;
	transition: color .15s ease, border-color .15s ease;
}
.wiw-collapse-btn:hover { color: var(--wiw-text); border-color: var(--wiw-text-dim); }

/* 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;
	flex-wrap: wrap;
	gap: 6px 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%; min-width: 320px; }

.wiw-table {
	width: 100%;
	table-layout: fixed;
	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;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wiw-table tbody td {
	padding: 9px 10px;
	border-bottom: 1px solid var(--wiw-row-border);
	vertical-align: middle;
	color: var(--wiw-text);
	overflow: hidden;
}

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

/* Full explicit set, summing to 100% -- no auto/absorber column. */
.wiw-col-user     { width: 20%; }
.wiw-col-online   { width: 8%; }
.wiw-col-country  { width: 8%; }
.wiw-col-location { width: 34%; }
.wiw-col-arrived  { width: 15%; }
.wiw-col-browser  { width: 15%; }

.wiw-no-country .wiw-col-user     { width: 22%; }
.wiw-no-country .wiw-col-online   { width: 8%; }
.wiw-no-country .wiw-col-location { width: 36%; }
.wiw-no-country .wiw-col-arrived  { width: 17%; }
.wiw-no-country .wiw-col-browser  { width: 17%; }

/* Header/data text-align pairs, explicit for BOTH th and td with
   matching specificity so header labels line up with what's below
   them. Online/Country are narrow icon-only columns -- centered reads
   better than left-aligned. This selector (.wiw-table th.wiw-col-x)
   has two classes + one type, which beats the plain
   ".wiw-table thead th" rule above (one class + two types) on the
   class-count tie-breaker, regardless of source order. */
.wiw-table th.wiw-col-online, .wiw-table td.wiw-col-online,
.wiw-table th.wiw-col-country, .wiw-table td.wiw-col-country {
	text-align: center;
}

/* display: flex lives on this inner wrapper, NOT on the <td> itself --
   see this file's part-7 doc comment above for why. */
.wiw-user-inner {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow: hidden;
	min-width: 0;
}
.wiw-avatar { flex-shrink: 0; }
.wiw-avatar img { border-radius: 50%; width: 24px; height: 24px; object-fit: cover; vertical-align: middle; }
.wiw-avatar .avatar-placeholder { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.wiw-avatar .avatar-initials { font-size: 12px; line-height: 1; font-weight: 600; }
.wiw-username {
	font-weight: 600;
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.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-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(31,169,113,.18); }
.wiw-dot--orange { background: var(--wiw-warn); }
.wiw-dot--red    { background: var(--wiw-danger); }

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

.wiw-col-location {
	color: var(--wiw-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wiw-col-location a { 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;
	overflow: hidden;
	text-overflow: ellipsis;
}
.wiw-col-browser img { vertical-align: middle; }

/* Tablet and below: Country + Arrived drop out. Remaining 4 columns
   redeclared to sum to 100% again (not incremental overrides). */
@media (max-width: 700px) {
	.wiw-col-country, .wiw-col-arrived { display: none; }
	.wiw-col-user     { width: 24%; }
	.wiw-col-online   { width: 10%; }
	.wiw-col-location { width: 46%; }
	.wiw-col-browser  { width: 20%; }
	.wiw-no-country .wiw-col-user     { width: 24%; }
	.wiw-no-country .wiw-col-online   { width: 10%; }
	.wiw-no-country .wiw-col-location { width: 46%; }
	.wiw-no-country .wiw-col-browser  { width: 20%; }
}

/* Phone width: OS/Browser is the next to go. What's left --
   Username, Online, Location -- is exactly the "who, how active,
   where" information that has to be visible immediately, per the
   original requirement. Redeclared to sum to 100% again. */
@media (max-width: 480px) {
	.wiw-col-browser { display: none; }
	.wiw-col-user     { width: 30%; }
	.wiw-col-online   { width: 14%; }
	.wiw-col-location { width: 56%; }
	.wiw-no-country .wiw-col-user     { width: 30%; }
	.wiw-no-country .wiw-col-online   { width: 14%; }
	.wiw-no-country .wiw-col-location { width: 56%; }
	.wiw-dashboard { padding: 14px 14px; }
	.wiw-table { font-size: 12px; }
}