/* ============================================================
   Client Portal — front-end styles
   Scoped under .cp-portal and .cp-trigger-wrap to avoid theme bleed.
   ============================================================ */

/* --- Login trigger + dropdown panel --- */
/*
 * The trigger renders inline wherever you drop the [client_portal_login]
 * shortcode (Elementor widget, menu, header, etc.). The wrap stays
 * the same compact size regardless of logged-in state — only the
 * dropdown panel content changes.
 */
.cp-trigger-wrap,
.cp-trigger-wrap * {
	box-sizing: border-box;
}
.cp-trigger-wrap {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/*
 * Trigger button — EXPLICIT reset to defeat any theme button styles
 * (Elementor, Astra, etc. often paint buttons with background + border).
 * This must look identical whether the user is logged in or not.
 */
.cp-trigger-wrap .cp-trigger-btn,
.cp-trigger-wrap .cp-trigger-btn:hover,
.cp-trigger-wrap .cp-trigger-btn:focus,
.cp-trigger-wrap .cp-trigger-btn:active {
	background: transparent !important;
	background-image: none !important;
	color: #1f2a44 !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	padding: 6px 12px !important;
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	border-radius: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	width: auto !important;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.cp-trigger-wrap .cp-trigger-btn .cp-trigger-caret {
	font-size: 10px;
	margin-left: 2px;
}
/*
 * Panel is hidden by default with !important to beat any theme / Elementor
 * CSS that may set display on dialogs or absolute-positioned elements.
 * The .is-open class on the wrapper is the ONLY thing that opens it.
 */
.cp-trigger-panel {
	display: none !important;
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	width: 280px;
	background: #fff;
	border: 1px solid #e3e6ec;
	border-radius: 8px;
	box-shadow: 0 12px 40px rgba(20, 24, 40, 0.12);
	padding: 16px;
	z-index: 999999;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}
.cp-trigger-wrap.is-open .cp-trigger-panel {
	display: block !important;
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}
.cp-panel-title {
	font-size: 15px;
	font-weight: 600;
	color: #1f2a44;
	margin: 0 0 12px;
}
.cp-login-form { display: flex; flex-direction: column; gap: 8px; }
.cp-login-input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #d8dce5;
	border-radius: 4px;
	font-size: 13px;
	box-sizing: border-box;
}
.cp-login-submit {
	background: #d91955;
	color: #fff;
	border: 0;
	padding: 9px 14px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.5px;
	cursor: pointer;
	margin-top: 4px;
}
.cp-login-submit:hover { background: #b81548; }
.cp-panel-forgot {
	display: block;
	margin-top: 10px;
	font-size: 11px;
	color: #6b7280;
	text-decoration: none;
}
.cp-panel-error {
	color: #b81548;
	font-size: 12px;
	margin: 6px 0 0;
}
/* Logged-in panel content — strictly scoped INSIDE the dropdown panel
   so it cannot bleed out onto the trigger button or the surrounding header. */
.cp-trigger-panel .cp-panel-welcome {
	display: block;
}
.cp-trigger-panel .cp-panel-cta,
.cp-trigger-panel .cp-panel-logout {
	display: inline-block;
	background: #d91955;
	color: #fff !important;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: 0.5px;
	margin: 0 6px 0 0;
}
.cp-trigger-panel .cp-panel-logout {
	font-size: 11px;
	letter-spacing: 1px;
}

/* --- Portal page --- */
.cp-portal {
	background: #f3f4f7;
	padding: 32px 16px 64px;
	min-height: 60vh;
}
.cp-portal-inner {
	max-width: 1120px;
	margin: 0 auto;
}
.cp-card {
	background: #fff;
	border: 1px solid #e3e6ec;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 1px 2px rgba(20, 24, 40, 0.04);
}
.cp-section-title {
	font-size: 15px;
	font-weight: 700;
	color: #1f2a44;
	margin: 0 0 14px;
}
.cp-eyebrow {
	font-size: 11px;
	color: #6b7280;
	letter-spacing: 1px;
	margin: 0 0 4px;
	font-weight: 600;
}

/* Featured */
.cp-featured {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	gap: 18px;
	align-items: center;
}
.cp-featured-icon {
	width: 64px; height: 64px;
	background: #f0f2f7;
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	color: #6b7280;
}
.cp-featured-title { font-size: 22px; margin: 0 0 6px; color: #1f2a44; font-weight: 700; }
.cp-featured-meta { color: #6b7280; font-size: 12px; margin: 0 0 8px; }
.cp-featured-meta span { margin-right: 14px; }
.cp-featured-desc { color: #4b5563; font-size: 13px; margin: 0; }
.cp-featured-actions { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }

.cp-btn {
	display: inline-block;
	padding: 9px 14px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	border: 1px solid transparent;
}
.cp-btn-primary { background: #1f2a44; color: #fff !important; }
.cp-btn-primary:hover { background: #0f172a; }
.cp-btn-secondary {
	background: #fff;
	color: #1f2a44 !important;
	border-color: #d8dce5;
}

/* Grid */
.cp-grid {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 20px;
}
@media (max-width: 860px) {
	.cp-grid { grid-template-columns: 1fr; }
	.cp-featured { grid-template-columns: 1fr; }
	.cp-featured-actions { flex-direction: row; }
}

/* Suggested */
.cp-suggested-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
}
.cp-suggested-item {
	display: flex; gap: 10px;
	padding: 10px 0;
}
.cp-suggested-icon {
	width: 28px; height: 28px;
	background: #f0f2f7; border-radius: 6px;
	display:flex; align-items:center; justify-content:center;
	flex: none;
}
.cp-suggested-name { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: #1f2a44; }
.cp-suggested-desc { margin: 0 0 4px; font-size: 12px; color: #6b7280; }
.cp-suggested-link { font-size: 12px; color: #1f2a44; text-decoration: none; font-weight: 600; }

/* Archive */
.cp-archive-table { width: 100%; border-collapse: collapse; }
.cp-archive-table th {
	text-align: left;
	font-size: 10px;
	letter-spacing: 1px;
	color: #6b7280;
	border-bottom: 1px solid #e3e6ec;
	padding: 8px 8px;
	font-weight: 600;
}
.cp-archive-table td {
	border-bottom: 1px solid #f0f2f7;
	padding: 10px 8px;
	font-size: 13px;
	color: #1f2a44;
}
.cp-archive-table td:last-child { text-align: right; }
.cp-file-ico { margin-right: 6px; }
.cp-archive-dl { text-decoration: none; color: #1f2a44; font-size: 18px; }
/* Archive paginator — dot navigation that pages rows in place */
.cp-archive-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 16px 0 0;
	position: relative;
}
.cp-pager-arrow {
	background: transparent;
	border: 0;
	color: #1f2a44;
	font-size: 18px;
	line-height: 1;
	padding: 4px 8px;
	cursor: pointer;
	border-radius: 4px;
}
.cp-pager-arrow:hover:not([disabled]) { background: #f0f2f7; }
.cp-pager-arrow[disabled] { opacity: 0.3; cursor: default; }
.cp-pager-dots {
	display: inline-flex;
	gap: 6px;
}
.cp-pager-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #cbd1dc;
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
.cp-pager-dot:hover { background: #9aa3b5; }
.cp-pager-dot.is-active {
	background: #d91955;
	transform: scale(1.3);
}
.cp-pager-count {
	position: absolute;
	right: 0;
	font-size: 11px;
	color: #6b7280;
}

/* Latest Article empty state */
.cp-latest-empty { padding: 12px 0; }
.cp-empty-title { font-size: 13px; font-weight: 600; color: #1f2a44; margin: 0 0 6px; }
.cp-empty-help  { font-size: 12px; color: #6b7280; margin: 0 0 8px; }

/* Latest article */
.cp-latest-thumb img { width: 100%; height: auto; border-radius: 6px; display: block; margin-bottom: 10px; }
.cp-latest-title { font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.cp-latest-title a { color: #1f2a44; text-decoration: none; }
.cp-latest-meta { color: #6b7280; font-size: 11px; margin: 0 0 8px; }
.cp-latest-excerpt { color: #4b5563; font-size: 12px; margin: 0 0 8px; }
.cp-latest-link { font-size: 12px; color: #1f2a44; text-decoration: none; font-weight: 600; }

/* Rep */
.cp-rep-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.cp-rep-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.cp-rep-name { margin: 0; font-size: 14px; font-weight: 700; color: #1f2a44; }
.cp-rep-title { margin: 0; font-size: 12px; color: #6b7280; }
.cp-rep-contact { list-style: none; padding: 0; margin: 0 0 12px; }
.cp-rep-contact li { font-size: 12px; color: #1f2a44; margin: 4px 0; }
.cp-rep-contact a { color: #1f2a44; text-decoration: none; }
.cp-rep-cta { display: block; width: 100%; box-sizing: border-box; }