/**
 * AJT Stripe Pro — Customer Portal (Sidebar Command Centre)
 *
 * Light mode with sidebar navigation layout.
 * Sidebar nav on desktop, horizontal scroll on mobile.
 * White-label compatible via --msphub-* → --acp-* chain.
 *
 * @since 4.2.1
 */

/* ═══════════════════════════════════════════════════════════
 * 1. TOKENS — Light (default)
 * ═══════════════════════════════════════════════════════════ */
.acp {
	--acp-primary: var(--msphub-primary, var(--accent, #7B4C75));
	--acp-primary-hover: var(--msphub-primary-hover, #6A3F64);
	--acp-primary-light: var(--msphub-primary-light, rgba(123,76,117,.10));
	--acp-dark: var(--msphub-dark, var(--dark, #25283D));
	--acp-gradient-end: var(--msphub-gradient-end, #3D2E5C);
	--acp-bg: #F5F4F6;
	--acp-surface: #fff;
	--acp-card: #fff;
	--acp-card-hover: #F8F7FA;
	--acp-border: #E0DCE4;
	--acp-border-light: #D0CCD6;
	--acp-text: #2D2836;
	--acp-text-muted: #716B7E;
	--acp-text-dim: #9B95A6;
	--acp-success: #059669;
	--acp-warning: #D97706;
	--acp-danger: #DC2626;
	--acp-info: #007991;
	--acp-radius: 10px;
	--acp-radius-sm: 6px;
	--acp-radius-lg: 16px;
	--acp-font: var(--msphub-font-family, 'Nunito Sans'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--acp-shadow: 0 2px 8px rgba(45,40,54,.06);
	--acp-shadow-lg: 0 8px 24px rgba(45,40,54,.10);
	--acp-input-bg: #F5F4F6;
	--acp-input-border: #D0CCD6;
}

/* ═══════════════════════════════════════════════════════════
 * 3. LAYOUT — Sidebar + Main
 * ═══════════════════════════════════════════════════════════ */
.acp {
	display: flex;
	max-width: 1120px;
	margin: 30px auto 0;
	font-family: var(--acp-font);
	color: var(--acp-text);
	font-size: 13px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	min-height: 520px;
	border-radius: var(--acp-radius-lg);
	border: 1px solid var(--acp-border);
	box-shadow: var(--acp-shadow);
}

/* Allow fixed-position overlays (ticket detail, payment modal) to escape the portal container */
.acp-main [style*="position:fixed"],
.acp-main [style*="position: fixed"] {
	position: fixed !important;
}

/* ── Sidebar ── */
.acp-side {
	width: 220px;
	flex-shrink: 0;
	background: var(--acp-dark);
	display: flex;
	flex-direction: column;
	color: rgba(255,255,255,.75);
	border-radius: var(--acp-radius-lg) 0 0 var(--acp-radius-lg);
	overflow: hidden;
}

/* Sidebar header — user identity */
.acp-side-hdr {
	padding: 22px 18px 18px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.acp-avatar {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--acp-primary), #6d28d9);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 18px;
	font-weight: 800;
	margin-bottom: 12px;
	flex-shrink: 0;
}
.acp-side-name {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 2px;
	word-break: break-word;
}
.acp-side-email {
	font-size: 11px;
	color: rgba(255,255,255,.55);
	font-weight: 500;
	word-break: break-all;
}
.acp-test-pill {
	display: inline-block;
	margin-top: 10px;
	background: rgba(251,191,36,.18);
	color: #fbbf24;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .8px;
	text-transform: uppercase;
	border: 1px solid rgba(251,191,36,.2);
}

/* Sidebar nav */
.acp-side-nav {
	flex: 1;
	padding: 10px 8px;
	overflow-y: auto;
}
.acp-side-nav a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	text-decoration: none;
	color: rgba(255,255,255,.75);
	font-size: 13px;
	font-weight: 600;
	border-radius: var(--acp-radius-sm);
	transition: all .2s ease;
	margin-bottom: 2px;
	position: relative;
	white-space: nowrap;
}
.acp-side-nav a:hover {
	background: rgba(255,255,255,.08);
	color: #fff;
}
.acp-side-nav a.active {
	background: rgba(255,255,255,.12);
	color: #fff;
}
.acp-side-nav a.active::before {
	content: '';
	position: absolute;
	left: 0; top: 50%;
	transform: translateY(-50%);
	width: 3px; height: 18px;
	background: #fff;
	border-radius: 0 3px 3px 0;
}
.acp-nav-icon { font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; }

/* Sidebar footer */
.acp-side-foot {
	padding: 14px 12px;
	border-top: 1px solid rgba(255,255,255,.08);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.acp-signout {
	display: block;
	text-align: center;
	color: rgba(255,255,255,.45);
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
	padding: 4px 0;
	transition: color .2s;
}
.acp-signout:hover { color: rgba(255,255,255,.8); }

/* ── Main content ── */
.acp-main {
	flex: 1;
	min-width: 0;
	background: var(--acp-bg);
	display: flex;
	flex-direction: column;
	border-radius: 0 var(--acp-radius-lg) var(--acp-radius-lg) 0;
}
.acp .acp-b {
	flex: 1;
	padding: 24px;
	background: var(--acp-bg);
	color: var(--acp-text);
}

/* ── Notices ── */
.acp-nt { padding: 10px 14px; border-radius: var(--acp-radius-sm); margin-bottom: 14px; font-size: 13px; }
.acp-nt-ok { background: #dff7df; border: 1px solid #b8e6b8; color: #0d7a2f; }

.acp-card { background: var(--acp-surface); border: 1px solid var(--acp-border); border-radius: var(--acp-radius); padding: 14px 18px; margin-bottom: 14px; }

/* ═══════════════════════════════════════════════════════════
 * 4. INVOICE TAB — Shared classes
 * ═══════════════════════════════════════════════════════════ */
.ajt-inv { font-size: 13px; line-height: 1.4; }
.ajt-inv-alert { padding: 10px 14px; border-radius: var(--acp-radius-sm); font-size: 12px; font-weight: 600; margin-bottom: 14px; }
.ajt-inv-alert-ok { background: #dff7df; border: 1px solid #b8e6b8; color: #0d7a2f; }
.ajt-inv-alert-err { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }

/* Summary strip */
.ajt-inv-summary { display: flex; gap: 12px; margin-bottom: 18px; }
.ajt-inv-sbox {
	flex: 1;
	padding: 18px 16px;
	border-radius: var(--acp-radius);
	position: relative;
	overflow: hidden;
	transition: all .25s ease;
	border: none;
}
.ajt-inv-sbox:hover { box-shadow: var(--acp-shadow-lg); }
.ajt-inv-sbox-label { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.ajt-inv-sbox-val { font-size: 28px !important; font-weight: 900 !important; line-height: 1; margin-bottom: 4px; letter-spacing: -.5px; }
.ajt-inv-sbox-sub { font-size: 11px !important; font-weight: 600 !important; }

/* Panel */
.ajt-inv-panel { background: var(--acp-surface); border: 1px solid var(--acp-border); border-radius: var(--acp-radius); overflow: hidden; }
.ajt-inv-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--acp-border); }
.ajt-inv-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.ajt-inv-fbtn {
	padding: 5px 12px; border-radius: 8px; text-decoration: none;
	font-size: 11px; font-weight: 700; color: var(--acp-text-muted);
	background: transparent; border: 1px solid transparent;
	transition: all .2s; cursor: pointer; font-family: var(--acp-font);
}
.ajt-inv-fbtn:hover { background: var(--acp-primary-light); color: var(--acp-primary); }
.ajt-inv-fbtn.act { background: var(--acp-primary-light); color: var(--acp-primary); border-color: var(--acp-primary-light); }
.ajt-inv-count { font-size: 11px; color: var(--acp-text-dim); font-weight: 600; }

/* Table */
.ajt-inv-scroll { max-height: 420px; overflow-y: auto; overflow-x: auto; }
.ajt-inv-scroll::-webkit-scrollbar { width: 5px; }
.ajt-inv-scroll::-webkit-scrollbar-thumb { background: var(--acp-border-light); border-radius: 10px; }
.ajt-inv-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.ajt-inv-tbl thead th {
	text-align: left; padding: 10px 16px; font-size: 10px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .8px; color: var(--acp-text-dim);
	background: var(--acp-surface); border-bottom: 1px solid var(--acp-border);
	position: sticky; top: 0; z-index: 2;
}
.ajt-inv-tbl tbody tr { transition: background .15s; }
.ajt-inv-tbl tbody tr:hover { background: var(--acp-card-hover); }
.ajt-inv-tbl tbody td { padding: 13px 16px; border-bottom: 1px solid var(--acp-border); vertical-align: middle; color: var(--acp-text); }

.inv-num { font-weight: 700; color: var(--acp-text); }
.inv-desc { font-size: 11px; color: var(--acp-text-muted); margin-top: 2px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-date { font-size: 13px; color: var(--acp-text); }
.inv-due { font-size: 11px; margin-top: 2px; font-weight: 600; }
.inv-amt { font-weight: 800; font-size: 14px; color: var(--acp-text); }

/* Status dots + glow */
.ajt-inv-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.ajt-inv-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Action buttons */
.ajt-inv-actions { display: flex; gap: 5px; }
.ajt-inv-btn {
	padding: 6px 12px; border-radius: var(--acp-radius-sm); font-size: 11px; font-weight: 700;
	text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
	transition: all .2s; cursor: pointer; line-height: 1.4; font-family: var(--acp-font); border: none;
}
.ajt-inv-btn-ghost { background: var(--acp-surface); border: 1px solid var(--acp-border); color: var(--acp-text-muted); }
.ajt-inv-btn-ghost:hover { border-color: var(--acp-primary); color: var(--acp-primary); }
.ajt-inv-btn-fill, .ajt-inv-btn-card { background: var(--acp-primary); color: #fff !important; border: 1px solid var(--acp-primary); }
.ajt-inv-btn-fill:hover, .ajt-inv-btn-card:hover { background: var(--acp-primary-hover); border-color: var(--acp-primary-hover); }

/* Pagination */
.ajt-inv-pag { display: flex; justify-content: center; gap: 4px; padding: 12px 16px; border-top: 1px solid var(--acp-border); background: var(--acp-surface); }
.ajt-inv-pag a { padding: 5px 10px; border-radius: var(--acp-radius-sm); text-decoration: none; font-size: 11px; font-weight: 700; color: var(--acp-text-muted); border: 1px solid var(--acp-border); transition: all .15s; }
.ajt-inv-pag a:hover { border-color: var(--acp-primary); color: var(--acp-primary); }
.ajt-inv-pag a.cur { background: var(--acp-primary); color: #fff; border-color: var(--acp-primary); }

/* ═══════════════════════════════════════════════════════════
 * 5. MSP HUB COMPATIBILITY
 * ═══════════════════════════════════════════════════════════ */
.acp-b .ajt-msphub-portal-section { color: var(--acp-text); }
.acp-b .ajt-msphub-table thead th { background: var(--acp-surface); border-color: var(--acp-border); color: var(--acp-text-dim); }
.acp-b .ajt-msphub-table tbody td { border-color: var(--acp-border); color: var(--acp-text); }
.acp-b .ajt-msphub-table tbody tr:hover { background: var(--acp-card-hover); }
.acp-b .ajt-msphub-btn { background: var(--acp-input-bg); border-color: var(--acp-border); color: var(--acp-text-muted); }
.acp-b .ajt-msphub-btn:hover { border-color: var(--acp-primary); color: var(--acp-primary); }
.acp-b .ajt-msphub-btn-primary { background: var(--acp-primary); color: #fff; border-color: var(--acp-primary); }
.acp-b .ajt-msphub-card { background: var(--acp-surface); border-color: var(--acp-border); }
.acp-b .ajt-msphub-empty { color: var(--acp-text-dim); }

/* ═══════════════════════════════════════════════════════════
 * 6. MODAL CENTERING — Push overlays below site nav
 * ═══════════════════════════════════════════════════════════ */
#ajt-msphub-ticket-overlay,
#ajt-msphub-new-ticket-overlay,
#ajt-msphub-quote-detail-overlay,
#ajt-cp-pay-overlay {
	padding-top: 80px !important;
}

/* ═══════════════════════════════════════════════════════════
 * 7. ANIMATIONS
 * ═══════════════════════════════════════════════════════════ */
.acp { animation: acpFadeIn .35s ease both; }
@keyframes acpFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ═══════════════════════════════════════════════════════════
 * 8. RESPONSIVE — Mobile collapses sidebar to horizontal
 * ═══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
	.acp { flex-direction: column; margin: 16px auto 0; min-height: auto; }
	.acp-side {
		width: 100%;
		flex-direction: column;
		border-radius: var(--acp-radius-lg) var(--acp-radius-lg) 0 0;
	}
	.acp-main {
		border-radius: 0 0 var(--acp-radius-lg) var(--acp-radius-lg);
	}
	.acp-side-hdr {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 16px 18px;
		border-bottom: 1px solid rgba(255,255,255,.08);
	}
	.acp-avatar { margin-bottom: 0; width: 36px; height: 36px; font-size: 15px; }
	.acp-side-nav {
		display: flex;
		overflow-x: auto;
		gap: 2px;
		padding: 8px 10px;
		scrollbar-width: thin;
	}
	.acp-side-nav a {
		white-space: nowrap;
		padding: 8px 14px;
		font-size: 12px;
		margin-bottom: 0;
		border-radius: var(--acp-radius-sm);
	}
	.acp-side-nav a.active::before { display: none; }
	.acp-side-foot {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 10px 14px;
	}
	.acp-theme-toggle { width: auto; }
	.acp .acp-b { padding: 16px; }
	.ajt-inv-summary { flex-direction: column; gap: 8px; }
	.ajt-inv-sbox-val { font-size: 24px !important; }
	.ajt-inv-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
}

@media (max-width: 480px) {
	.ajt-inv-tbl td:nth-child(2), .ajt-inv-tbl th:nth-child(2) { display: none; }
	.ajt-inv-scroll { max-height: 320px; }
	.ajt-inv-btn { padding: 5px 8px; font-size: 10px; }
	.acp-side-hdr .acp-side-email { display: none; }
}

/* ═══════════════════════════════════════════════════════════
 * 9. LEGACY COMPAT
 * ═══════════════════════════════════════════════════════════ */
.ajt-badge { border-radius: 12px; font-size: 12px; font-weight: 600; }
.ajt-badge-success { background: rgba(5,150,105,.1); color: var(--acp-success); }
.ajt-badge-warning { background: rgba(217,119,6,.1); color: var(--acp-warning); }
.ajt-badge-danger { background: rgba(220,38,38,.1); color: var(--acp-danger); }
.ajt-button-primary { background: var(--acp-primary); color: #fff; border-radius: var(--acp-radius-sm); }
.ajt-button-primary:hover { background: var(--acp-primary-hover); }

/* ═══════════════════════════════════════════════════════════
 * 10. LOGIN FORM (pre-auth)
 * ═══════════════════════════════════════════════════════════ */
.ajt-portal-login { font-family: var(--acp-font); }