/**
 * JTAS Frontend styles.
 * Semua di-scope ke .jtas-fe supaya tidak konflik dengan theme WP aktif.
 * Dua variant tema:
 *   .jtas-fe.jtas-fe-light  → home / search (cream background)
 *   .jtas-fe.jtas-fe-dark   → aggregate + detail (dark navy dengan radial gradient)
 */

/* ═══ Reset lokal & base font ═════════════════════════════════════════ */
.jtas-fe, .jtas-fe *,
.jtas-fe *::before, .jtas-fe *::after {
	box-sizing: border-box;
}
.jtas-fe {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
	line-height: 1.45;
}
.jtas-fe a { text-decoration: none; }
.jtas-fe a:hover { text-decoration: underline; }
.jtas-fe .num { text-align: right; }

/* ═══ LIGHT theme (home / search) ═════════════════════════════════════ */
.jtas-fe.jtas-fe-light {
	--bg: #f7f4ef;
	--card: #ffffff;
	--text: #111827;
	--muted: #4b5563;
	--accent: #d62828;
	--border: #e5e7eb;
	background: var(--bg);
	color: var(--text);
	padding: 28px 0 60px;
	margin: -28px -18px 0; /* extend beyond WP page padding */
}
.jtas-fe.jtas-fe-light .jtas-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 18px;
}
.jtas-fe.jtas-fe-light .jtas-accent { color: var(--accent); }
.jtas-fe.jtas-fe-light .jtas-badge {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(214, 40, 40, 0.12);
	color: var(--accent);
	font-weight: 700;
	font-size: 12px;
}
.jtas-fe.jtas-fe-light .jtas-h1 {
	font-size: 44px;
	letter-spacing: -0.02em;
	margin: 10px 0 8px;
	line-height: 1.1;
}
.jtas-fe.jtas-fe-light .jtas-lead {
	color: var(--muted);
	max-width: 70ch;
}
.jtas-fe.jtas-fe-light .jtas-small { font-size: 12px; color: var(--muted); }
.jtas-fe.jtas-fe-light .jtas-grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 18px;
	align-items: start;
}
.jtas-fe.jtas-fe-light .jtas-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 18px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.jtas-fe.jtas-fe-light .jtas-form {
	display: flex;
	gap: 10px;
	margin-top: 14px;
}
.jtas-fe.jtas-fe-light .jtas-form input[type="text"] {
	flex: 1;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: white;
	color: var(--text);
	outline: none;
	font-size: 15px;
}
.jtas-fe.jtas-fe-light .jtas-form input[type="text"]:focus {
	border-color: var(--accent);
}
.jtas-fe.jtas-fe-light .jtas-form button {
	padding: 12px 18px;
	border: 0;
	border-radius: 12px;
	background: var(--accent);
	color: white;
	font-weight: 700;
	cursor: pointer;
	font-size: 15px;
}
.jtas-fe.jtas-fe-light .jtas-form button:active { transform: translateY(1px); }
.jtas-fe.jtas-fe-light .jtas-preview-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.jtas-fe.jtas-fe-light .jtas-preview-tile {
	height: 86px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(214, 40, 40, 0.08), rgba(0, 0, 0, 0.02));
	border: 1px solid var(--border);
}
.jtas-fe.jtas-fe-light .jtas-section { margin-top: 24px; }
.jtas-fe.jtas-fe-light .jtas-section h2 { margin-bottom: 12px; font-size: 22px; }
.jtas-fe.jtas-fe-light .jtas-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.jtas-fe.jtas-fe-light .jtas-benefit-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
@media (max-width: 900px) {
	.jtas-fe.jtas-fe-light .jtas-grid { grid-template-columns: 1fr; }
	.jtas-fe.jtas-fe-light .jtas-h1 { font-size: 32px; }
	.jtas-fe.jtas-fe-light .jtas-feature-grid,
	.jtas-fe.jtas-fe-light .jtas-benefit-grid { grid-template-columns: 1fr; }
}

/* ═══ DARK theme (aggregate + detail + notfound) ══════════════════════ */
.jtas-fe.jtas-fe-dark {
	--bg: #060b16;
	--line: rgba(255, 255, 255, 0.10);
	--text: #e8f0ff;
	--muted: rgba(232, 240, 255, 0.70);
	--red: #ff4d4d;
	--excellent: #31d27a;
	--good: #31d27a;
	--ok: #f6c343;
	--cukup: #f6c343;
	--bad: #ff5d5d;
	background:
		radial-gradient(900px 500px at 18% 8%, rgba(255, 77, 77, 0.18), transparent 55%),
		radial-gradient(900px 500px at 80% 20%, rgba(60, 130, 255, 0.14), transparent 60%),
		var(--bg);
	color: var(--text);
	padding: 0 0 60px;
	margin: -28px -18px 0;
	min-height: 90vh;
}
.jtas-fe.jtas-fe-dark a { color: inherit; }
.jtas-fe.jtas-fe-dark a.jtas-link { color: var(--red); }
.jtas-fe.jtas-fe-dark .jtas-muted { color: var(--muted); }

.jtas-fe.jtas-fe-dark .jtas-container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 28px 18px 60px;
}
.jtas-fe.jtas-fe-dark .jtas-nav {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px max(18px, calc((100% - 1064px) / 2));
	max-width: none;
	margin: 0;
	/* v1.8.2: sticky di top viewport supaya "Keluar" & logo selalu terjangkau */
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(6, 11, 22, 0.82);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.jtas-fe.jtas-fe-dark .jtas-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
}
.jtas-fe.jtas-fe-dark .jtas-rocket { font-size: 18px; }
.jtas-fe.jtas-fe-dark .jtas-navlinks {
	margin-left: auto;
	display: flex;
	gap: 10px;
}
.jtas-fe.jtas-fe-dark .jtas-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.18);
	font-size: 13px;
	color: var(--muted);
}
.jtas-fe.jtas-fe-dark a.jtas-pill { text-decoration: none; }
.jtas-fe.jtas-fe-dark a.jtas-pill:hover { color: var(--text); }

.jtas-fe.jtas-fe-dark .jtas-card {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.04));
	border: 1px solid var(--line);
	border-radius: 18px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
	padding: 22px;
}
.jtas-fe.jtas-fe-dark .jtas-h1 {
	font-size: 44px;
	letter-spacing: 0.3px;
	margin: 8px 0 8px;
	line-height: 1.15;
}
.jtas-fe.jtas-fe-dark .jtas-h2 {
	font-size: 26px;
	margin: 26px 0 12px;
}
.jtas-fe.jtas-fe-dark .jtas-meta {
	margin-top: 10px;
	font-size: 18px;
}
.jtas-fe.jtas-fe-dark .jtas-label {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.4px;
}

.jtas-fe.jtas-fe-dark .jtas-grid2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-top: 16px;
}
.jtas-fe.jtas-fe-dark .jtas-grid3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 16px;
}
.jtas-fe.jtas-fe-dark .jtas-smallcard {
	background: rgba(0, 0, 0, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 14px;
	padding: 14px;
}
.jtas-fe.jtas-fe-dark .jtas-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid rgba(255, 77, 77, 0.45);
	background: rgba(255, 77, 77, 0.13);
	font-weight: 800;
	color: var(--text);
	text-decoration: none;
}
.jtas-fe.jtas-fe-dark .jtas-btn:hover {
	background: rgba(255, 77, 77, 0.22);
	text-decoration: none;
}
@media (max-width: 900px) {
	.jtas-fe.jtas-fe-dark .jtas-grid2,
	.jtas-fe.jtas-fe-dark .jtas-grid3 { grid-template-columns: 1fr; }
	.jtas-fe.jtas-fe-dark .jtas-h1 { font-size: 32px; }
}

/* Detail table */
.jtas-fe.jtas-fe-dark .jtas-table-wrap {
	overflow: auto;
	border-radius: 14px;
	border: 1px solid var(--line);
	background: rgba(0, 0, 0, 0.18);
}
.jtas-fe.jtas-fe-dark table {
	border-collapse: collapse;
	width: 100%;
	min-width: 640px;
}
.jtas-fe.jtas-fe-dark th,
.jtas-fe.jtas-fe-dark td {
	padding: 12px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
	text-align: left;
}
.jtas-fe.jtas-fe-dark th {
	font-size: 13px;
	color: rgba(232, 240, 255, 0.78);
	background: rgba(255, 255, 255, 0.04);
	font-weight: 800;
}
.jtas-fe.jtas-fe-dark td { font-size: 14px; }
.jtas-fe.jtas-fe-dark td.num,
.jtas-fe.jtas-fe-dark th.num { text-align: right; }

/* Klasifikasi badges */
.jtas-fe.jtas-fe-dark .jtas-cbadge {
	font-weight: 800;
	padding: 4px 10px;
	border-radius: 999px;
	display: inline-block;
	font-size: 12px;
}
.jtas-fe.jtas-fe-dark .jtas-cbadge.excellent {
	background: rgba(49, 210, 122, 0.18);
	color: var(--excellent);
	border: 1px solid rgba(49, 210, 122, 0.35);
}
.jtas-fe.jtas-fe-dark .jtas-cbadge.good {
	background: rgba(49, 210, 122, 0.18);
	color: var(--good);
	border: 1px solid rgba(49, 210, 122, 0.35);
}
.jtas-fe.jtas-fe-dark .jtas-cbadge.ok {
	background: rgba(246, 195, 67, 0.16);
	color: var(--ok);
	border: 1px solid rgba(246, 195, 67, 0.35);
}
.jtas-fe.jtas-fe-dark .jtas-cbadge.cukup {
	background: rgba(246, 195, 67, 0.16);
	color: var(--cukup);
	border: 1px solid rgba(246, 195, 67, 0.35);
}
.jtas-fe.jtas-fe-dark .jtas-cbadge.bad {
	background: rgba(255, 93, 93, 0.16);
	color: var(--bad);
	border: 1px solid rgba(255, 93, 93, 0.35);
}

.jtas-fe.jtas-fe-dark ul { margin: 8px 0 0 18px; }
.jtas-fe.jtas-fe-dark li {
	margin: 6px 0;
	color: rgba(232, 240, 255, 0.88);
}

/* v1.5.2: logo gambar di nav */
.jtas-fe .jtas-logo{height:34px;width:auto;display:block}

/* v1.6.0: chart SVG */
.jtas-fe .jtas-chart-wrap{margin-top:8px;max-width:640px}
.jtas-fe .jtas-chart{width:100%;height:auto;display:block}

/* ═══════════════════════════════════════════════════════════════════════
   v1.8.0: Aggregate Dashboard Insights
   KPI cards, matriks skor subtes×TO, radar aggregate, floating WA button.
   Design language mengikuti Konstanta (dashboard modern) tapi menyesuaikan
   DNA JTAS: dark radial-gradient + red accent, bukan cream + teal.
   ═══════════════════════════════════════════════════════════════════════ */

/* Bar chart lebar (grouped bar) butuh space > radar */
.jtas-fe .jtas-chart-wrap.wide{max-width:100%}

/* ─── KPI Cards ─────────────────────────────────────────────────────── */
.jtas-fe.jtas-fe-dark .jtas-kpi-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:12px;
	margin:20px 0 6px;
}
.jtas-fe.jtas-fe-dark .jtas-kpi{
	background:rgba(0,0,0,0.24);
	border:1px solid rgba(255,255,255,0.10);
	border-radius:14px;
	padding:16px 14px;
	position:relative;
	overflow:hidden;
}
.jtas-fe.jtas-fe-dark .jtas-kpi::before{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(135deg,rgba(255,77,77,0.06),transparent 55%);
	pointer-events:none;
}
.jtas-fe.jtas-fe-dark .jtas-kpi-label{
	font-size:11px;
	font-weight:800;
	letter-spacing:0.5px;
	color:rgba(232,240,255,0.65);
	text-transform:uppercase;
	margin-bottom:8px;
	line-height:1.35;
}
.jtas-fe.jtas-fe-dark .jtas-kpi-sub{
	display:block;
	font-size:10px;
	font-weight:600;
	letter-spacing:0.3px;
	color:rgba(232,240,255,0.48);
	text-transform:none;
	margin-top:2px;
}
.jtas-fe.jtas-fe-dark .jtas-kpi-value{
	font-size:32px;
	font-weight:900;
	letter-spacing:-0.5px;
	color:var(--text);
	line-height:1.05;
	display:flex;
	align-items:center;
	gap:8px;
}
.jtas-fe.jtas-fe-dark .jtas-kpi-trend{
	font-size:20px;
	font-weight:900;
	line-height:1;
}
.jtas-fe.jtas-fe-dark .jtas-kpi-trend.trend-up   { color:#31d27a; }
.jtas-fe.jtas-fe-dark .jtas-kpi-trend.trend-down { color:#ff5d5d; }
.jtas-fe.jtas-fe-dark .jtas-kpi-trend.trend-flat { color:#f6c343; }
@media (max-width:900px){
	.jtas-fe.jtas-fe-dark .jtas-kpi-grid{grid-template-columns:repeat(2,1fr)}
	.jtas-fe.jtas-fe-dark .jtas-kpi-value{font-size:26px}
}
@media (max-width:520px){
	.jtas-fe.jtas-fe-dark .jtas-kpi-grid{grid-template-columns:1fr}
}

/* ─── Matriks skor subtes × TO ──────────────────────────────────────── */
.jtas-fe.jtas-fe-dark .jtas-matrix-wrap{
	overflow-x:auto;
	border-radius:14px;
	border:1px solid var(--line);
	background:rgba(0,0,0,0.18);
	margin-top:6px;
	-webkit-overflow-scrolling:touch;
}
.jtas-fe.jtas-fe-dark .jtas-matrix{
	border-collapse:collapse;
	width:auto;
	min-width:100%;
	font-size:13px;
}
.jtas-fe.jtas-fe-dark .jtas-matrix th,
.jtas-fe.jtas-fe-dark .jtas-matrix td{
	padding:10px 12px;
	border-bottom:1px solid rgba(255,255,255,0.06);
	text-align:right;
	white-space:nowrap;
}
.jtas-fe.jtas-fe-dark .jtas-matrix thead th{
	background:rgba(255,255,255,0.04);
	font-size:12px;
	font-weight:800;
	color:rgba(232,240,255,0.85);
	text-align:right;
	position:sticky;
	top:0;
}
.jtas-fe.jtas-fe-dark .jtas-matrix th.sticky,
.jtas-fe.jtas-fe-dark .jtas-matrix td.sticky{
	position:sticky;
	left:0;
	background:rgba(15,22,40,0.98);
	text-align:left;
	z-index:1;
}
.jtas-fe.jtas-fe-dark .jtas-matrix thead th.sticky{
	background:rgba(20,30,52,0.98);
	z-index:2;
}
.jtas-fe.jtas-fe-dark .jtas-matrix td.ok    { color:#5eeaa2; font-weight:700; }
.jtas-fe.jtas-fe-dark .jtas-matrix td.below { color:#ff7a7a; font-weight:700; }
.jtas-fe.jtas-fe-dark .jtas-matrix td .dim  { color:rgba(232,240,255,0.35); }
.jtas-fe.jtas-fe-dark .jtas-matrix tr.rerata-row td{
	background:rgba(122,162,255,0.09);
	border-top:2px solid rgba(122,162,255,0.28);
	font-size:13px;
}
.jtas-fe.jtas-fe-dark .jtas-matrix tr.rerata-row td.sticky{
	background:rgba(20,30,52,0.98);
	border-top:2px solid rgba(122,162,255,0.28);
}

/* ─── Floating WhatsApp button ──────────────────────────────────────── */
.jtas-wafloat{
	position:fixed;
	right:22px;
	bottom:22px;
	z-index:9998;
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:12px 16px 12px 12px;
	background:#25D366;
	color:#fff !important;
	border-radius:999px;
	box-shadow:0 12px 28px rgba(0,0,0,0.35), 0 4px 10px rgba(37,211,102,0.35);
	text-decoration:none !important;
	font-weight:800;
	font-size:14px;
	line-height:1;
	transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.jtas-wafloat:hover{
	background:#20b95a;
	transform:translateY(-1px);
	box-shadow:0 16px 34px rgba(0,0,0,0.42), 0 6px 12px rgba(37,211,102,0.45);
	text-decoration:none !important;
}
.jtas-wafloat:focus-visible{
	outline:3px solid #fff;
	outline-offset:3px;
}
.jtas-wafloat svg{display:block;flex-shrink:0}
.jtas-wafloat-label{white-space:nowrap}
@media (max-width:520px){
	.jtas-wafloat{
		right:16px;
		bottom:16px;
		padding:12px;
		border-radius:50%;
	}
	.jtas-wafloat-label{display:none}
}