/**
* @package phpBB Extension - System Info
* @copyright (c) 2026 dmzx - https://www.dmzx-web.net
* @license http://opensource.org/licenses/gpl-2.0.php GNU General Public License v2
*
* v2.0.0 dashboard redesign. Dark glass-card grid with gradient meters,
* monospace numerics, a live-pulse indicator, and colour-coded CPU-temp
* states (.si-card--state-ok/warning/danger) driven by the data_provider's
* heat_label() output.
*
* v2.0.1: Stats Info-Center section restyles phpBB CORE's own Who's
* Online/Birthdays/Statistics blocks (unmodified core markup/classes,
* injected via the index_body_stat_blocks_before/after events) to match
* this same dashboard look.
*/

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

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

.si-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}
.si-header h3 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .2px; color: var(--si-text); }
.si-header-icon { color: var(--si-accent); }
.si-live-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--si-ok);
	margin-left: auto;
	animation: si-pulse 2s infinite;
}
@keyframes si-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); }
}

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

.si-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
}

.si-card {
	background: var(--si-panel);
	border: 1px solid var(--si-panel-border);
	border-radius: 10px;
	padding: 12px 14px;
	transition: border-color .2s ease, transform .2s ease;
}
.si-card:hover { border-color: rgba(255,255,255,0.16); transform: translateY(-1px); }
.si-card--wide { grid-column: span 2; }

.si-card--state-ok      { border-color: rgba(52,211,153,0.35); }
.si-card--state-warning { border-color: rgba(251,191,36,0.45); }
.si-card--state-danger  { border-color: rgba(251,113,133,0.55); }
.si-card--state-warning #si-cpu-state,
.si-card--state-warning .si-card-sub span:last-child { color: var(--si-warn); font-weight: 600; }
.si-card--state-danger #si-cpu-state,
.si-card--state-danger .si-card-sub span:last-child { color: var(--si-danger); font-weight: 700; }
.si-card--state-ok #si-cpu-state,
.si-card--state-ok .si-card-sub span:last-child { color: var(--si-ok); font-weight: 600; }

.si-card-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--si-text-dim); margin-bottom: 4px; }
.si-card-value { font-size: 14px; font-weight: 600; }
.si-card-sub { font-size: 12px; color: var(--si-text-dim); margin-top: 2px; }
.si-mono { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 13px; }

.si-uptime { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.si-uptime-num { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 16px; font-weight: 700; }
.si-uptime-unit { font-size: 11px; color: var(--si-text-dim); margin-right: 8px; }

.si-load-row { display: flex; gap: 8px; }
.si-load-pill { flex: 1; text-align: center; background: rgba(255,255,255,0.03); border-radius: 8px; padding: 6px 4px; font-family: monospace; font-weight: 700; }
.si-load-pill small { display: block; font-family: -apple-system, sans-serif; font-weight: 400; color: var(--si-text-dim); font-size: 10px; }

.si-kv-row { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--si-text-dim); }
.si-kv-row b { color: var(--si-text); font-family: "SF Mono", Menlo, Consolas, monospace; font-weight: 600; }

.si-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }

.si-meter { background: var(--si-panel); border: 1px solid var(--si-panel-border); border-radius: 10px; padding: 14px; }
.si-meter-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.si-meter-icon { color: var(--si-accent); }
.si-meter-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.si-meter-pct { margin-left: auto; font-family: monospace; font-weight: 700; font-size: 13px; }

.si-bar { height: 7px; border-radius: 99px; background: rgba(255,255,255,0.06); overflow: hidden; }
.si-bar-fill { height: 100%; border-radius: 99px; transition: width .6s ease; }
.si-bar-fill--mem     { background: linear-gradient(90deg, var(--si-accent), #8b5cf6); }
.si-bar-fill--disk    { background: linear-gradient(90deg, #34d399, #6ea8fe); }
.si-bar-fill--opcache { background: linear-gradient(90deg, #fbbf24, #fb923c); }

.si-meter-foot { margin-top: 8px; font-size: 11px; color: var(--si-text-dim); }

@media (max-width: 600px) {
	.si-card--wide { grid-column: span 1; }
}

/* ===== Stats Info-Center (Who's Online / Birthdays / Statistics) =====
   Restyles phpBB CORE's own .stat-block output -- no core template files
   touched, purely CSS targeting the existing, unmodified core markup. */

.si-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 10px;
}

.si-stats-grid .stat-block {
	background: var(--si-panel);
	border: 1px solid var(--si-panel-border);
	border-radius: 10px;
	padding: 14px 16px;
	transition: border-color .2s ease, transform .2s ease;
}
.si-stats-grid .stat-block:hover { border-color: rgba(255,255,255,0.16); transform: translateY(-1px); }

.si-stats-grid .stat-block h3 {
	margin: 0 0 8px 0;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--si-text-dim);
	font-weight: 600;
}
.si-stats-grid .stat-block h3 a { color: var(--si-text-dim); text-decoration: none; }
.si-stats-grid .stat-block h3 a:hover { color: var(--si-accent); }

.si-stats-grid .stat-block p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--si-text);
}
.si-stats-grid .stat-block p a { color: var(--si-accent); text-decoration: none; }
.si-stats-grid .stat-block p a:hover { text-decoration: underline; }
.si-stats-grid .stat-block p em { color: var(--si-text-dim); font-style: normal; font-size: 12px; }
.si-stats-grid .stat-block p strong { font-weight: 600; }

@media (max-width: 600px) {
	.si-stats-grid { grid-template-columns: 1fr; }
}

/* Legacy value-state classes kept for backward compatibility with any
   other dmzx extension (e.g. mChat) that may still reference them. */
.value { color: #536482; }
.value_ok { color: #00BF00; font-weight: bold; }
.value_warning { color: #db9a40; font-weight: bold; }
.value_danger { color: #d91a20; font-weight: bold; }