/**
* @package phpBB Extension - Stats Info-Center
* @copyright (c) 2026 dmzx - https://www.dmzx-web.net
* @license http://opensource.org/licenses/gpl-2.0.php GNU General Public License v2
*
* CSS-wrapper approach: wraps phpBB core's .stat-block elements in a
* .sic-dashboard panel and restyles them as dashboard cards.
*
* Link colour strategy (two separate cases):
*
*   1. username-coloured links (Registered users list):
*      phpBB adds class="username-coloured" AND inline style="color:#XX".
*      Excluded via :not(.username-coloured) -- inline style wins naturally.
*
*   2. Legend group links:
*      phpBB adds inline style="color:#XX" but NO class.
*      !important in a stylesheet BEATS a normal inline style, so
*      :not(.username-coloured) alone is not enough for these.
*      Fix: also exclude via :not([style*="color"]) -- CSS attribute
*      selector that matches elements whose style attribute contains
*      the word "color". Since legend links have style="color:#XX",
*      they are excluded and their inline colour wins.
*
*   3. Plain links (Total downloads, etc.):
*      No inline style, no special class. Both :not() conditions pass,
*      so they correctly get our accent colour.
*/

.sic-dashboard {
	--sic-bg: #0b0e14;
	--sic-panel: rgba(255,255,255,0.04);
	--sic-panel-border: rgba(255,255,255,0.08);
	--sic-text: #e8eaf0;
	--sic-text-dim: #8b93a7;
	--sic-accent: #6ea8fe;
	--sic-radius: 14px;

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

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

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

/* Grid container */
.sic-body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px;
}

/* Core card style -- all .stat-block children become cards */
.sic-body .stat-block {
	background: var(--sic-panel) !important;
	border: 1px solid var(--sic-panel-border) !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	margin: 0 !important;
	color: var(--sic-text) !important;
	transition: border-color .2s, transform .2s;
}
.sic-body .stat-block:hover {
	border-color: rgba(255,255,255,0.18) !important;
	transform: translateY(-1px);
}

/* Layout */
.sic-body .stat-block.online-list {
	grid-column: 1 / -1;
	border-color: rgba(110,168,254,0.28) !important;
}
.sic-body .stat-block.statistics,
.sic-body .stat-block.newestmembers {
	grid-column: span 2;
	border-color: rgba(52,211,153,0.22) !important;
}
.sic-body .stat-block.birthday-list,
.sic-body .stat-block.hidebirthday-list {
	border-color: rgba(244,114,182,0.28) !important;
}

/* h3 becomes an uppercase label */
.sic-body .stat-block h3 {
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: .6px !important;
	color: var(--sic-text-dim) !important;
	font-weight: 600 !important;
	margin: 0 0 8px 0 !important;
	padding: 0 0 7px 0 !important;
	border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.sic-body .stat-block h3 a { color: var(--sic-text-dim) !important; text-decoration: none !important; }
.sic-body .stat-block h3 a:hover { color: var(--sic-accent) !important; }
.sic-body .stat-block h3 .fa { color: var(--sic-text-dim) !important; }

/* Paragraph content */
.sic-body .stat-block p {
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.65 !important;
	color: var(--sic-text) !important;
}

/* Only apply accent colour to links that have NO inline colour set.
   - :not(.username-coloured) excludes "Registered users" links (have class + inline style)
   - :not([style*="color"]) excludes Legend links (have inline style, no class)
   Both groups keep their own phpBB-supplied inline colour. */
.sic-body .stat-block p a:not(.username-coloured):not([style*="color"]) {
	color: var(--sic-accent) !important;
	text-decoration: none !important;
}
.sic-body .stat-block p a:not(.username-coloured):not([style*="color"]):hover {
	text-decoration: underline !important;
}
/* Remove underlines on coloured links too */
.sic-body .stat-block p a.username-coloured,
.sic-body .stat-block p a[style*="color"] {
	text-decoration: none !important;
}

.sic-body .stat-block p strong { font-weight: 600 !important; color: var(--sic-text) !important; }
.sic-body .stat-block p em { color: var(--sic-text-dim) !important; font-style: normal !important; font-size: 12px !important; }

@media (max-width: 700px) {
	.sic-body .stat-block.online-list,
	.sic-body .stat-block.statistics,
	.sic-body .stat-block.newestmembers { grid-column: span 1; }
}