/*
 * AJT MSP Hub — Lighthouse CM Tab Styles.
 *
 * "365 Health" tab in the Contracts Manager customer detail view.
 * Uses AJT design tokens (CSS custom properties) throughout.
 * White-label ready — all brand colours via variables.
 *
 * @package AJT_MSP_Hub
 * @since   2.1.0
 */

/* ── Design Tokens (scoped to .ajt-lh) ─────────────── */

.ajt-lh {
	--lh-font: var(--msphub-font-family, var(--cm-font, 'Nunito Sans')), sans-serif;
	--lh-radius: var(--ajt-radius, 10px);
	--lh-radius-sm: var(--ajt-radius-sm, 6px);
	--lh-radius-lg: var(--ajt-radius-lg, 14px);
	--lh-gray-50: var(--ajt-gray-50, #F5F4F6);
	--lh-gray-100: var(--ajt-gray-100, #F0EEF2);
	--lh-gray-200: var(--ajt-gray-200, #E0DCE4);
	--lh-gray-300: var(--ajt-gray-300, #D0CCD6);
	--lh-gray-400: var(--ajt-gray-400, #9B95A6);
	--lh-gray-500: var(--ajt-gray-500, #716B7E);
	--lh-gray-600: var(--ajt-gray-600, #5A5468);
	--lh-gray-900: var(--ajt-gray-900, #2D2836);
	--lh-plum: var(--cm-plum, #7B4C75);
	--lh-plum-light: rgba(123,76,117,0.08);
	--lh-success: var(--ajt-success, #059669);
	--lh-warning: var(--ajt-warning, #D97706);
	--lh-danger: var(--ajt-danger, #DC2626);
	--lh-info: var(--ajt-teal, #007991);
	--lh-blue: #3b82f6;
	--lh-shadow: 0 1px 3px rgba(45,40,54,0.06), 0 1px 2px rgba(45,40,54,0.04);
	--lh-shadow-md: 0 4px 6px rgba(45,40,54,0.07), 0 2px 4px rgba(45,40,54,0.04);
	--lh-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	font-family: var(--lh-font);
}

/* ── Staggered Fade-Up ──────────────────────────────── */

@keyframes ajtLhFadeUp {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}
.ajt-lh-anim { opacity: 0; animation: ajtLhFadeUp 0.4s ease forwards; }
.ajt-lh-anim:nth-child(1) { animation-delay: 0s; }
.ajt-lh-anim:nth-child(2) { animation-delay: 0.06s; }
.ajt-lh-anim:nth-child(3) { animation-delay: 0.12s; }
.ajt-lh-anim:nth-child(4) { animation-delay: 0.18s; }
.ajt-lh-anim:nth-child(5) { animation-delay: 0.24s; }
.ajt-lh-anim:nth-child(6) { animation-delay: 0.30s; }
.ajt-lh-anim:nth-child(7) { animation-delay: 0.36s; }
.ajt-lh-anim:nth-child(8) { animation-delay: 0.42s; }

/* ── KPI Summary Row ────────────────────────────────── */

.ajt-lh-kpi-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
	margin-bottom: 24px;
}

.ajt-lh-kpi {
	background: #fff;
	border: 1px solid var(--lh-gray-200);
	border-radius: var(--lh-radius);
	padding: 16px 12px;
	text-align: center;
	border-top: 3px solid var(--_kpi-color, var(--lh-gray-400));
	transition: var(--lh-transition);
	box-shadow: var(--lh-shadow);
}
.ajt-lh-kpi:hover {
	transform: translateY(-2px);
	box-shadow: var(--lh-shadow-md);
}
.ajt-lh-kpi-val {
	font-size: 28px;
	font-weight: 900;
	color: var(--_kpi-color, var(--lh-gray-900));
	line-height: 1;
}
.ajt-lh-kpi-unit { font-size: 14px; color: var(--lh-gray-400); }
.ajt-lh-kpi-lbl {
	font-size: 10px; font-weight: 700;
	color: var(--lh-gray-500);
	text-transform: uppercase; letter-spacing: 0.5px;
	margin-top: 6px;
}
.ajt-lh-kpi-sub { font-size: 11px; color: var(--lh-gray-400); margin-top: 2px; }

/* ── Sub-tab Pills ──────────────────────────────────── */

.ajt-lh-subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }

.ajt-lh-subtab {
	padding: 6px 16px; border-radius: 20px;
	border: 1px solid var(--lh-gray-200); background: #fff;
	font-size: 12px; font-weight: 600; color: var(--lh-gray-600);
	cursor: pointer; transition: var(--lh-transition);
	font-family: var(--lh-font); line-height: 1.4;
}
.ajt-lh-subtab:hover { background: var(--lh-gray-50); border-color: var(--lh-gray-300); }
.ajt-lh-subtab.active { background: var(--lh-gray-900); color: #fff; border-color: var(--lh-gray-900); }
.ajt-lh-subtab .ajt-lh-pill-ct {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 18px; height: 18px; padding: 0 5px;
	border-radius: 9px; font-size: 10px; font-weight: 800; margin-left: 4px;
	background: var(--lh-gray-100); color: var(--lh-gray-500);
}
.ajt-lh-subtab.active .ajt-lh-pill-ct { background: rgba(255,255,255,0.2); color: #fff; }

.ajt-lh-panel { display: none; }
.ajt-lh-panel.active { display: block; animation: ajtLhFadeUp 0.3s ease; }

/* ── Bento Grid (Overview) ──────────────────────────── */

.ajt-lh-bento {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.ajt-lh-bento-card {
	background: var(--lh-gray-50); border: 1px solid var(--lh-gray-200);
	border-radius: var(--lh-radius-lg); padding: 24px;
	transition: var(--lh-transition);
}
.ajt-lh-bento-card:hover { box-shadow: var(--lh-shadow-md); }
.ajt-lh-bento-card--span2 { grid-column: span 2; }
.ajt-lh-bento-card--span3 { grid-column: span 3; }
.ajt-lh-bento-card--wide { grid-column: 1 / -1; }
.ajt-lh-card-title {
	font-size: 10px; font-weight: 700; color: var(--lh-gray-500);
	text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 12px;
}

/* ── SVG Donut ──────────────────────────────────────── */

.ajt-lh-donut { position: relative; display: inline-block; }
.ajt-lh-donut svg { transform: rotate(-90deg); display: block; }
.ajt-lh-donut-center {
	position: absolute; top: 50%; left: 50%;
	transform: translate(-50%, -50%); text-align: center;
}
.ajt-lh-donut-val { font-size: 32px; font-weight: 900; line-height: 1; }
.ajt-lh-donut-lbl { font-size: 11px; color: var(--lh-gray-400); margin-top: 2px; }

@keyframes ajtLhDonutDraw {
	from { stroke-dashoffset: var(--lh-donut-circ, 339); }
	to   { stroke-dashoffset: var(--lh-donut-offset, 339); }
}
.ajt-lh-donut-ring {
	animation: ajtLhDonutDraw 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	stroke-dasharray: var(--lh-donut-circ, 339);
	stroke-dashoffset: var(--lh-donut-circ, 339);
}

/* ── Sparkline ──────────────────────────────────────── */

.ajt-lh-sparkline { display: block; margin: 8px auto 0; }
.ajt-lh-spark-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ajt-lh-spark-area { opacity: 0.1; }
.ajt-lh-spark-dot { opacity: 0; transition: opacity 0.2s; }
.ajt-lh-sparkline:hover .ajt-lh-spark-dot { opacity: 1; }

/* ── Progress / Compliance Bar ──────────────────────── */

.ajt-lh-progress { height: 8px; border-radius: 4px; background: var(--lh-gray-100); overflow: hidden; margin-top: 8px; }
.ajt-lh-progress-fill { height: 100%; border-radius: 4px; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

.ajt-lh-comp-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; margin-top: 8px; }
.ajt-lh-comp-seg { height: 100%; border-radius: 5px; transition: width 0.6s ease; min-width: 2px; }

/* ── Data Table ─────────────────────────────────────── */

.ajt-lh-table {
	width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px;
}
.ajt-lh-table thead th {
	font-size: 9px; font-weight: 800; color: var(--lh-gray-400);
	text-transform: uppercase; letter-spacing: 0.5px;
	padding: 10px 12px; border-bottom: 1px solid var(--lh-gray-200);
	text-align: left; background: var(--lh-gray-50);
	position: sticky; top: 0; z-index: 1;
}
.ajt-lh-table thead th:first-child { border-radius: var(--lh-radius-sm) 0 0 0; }
.ajt-lh-table thead th:last-child  { border-radius: 0 var(--lh-radius-sm) 0 0; }
.ajt-lh-table tbody tr { transition: background 0.15s; }
.ajt-lh-table tbody tr:hover { background: var(--lh-gray-50); }
.ajt-lh-table tbody tr.ajt-lh-clickable { cursor: pointer; }
.ajt-lh-table tbody td {
	padding: 10px 12px; border-bottom: 1px solid var(--lh-gray-100);
	vertical-align: middle; color: var(--lh-gray-900);
}
.ajt-lh-table tbody tr:last-child td { border-bottom: none; }
.ajt-lh-table-wrap { max-height: 500px; overflow-y: auto; border: 1px solid var(--lh-gray-200); border-radius: var(--lh-radius); }

/* ── Theme-proof overrides for tables inside .ajt-lh ── */
.ajt-lh table.ajt-lh-table { width:100% !important; border-collapse:separate !important; border-spacing:0 !important; border:none !important; margin:0 !important; background:transparent !important; }
.ajt-lh .ajt-lh-table thead { background:none !important; border:none !important; }
.ajt-lh .ajt-lh-table thead th {
	font-size:9px !important; font-weight:800 !important; color:var(--lh-gray-400) !important;
	text-transform:uppercase !important; letter-spacing:0.5px !important;
	padding:10px 12px !important; text-align:left !important;
	background:var(--lh-gray-50) !important;
	border:none !important; border-bottom:1px solid var(--lh-gray-200) !important;
}
.ajt-lh .ajt-lh-table tbody tr {
	border:none !important; background:transparent !important; transition:background 0.15s !important;
}
.ajt-lh .ajt-lh-table tbody tr:hover { background:var(--lh-gray-50) !important; }
.ajt-lh .ajt-lh-table tbody td {
	padding:10px 12px !important; vertical-align:middle !important;
	color:var(--lh-gray-900) !important; font-size:13px !important;
	border:none !important; border-bottom:1px solid var(--lh-gray-100) !important;
	background:transparent !important;
}
.ajt-lh .ajt-lh-table tbody tr:last-child td { border-bottom:none !important; }
.ajt-lh .ajt-lh-table-wrap { border:1px solid var(--lh-gray-200) !important; border-radius:var(--lh-radius) !important; overflow:auto !important; background:#fff !important; }

/* ── Badges ─────────────────────────────────────────── */

.ajt-lh-badge {
	display: inline-block; padding: 2px 10px; border-radius: 10px;
	font-size: 10px; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.3px; white-space: nowrap;
}
.ajt-lh-badge--good    { background: #dcfce7; color: #166534; }
.ajt-lh-badge--warn    { background: #fef3c7; color: #92400e; }
.ajt-lh-badge--bad     { background: #fef2f2; color: #991b1b; }
.ajt-lh-badge--neutral { background: var(--lh-gray-100); color: var(--lh-gray-500); }
.ajt-lh-badge--info    { background: #e0f2fe; color: #075985; }
.ajt-lh-badge--plum    { background: var(--lh-plum-light); color: var(--lh-plum); }

/* ── Dot Indicators ─────────────────────────────────── */

.ajt-lh-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ajt-lh-dot--green  { background: var(--lh-success); }
.ajt-lh-dot--amber  { background: var(--lh-warning); }
.ajt-lh-dot--red    { background: var(--lh-danger); }
.ajt-lh-dot--blue   { background: var(--lh-blue); }
.ajt-lh-dot--gray   { background: var(--lh-gray-300); }

/* ── User Avatar ────────────────────────────────────── */

.ajt-lh-avatar {
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--lh-plum); color: #fff;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.ajt-lh-avatar--sm { width: 22px; height: 22px; font-size: 8px; }
.ajt-lh-avatar--risky { background: var(--lh-danger); animation: ajt-lh-pulse 2s infinite; }

@keyframes ajt-lh-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.3); }
	50% { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}

/* ── User/Device Row ────────────────────────────────── */

.ajt-lh-user-row { display: flex; align-items: center; gap: 10px; }
.ajt-lh-user-name { font-weight: 600; font-size: 13px; color: var(--lh-gray-900); }
.ajt-lh-user-email { font-size: 12px; color: var(--lh-gray-400); }

.ajt-lh-wp-link {
	display: inline-flex; align-items: center; gap: 3px;
	font-size: 10px; color: var(--lh-blue); font-weight: 600; text-decoration: none;
}
.ajt-lh-wp-link:hover { text-decoration: underline; }

/* ── Recommendation Cards ───────────────────────────── */

.ajt-lh-rec {
	background: #fff; border: 1px solid var(--lh-gray-200);
	border-radius: var(--lh-radius); padding: 14px 16px;
	margin-bottom: 8px; transition: var(--lh-transition);
	display: grid; grid-template-columns: 1fr auto auto auto;
	align-items: center; gap: 12px;
}
.ajt-lh-rec:hover { border-color: var(--lh-gray-300); box-shadow: var(--lh-shadow); }
.ajt-lh-rec-title { font-size: 13px; font-weight: 600; color: var(--lh-gray-900); }
.ajt-lh-rec-desc { font-size: 11px; color: var(--lh-gray-400); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ajt-lh-rec-impact { font-size: 13px; font-weight: 800; color: var(--lh-blue); white-space: nowrap; }

/* ── Slide-In Detail Panel ──────────────────────────── */

.ajt-lh-slide {
	position: fixed; top: 0; right: 0; bottom: 0;
	width: 420px; max-width: 90vw;
	background: #fff; box-shadow: -4px 0 24px rgba(45,40,54,0.12);
	z-index: 999999; display: none;
	animation: ajt-lh-slideIn 0.25s ease;
}
.ajt-lh-slide.active { display: block; }
@keyframes ajt-lh-slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

.ajt-lh-slide-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 20px; border-bottom: 1px solid var(--lh-gray-200);
	background: var(--lh-gray-50);
}
.ajt-lh-slide-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--lh-gray-900); }
.ajt-lh-slide-close {
	width: 28px; height: 28px; border-radius: 50%;
	border: none; background: var(--lh-gray-100); color: var(--lh-gray-600);
	font-size: 16px; cursor: pointer; transition: var(--lh-transition);
	display: flex; align-items: center; justify-content: center;
}
.ajt-lh-slide-close:hover { background: var(--lh-danger); color: #fff; }
.ajt-lh-slide-body { padding: 20px; overflow-y: auto; max-height: calc(100vh - 60px); }

/* ── Stat Mini Cards ────────────────────────────────── */

.ajt-lh-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.ajt-lh-stat-mini {
	background: var(--lh-gray-50); border-radius: var(--lh-radius-sm);
	padding: 12px; text-align: center;
}
.ajt-lh-stat-mini-val { font-size: 20px; font-weight: 900; }
.ajt-lh-stat-mini-lbl { font-size: 9px; font-weight: 700; color: var(--lh-gray-500); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; }

/* ── Reconciliation Stats ───────────────────────────── */

.ajt-lh-recon-stats {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
	gap: 8px; margin-bottom: 16px;
}
.ajt-lh-recon-stat {
	background: #fff; border: 1px solid var(--lh-gray-200);
	border-radius: var(--lh-radius-sm); padding: 10px 8px;
	text-align: center; border-top: 3px solid var(--_rs-color, var(--lh-gray-300));
}
.ajt-lh-recon-stat-val { font-size: 20px; font-weight: 900; color: var(--_rs-color, var(--lh-gray-900)); }
.ajt-lh-recon-stat-lbl { font-size: 9px; font-weight: 700; color: var(--lh-gray-500); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 2px; }

/* ── Empty State ────────────────────────────────────── */

.ajt-lh-empty { text-align: center; padding: 48px 24px; color: var(--lh-gray-400); }
.ajt-lh-empty-icon { font-size: 36px; margin-bottom: 12px; opacity: 0.5; }
.ajt-lh-empty-msg { font-size: 14px; font-weight: 600; color: var(--lh-gray-500); margin-bottom: 4px; }
.ajt-lh-empty-hint { font-size: 12px; color: var(--lh-gray-400); }

/* ── Legend ──────────────────────────────────────────── */

.ajt-lh-legend { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.ajt-lh-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--lh-gray-600); }
.ajt-lh-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Rating Text ────────────────────────────────────── */

.ajt-lh-rating { font-size: 13px; font-weight: 700; margin-top: 6px; }
.ajt-lh-rating--excellent { color: var(--lh-success); }
.ajt-lh-rating--good      { color: var(--lh-blue); }
.ajt-lh-rating--fair       { color: var(--lh-warning); }
.ajt-lh-rating--poor       { color: var(--lh-danger); }

/* ── Buttons ────────────────────────────────────────── */

.ajt-lh-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 14px; border-radius: 20px;
	font-size: 12px; font-weight: 600; font-family: var(--lh-font);
	cursor: pointer; transition: var(--lh-transition);
	border: 1px solid var(--lh-gray-200); background: #fff; color: var(--lh-gray-600);
}
.ajt-lh-btn:hover { border-color: var(--lh-gray-300); background: var(--lh-gray-50); }
.ajt-lh-btn--primary { background: var(--lh-plum); color: #fff; border-color: var(--lh-plum); }
.ajt-lh-btn--primary:hover { background: var(--cm-plum-dark, #5E3A5A); }
.ajt-lh-btn--sm { padding: 4px 10px; font-size: 11px; }
.ajt-lh-btn--danger { border-color: #fecaca; color: var(--lh-danger); }
.ajt-lh-btn--danger:hover { background: #fef2f2; }

/* ── Conditional Access / Protection Cards ──────────── */

.ajt-lh-ca-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.ajt-lh-ca-card {
	background: #fff; border: 1px solid var(--lh-gray-200);
	border-radius: var(--lh-radius); padding: 14px;
	border-left: 3px solid var(--_ca-color, var(--lh-gray-300));
	transition: var(--lh-transition);
}
.ajt-lh-ca-card:hover { box-shadow: var(--lh-shadow); }
.ajt-lh-ca-card-name { font-size: 13px; font-weight: 600; color: var(--lh-gray-900); margin-bottom: 4px; }

/* ── Info Strip ─────────────────────────────────────── */

.ajt-lh-info-strip {
	padding: 10px 16px; border-radius: var(--lh-radius-sm);
	background: #f0f9ff; border: 1px solid #bae6fd;
	font-size: 12px; color: #0369a1; margin-top: 16px;
}

/* ── Section Divider ────────────────────────────────── */

.ajt-lh-divider {
	border: none; border-top: 1px solid var(--lh-gray-200);
	margin: 20px 0;
}

/* ── Responsive ─────────────────────────────────────── */

@media (max-width: 900px) {
	.ajt-lh-bento { grid-template-columns: 1fr 1fr; }
	.ajt-lh-bento-card--span2 { grid-column: span 2; }
	.ajt-lh-bento-card--span3 { grid-column: span 2; }
	.ajt-lh-bento-card--wide { grid-column: 1 / -1; }
	.ajt-lh-rec { grid-template-columns: 1fr; gap: 8px; }
	.ajt-lh-slide { width: 360px; }
}

@media (max-width: 640px) {
	.ajt-lh-bento { grid-template-columns: 1fr; }
	.ajt-lh-bento-card--span2,
	.ajt-lh-bento-card--span3,
	.ajt-lh-bento-card--wide { grid-column: span 1; }
	.ajt-lh-kpi-row { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
	.ajt-lh-kpi-val { font-size: 22px; }
	.ajt-lh-slide { width: 100%; max-width: 100vw; }
	.ajt-lh-stat-grid { grid-template-columns: 1fr; }
}