/* ==========================================================================
   Trust Center PQ – Frontend Styles v1.1
   Isolated from Elementor via .tcp-wrap scope.
   ========================================================================== */

:root {
	--tcp-accent:       var(--e-global-color-accent, #00b5ad);
	--tcp-text:         #111827;
	--tcp-text-muted:   #6b7280;
	--tcp-border:       #e5e7eb;
	--tcp-bg:           #f9fafb;
	--tcp-white:        #ffffff;
	--tcp-locked-bg:    #f3f4f6;
	--tcp-locked-text:  #9ca3af;
	--tcp-sidebar-w:    220px;
	--tcp-radius:       10px;
	--tcp-shadow:       0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}

/* ==========================================================================
   RESET inside wrap — fight Elementor defaults
   ========================================================================== */
.tcp-wrap,
.tcp-wrap * {
	box-sizing: border-box;
}

.tcp-wrap {
	font-family: inherit;
	color: var(--tcp-text);
	background: var(--tcp-bg);
	/* bleed past Elementor section padding */
	margin-left: calc(-1 * var(--e-container-padding-inline, 20px));
	margin-right: calc(-1 * var(--e-container-padding-inline, 20px));
	width: calc(100% + 2 * var(--e-container-padding-inline, 20px));
}

.tcp-wrap h1,
.tcp-wrap h2,
.tcp-wrap h3,
.tcp-wrap p {
	margin-top: 0;
}

/* ==========================================================================
   Header
   ========================================================================== */
.tcp-header {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	padding: 0 32px;
	height: 64px;
	background: var(--tcp-white);
	border-bottom: 1px solid var(--tcp-border);
	position: sticky;
	top: 0;
	z-index: 999;
	gap: 16px;
}

.tcp-header__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.tcp-header__logo {
	height: 36px !important;
	width: auto !important;
	max-width: none !important;
}

.tcp-header__trust-label {
	font-size: 13px;
	color: var(--tcp-text-muted);
	padding-left: 14px;
	border-left: 1px solid var(--tcp-border);
	white-space: nowrap;
}

.tcp-header__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

/* ==========================================================================
   Layout — sidebar + main
   ========================================================================== */
.tcp-layout {
	display: flex !important;
	min-height: calc(100vh - 64px);
	align-items: stretch;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */
.tcp-sidebar {
	width: var(--tcp-sidebar-w);
	min-width: var(--tcp-sidebar-w);
	background: var(--tcp-white) !important;
	border-right: 1px solid var(--tcp-border);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: sticky;
	top: 64px;
	height: calc(100vh - 64px);
	overflow-y: auto;
	flex-shrink: 0;
}

.tcp-sidebar__nav {
	padding: 20px 10px;
}

.tcp-nav-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tcp-nav-item {
	margin: 0 !important;
	padding: 0 !important;
}

.tcp-nav-link {
	display: flex !important;
	align-items: center;
	gap: 9px;
	padding: 9px 12px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 500;
	color: var(--tcp-text-muted) !important;
	text-decoration: none !important;
	transition: background 0.15s, color 0.15s;
	line-height: 1.4;
}

.tcp-nav-link svg {
	flex-shrink: 0;
	opacity: 0.55;
	width: 15px;
	height: 15px;
}

.tcp-nav-link:hover {
	background: var(--tcp-bg);
	color: var(--tcp-text) !important;
}

.tcp-nav-item--active .tcp-nav-link {
	background: #e6f7f7;
	color: var(--tcp-accent) !important;
	font-weight: 600;
}

.tcp-nav-item--active .tcp-nav-link svg {
	opacity: 1;
}

.tcp-sidebar__footer {
	padding: 14px 16px;
	border-top: 1px solid var(--tcp-border);
}

.tcp-sidebar__powered {
	font-size: 11px;
	color: var(--tcp-text-muted);
	margin: 0;
}

.tcp-sidebar__powered a {
	color: var(--tcp-text-muted);
	text-decoration: none;
}

/* ==========================================================================
   Main content area
   ========================================================================== */
.tcp-main {
	flex: 1;
	padding: 40px 48px;
	min-width: 0; /* prevent overflow */
	background: var(--tcp-bg);
}

.tcp-main--full {
	max-width: 860px;
	margin: 0 auto;
}

/* ==========================================================================
   Panels
   ========================================================================== */
.tcp-panel { }
.tcp-panel--section { }

/* ==========================================================================
   Overview hero
   ========================================================================== */
.tcp-overview-hero {
	margin-bottom: 36px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--tcp-border);
}

.tcp-overview__title {
	font-size: 26px !important;
	font-weight: 700 !important;
	margin: 0 0 10px !important;
	color: var(--tcp-text) !important;
	line-height: 1.2 !important;
}

.tcp-overview__desc {
	font-size: 15px !important;
	color: var(--tcp-text-muted) !important;
	line-height: 1.65 !important;
	max-width: 600px;
	margin: 0 0 20px !important;
}

/* ==========================================================================
   Compliance badges
   ========================================================================== */
.tcp-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.tcp-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	background: var(--tcp-white);
	border: 1px solid var(--tcp-border);
	border-radius: 20px;
	font-size: 12px;
	font-weight: 500;
	color: var(--tcp-text);
}

.tcp-badge svg {
	color: #16a34a;
	flex-shrink: 0;
}

/* ==========================================================================
   Section heading
   ========================================================================== */
.tcp-section-block {
	margin-bottom: 36px;
}

.tcp-section-title {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--tcp-text-muted) !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0 0 14px !important;
}

.tcp-panel__header {
	margin-bottom: 24px;
}

.tcp-panel__title {
	font-size: 22px !important;
	font-weight: 700 !important;
	margin: 0 0 8px !important;
}

.tcp-panel__desc {
	font-size: 14px !important;
	color: var(--tcp-text-muted) !important;
	margin: 0 !important;
}

/* ==========================================================================
   Document list + rows  (Fathom-style full-width rows)
   ========================================================================== */

/* List wrapper — replaces the old grid */
.tcp-doc-list {
	background: var(--tcp-white);
	border: 1px solid var(--tcp-border);
	border-radius: var(--tcp-radius);
	overflow: hidden;
}

/* Each row */
.tcp-doc-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--tcp-border);
	transition: background 0.12s;
}

.tcp-doc-row:last-child {
	border-bottom: none;
}

.tcp-doc-row:hover {
	background: #f9fafb;
}

.tcp-doc-row--locked:hover {
	background: #f9fafb;
}

/* Left side: icon + title */
.tcp-doc-row__left {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.tcp-doc-row__icon {
	color: var(--tcp-text-muted);
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.tcp-doc-row--locked .tcp-doc-row__icon {
	color: #c0c0c0;
}

.tcp-doc-row__title {
	font-size: 14px;
	font-weight: 600;
	color: var(--tcp-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tcp-doc-row--locked .tcp-doc-row__title {
	color: #555;
}

/* Right side: action button */
.tcp-doc-row__right {
	flex-shrink: 0;
}

/* Action buttons — small, outlined, Fathom-style */
.tcp-row-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 5px;
	padding: 5px 11px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
	text-decoration: none !important;
	border: 1px solid var(--tcp-border);
	background: var(--tcp-white);
	color: var(--tcp-text) !important;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
	white-space: nowrap;
	cursor: pointer;
}

.tcp-row-btn svg {
	flex-shrink: 0;
	opacity: 0.6;
}

/* Lock button */
.tcp-row-btn--lock {
	color: var(--tcp-text-muted) !important;
}

.tcp-row-btn--lock:hover {
	border-color: var(--tcp-accent);
	color: var(--tcp-accent) !important;
	background: #f0fafa;
}

.tcp-row-btn--lock:hover svg {
	opacity: 1;
}

/* View button */
.tcp-row-btn--view {
	color: var(--tcp-accent) !important;
	border-color: var(--tcp-accent) !important;
}

.tcp-row-btn--view:hover {
	background: var(--tcp-accent) !important;
	color: #fff !important;
}

.tcp-row-btn--view:hover svg {
	opacity: 1;
}

/* Disabled */
.tcp-row-btn--disabled {
	color: #9ca3af !important;
	cursor: default;
	opacity: 0.6;
}

/* ==========================================================================
   Buttons (header)
   ========================================================================== */
.tcp-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 8px 18px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none !important;
	cursor: pointer;
	border: 1px solid transparent;
	transition: opacity 0.15s, background 0.15s, border-color 0.15s;
	white-space: nowrap;
	line-height: 1.4;
}

.tcp-btn--primary {
	background: var(--tcp-accent) !important;
	color: #fff !important;
	border-color: var(--tcp-accent);
}
.tcp-btn--primary:hover { opacity: 0.88; }

.tcp-btn--ghost {
	background: transparent !important;
	color: var(--tcp-text-muted) !important;
	border-color: var(--tcp-border);
}
.tcp-btn--ghost:hover {
	background: var(--tcp-bg) !important;
	color: var(--tcp-text) !important;
}

/* ==========================================================================
   Access denied block
   ========================================================================== */
.tcp-access-denied { text-align: center; padding: 60px 20px; max-width: 460px; margin: 0 auto; }
.tcp-access-denied__icon { color: #c0c0c0; margin-bottom: 18px; }
.tcp-access-denied__title { font-size: 20px; font-weight: 600; margin: 0 0 10px; }
.tcp-access-denied__message { font-size: 15px; color: #666; margin-bottom: 24px; }
.tcp-access-denied__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tcp-access-denied__sub { font-size: 13px; color: #888; }

/* ==========================================================================
   Password change form
   ========================================================================== */
.tcp-change-password { max-width: 420px; margin: 0 auto; padding: 20px 0; }
.tcp-change-password__title { font-size: 22px; margin-bottom: 6px; }
.tcp-change-password__intro { color: #666; margin-bottom: 24px; }
.tcp-change-password__form { display: flex; flex-direction: column; gap: 18px; }
.tcp-field { display: flex; flex-direction: column; gap: 5px; }
.tcp-field label { font-size: 14px; font-weight: 500; }
.tcp-field input[type="password"] { padding: 10px 12px; border: 1px solid #d0d0d0; border-radius: 6px; font-size: 15px; width: 100%; }
.tcp-field input[type="password"]:focus { outline: none; border-color: var(--tcp-accent); }
.tcp-field__hint { font-size: 12px; color: #999; }
.tcp-change-password__message { padding: 10px 12px; border-radius: 6px; font-size: 14px; }
.tcp-message--success { background: #ecfdf5; color: #065f46; }
.tcp-message--error { background: #fef2f2; color: #991b1b; }

/* Overview hero top row */
.tcp-overview-hero__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.tcp-overview-hero__cta {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
	align-items: center;
	padding-top: 4px;
}

/* Empty state */
.tcp-empty { padding: 40px 0; color: var(--tcp-text-muted); font-size: 14px; font-style: italic; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 768px) {
	.tcp-wrap { margin-left: -15px; margin-right: -15px; width: calc(100% + 30px); }
	.tcp-layout { flex-direction: column !important; }
	.tcp-sidebar { width: 100% !important; min-width: 0 !important; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--tcp-border); }
	.tcp-nav-list { flex-direction: row !important; flex-wrap: wrap; gap: 4px; }
	.tcp-nav-link { padding: 6px 10px; font-size: 13px; }
	.tcp-main { padding: 24px 18px; }
	.tcp-overview__title { font-size: 20px !important; }
	.tcp-doc-row { padding: 12px 14px; gap: 10px; }
	.tcp-doc-row__title { font-size: 13px; }
	.tcp-row-btn { padding: 5px 10px; font-size: 12px; }
	.tcp-header { padding: 0 16px; }
	.tcp-header__trust-label { display: none; }
}