/* =====================================================================
   Faizal Server Control Center — panel-2.css  (versi 2, 2026-09-27)
   Perubahan v2:
     - label baris (.row .name span.t) dibenarkan WRAP sehingga 2 baris;
       tiada lagi ellipsis untuk maklumat security ("Pendedahan port",
       "Reboot diperlukan").
     - kelas teks status refresh (#kemas-teks) untuk keadaan berjaya/gagal.
   Mobile-first. Mod terang & gelap (ikut sistem, boleh tukar manual).
   ===================================================================== */
:root {
	--bg: #f4f6f9; --bg-card: #ffffff; --bg-soft: #eef1f6; --bg-header: #0f172a;
	--tx: #0f172a; --tx-soft: #5b6577; --tx-inv: #e8edf6; --line: #e2e7ef;
	--ok: #16a34a; --warn: #d97706; --bad: #dc2626; --info: #2563eb;
	--ok-bg: #e7f7ec; --warn-bg: #fdf3e3; --bad-bg: #fdeaea;
	--radius: 14px; --shadow: 0 1px 2px rgba(15,23,42,.06), 0 6px 18px rgba(15,23,42,.05);
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0b1220; --bg-card: #131c2e; --bg-soft: #1b2538; --bg-header: #070d18;
		--tx: #e8edf6; --tx-soft: #9aa7bd; --tx-inv: #e8edf6; --line: #243149;
		--ok: #22c55e; --warn: #f59e0b; --bad: #ef4444; --info: #60a5fa;
		--ok-bg: #102a1a; --warn-bg: #2b2110; --bad-bg: #2c1416;
		--shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 22px rgba(0,0,0,.35);
	}
}
html[data-theme="light"] {
	--bg: #f4f6f9; --bg-card: #ffffff; --bg-soft: #eef1f6; --bg-header: #0f172a;
	--tx: #0f172a; --tx-soft: #5b6577; --line: #e2e7ef;
	--ok: #16a34a; --warn: #d97706; --bad: #dc2626; --info: #2563eb;
	--ok-bg: #e7f7ec; --warn-bg: #fdf3e3; --bad-bg: #fdeaea;
}
html[data-theme="dark"] {
	--bg: #0b1220; --bg-card: #131c2e; --bg-soft: #1b2538; --bg-header: #070d18;
	--tx: #e8edf6; --tx-soft: #9aa7bd; --line: #243149;
	--ok: #22c55e; --warn: #f59e0b; --bad: #ef4444; --info: #60a5fa;
	--ok-bg: #102a1a; --warn-bg: #2b2110; --bad-bg: #2c1416;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	background: var(--bg); color: var(--tx);
	font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-text-size-adjust: 100%;
}

/* ---------- header ---------- */
.topbar {
	position: sticky; top: 0; z-index: 20; background: var(--bg-header); color: var(--tx-inv);
	padding: 12px 14px 14px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar-row { display: flex; align-items: center; gap: 10px; }
.topbar h1 { font-size: 15px; margin: 0; font-weight: 650; letter-spacing: .2px; }
.topbar .host { font-size: 11px; color: #93a2ba; margin-top: 2px; }
.btn-theme {
	margin-left: auto; background: rgba(255,255,255,.08); color: var(--tx-inv); border: 1px solid rgba(255,255,255,.14);
	border-radius: 9px; padding: 7px 10px; font-size: 13px; cursor: pointer;
}
.health {
	margin-top: 11px; display: flex; align-items: center; gap: 10px;
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
	border-radius: 12px; padding: 9px 11px;
}
.health .pill { display: inline-flex; align-items: center; gap: 7px; font-weight: 650; font-size: 14px; }
.health .tally { margin-left: auto; display: flex; gap: 9px; font-size: 12px; color: #b9c5d8; }
.tally b { font-weight: 650; }
.updated { margin-top: 8px; font-size: 11.5px; color: #8fa0b8; display: flex; align-items: center; gap: 6px; }
.updated #kemas-teks { overflow-wrap: anywhere; }
/* status refresh: satu sahaja, tidak pernah ditambah berulang */
#kemas-teks.status-gagal { color: #ffd08a; font-weight: 650; }
.t-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; animation: pulse 2.2s infinite; }
.t-live-dot.status-gagal { background: var(--warn); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; animation: pulse 2.2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ---------- layout ---------- */
main { max-width: 1120px; margin: 0 auto; padding: 14px 12px 40px; }
section { margin-bottom: 16px; }
.sec-title {
	display: flex; align-items: center; gap: 8px; margin: 0 0 8px 2px;
	font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tx-soft);
}
.card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.card + .card { margin-top: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
@media (min-width: 720px) {
	.grid2 { grid-template-columns: 1fr 1fr; }
	.grid3 { grid-template-columns: repeat(4, minmax(0,1fr)); }
	main { padding: 18px 18px 60px; }
}

/* ---------- metric cards ---------- */
.metric { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; }
.metric .lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tx-soft); display: flex; align-items: center; gap: 6px; }
.metric .val { font-size: 21px; font-weight: 680; margin-top: 5px; font-variant-numeric: tabular-nums; }
.metric .sub { font-size: 11.5px; color: var(--tx-soft); margin-top: 3px; }
.bar { height: 6px; border-radius: 4px; background: var(--bg-soft); margin-top: 9px; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 4px; background: var(--ok); }
.bar.w > i { background: var(--warn); }
.bar.b > i { background: var(--bad); }

/* ---------- status ---------- */
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: var(--tx-soft); }
.st-ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.st-warning { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.st-problem { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.txt-ok { color: var(--ok); } .txt-warning { color: var(--warn); } .txt-problem { color: var(--bad); }

/* ---------- rows ---------- */
.rows { display: block; }
.row { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row .name { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
/* v2: label berbaris-baris (wrap) — TIADA ellipsis untuk maklumat security */
.row .name span.t { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.row .t, .row .name { overflow-wrap: anywhere; }
.row .meta { margin-left: auto; text-align: right; font-size: 12.5px; color: var(--tx-soft); font-variant-numeric: tabular-nums;
				display: flex; flex-wrap: wrap; gap: 4px 8px; justify-content: flex-end; align-items: center; }
.row .meta b { color: var(--tx); font-weight: 620; }
.chip { font-size: 10.5px; padding: 2px 7px; border-radius: 999px; background: var(--bg-soft); color: var(--tx-soft); }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warning { background: var(--warn-bg); color: var(--warn); }
.chip.problem { background: var(--bad-bg); color: var(--bad); }

/* ---------- login ---------- */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 18px; }
.login-wrap { width: 100%; max-width: 380px; }
.login-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 24px 20px; text-align: center; }
.login-logo { font-size: 34px; }
.login-card h1 { font-size: 18px; margin: 8px 0 4px; }
.login-sub { font-size: 12px; color: var(--tx-soft); margin: 0 0 18px; }
.login-form { text-align: left; }
.login-form label { display: block; font-size: 12px; color: var(--tx-soft); margin: 12px 0 5px; }
.login-form input {
	width: 100%; padding: 12px 12px; font-size: 16px; border: 1px solid var(--line);
	border-radius: 10px; background: var(--bg); color: var(--tx);
}
.login-form input:focus { outline: 2px solid var(--info); outline-offset: 1px; }
.btn-primary {
	width: 100%; margin-top: 18px; padding: 13px; font-size: 15px; font-weight: 650; border: 0;
	border-radius: 10px; background: var(--info); color: #fff; cursor: pointer;
}
.btn-primary:active { opacity: .85; }
.login-foot { font-size: 11px; color: var(--tx-soft); margin: 16px 0 0; line-height: 1.5; }
.alert { border-radius: 10px; padding: 10px 12px; font-size: 12.5px; margin-bottom: 12px; text-align: left; }
.alert-warn { background: var(--warn-bg); color: var(--warn); }
.alert-bad { background: var(--bad-bg); color: var(--bad); }
.alert code { background: rgba(0,0,0,.08); padding: 1px 5px; border-radius: 5px; }

/* ---------- footer ---------- */
.foot { text-align: center; font-size: 11px; color: var(--tx-soft); margin-top: 18px; line-height: 1.7; }
.btn-logout {
	background: transparent; border: 1px solid var(--line); color: var(--tx-soft);
	border-radius: 9px; padding: 7px 12px; font-size: 12px; cursor: pointer; margin-top: 10px;
}