/* ==========================================================
   Tetherfi Partner Portal — exact-match styles
   Colors sampled directly from the approved design screenshots.
   ========================================================== */

:root {
	--tfi-purple:        #512B8B; /* primary brand purple — sidebar, buttons, icon */
	--tfi-purple-dark:    #412266; /* active nav item background */
	--tfi-purple-light:   #62408F; /* avatar circle background */
	--tfi-purple-input:   #512272; /* input field background on the purple auth card */
	--tfi-purple-grad-a:  #81409B; /* gradient blob (lighter, top-left) */
	--tfi-purple-grad-b:  #572B8C; /* gradient base (deeper, right side) */
	--tfi-red:            #E3173E; /* CTA buttons + brand mark accent */
	--tfi-bg-light:       #EDEAF3; /* main content area background */
	--tfi-input-grey:     #EEEEEE; /* Edit Profile input background */
	--tfi-text-dark:      #1F182A; /* card titles, headings */
	--tfi-text-grey:      #57525F; /* card descriptions, body copy */
	--tfi-border:         #E3E6ED;
	--tfi-font: 'Poppins', -apple-system, "Segoe UI", sans-serif; /* closest match to the rounded wordmark */
}

/* ---------- Auth screens (Login / Forgot Password) ---------- */
.tfi-auth-card {
	position: relative;
	max-width: 620px;
	margin: 0 auto;
	padding: 56px 60px;
	color: #fff;
	font-family: var(--tfi-font);
	background: radial-gradient(circle at 0% 0%, var(--tfi-purple-grad-a) 0%, transparent 45%),
	            linear-gradient(135deg, var(--tfi-purple-grad-a), var(--tfi-purple-grad-b));
	border-radius: 0;
	overflow: hidden;
}
.tfi-auth-card h1 {
	margin: 0 0 10px;
	font-size: 30px;
	font-weight: 700;
	position: relative;
}
.tfi-auth-sub {
	color: rgba(255,255,255,0.82);
	font-size: 14px;
	margin-bottom: 26px;
	position: relative;
	max-width: 46ch;
}
.tfi-auth-card label {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	margin-bottom: 8px;
	position: relative;
}
.tfi-auth-card input {
	width: 100%;
	padding: 13px 16px;
	margin: 0 0 20px;
	border-radius: 8px;
	border: none;
	background: var(--tfi-purple-input);
	color: #fff;
	font-size: 14px;
	font-family: inherit;
	position: relative;
}
.tfi-auth-card input::placeholder { color: rgba(255,255,255,0.45); }
.tfi-auth-card input:disabled { opacity: 0.6; }

.tfi-password-field { position: relative; }
.tfi-password-field input { padding-right: 46px; }
.tfi-toggle-pw {
	position: absolute;
	right: 12px; top: 12px;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 4px !important;
	color: #fff !important;
	cursor: pointer;
	display: flex;
}
.tfi-toggle-pw svg { width: 20px; height: 20px; }

.tfi-forgot-link, .tfi-back-link {
	display: block;
	text-align: right;
	color: #fff;
	font-size: 13.5px;
	text-decoration: underline;
	margin-bottom: 20px;
	position: relative;
}
.tfi-back-link { text-align: center; margin-top: 18px; text-decoration: none; font-weight: 600; }

.tfi-btn-primary {
	width: 100%;
	padding: 15px !important;
	background: var(--tfi-red) !important;
	color: #fff !important;
	border: none !important;
	border-radius: 8px !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	font-family: inherit;
	text-align: center !important;
	cursor: pointer;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.tfi-btn-primary:hover { background: #C81338 !important; }
.tfi-btn-primary svg { width: 18px; height: 18px; }

.tfi-support {
	text-align: center;
	font-size: 13px;
	color: rgba(255,255,255,0.82);
	margin-top: 18px;
	position: relative;
}
.tfi-support a { color: #fff; font-weight: 700; text-decoration: underline; }

.tfi-error {
	background: rgba(227,23,62,0.18);
	border: 1px solid rgba(227,23,62,0.4);
	padding: 11px 15px;
	border-radius: 8px;
	margin-bottom: 18px;
	font-size: 13.5px;
	position: relative;
}
.tfi-success {
	background: rgba(30,156,107,0.18);
	border: 1px solid rgba(30,156,107,0.4);
	padding: 11px 15px;
	border-radius: 8px;
	margin-bottom: 18px;
	font-size: 13.5px;
	position: relative;
}

/* ---------- Portal layout (Dashboard / Training / Profile) ---------- */
.tfi-portal-layout { display: flex; min-height: 100vh; align-items: stretch; font-family: var(--tfi-font); }

.tfi-sidebar {
	width: 260px;
	flex: none;
	background: var(--tfi-purple);
	color: #fff;
	padding: 28px 0 24px;
	display: flex;
	flex-direction: column;
	align-self: stretch;
	min-height: 100%;
}
.tfi-sidebar .tfi-logo-row {
	display: flex; align-items: center; gap: 8px;
	padding: 0 24px;
	margin-bottom: 30px;
}
.tfi-sidebar .tfi-logo-row .tfi-mark { width: 22px; height: 22px; flex: none; }
.tfi-sidebar .tfi-logo-row .tfi-wordmark {
	font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -0.5px;
}

.tfi-identity {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	cursor: pointer;
	padding: 8px 24px;
	margin-bottom: 4px;
}
.tfi-avatar {
	width: 36px; height: 36px; border-radius: 50%;
	background: var(--tfi-purple-light);
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 700; flex: none; color: #fff;
}
.tfi-identity strong { display: block; font-size: 14px; font-weight: 600; }
.tfi-identity small { display: block; font-size: 11.5px; color: rgba(255,255,255,0.7); }
.tfi-identity .tfi-caret { margin-left: auto; width: 12px; height: 12px; opacity: 0.8; }

.tfi-dropdown {
	display: none;
	position: absolute;
	top: 100%; left: 24px; right: 24px;
	background: #fff;
	color: var(--tfi-text-dark);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(0,0,0,0.25);
	z-index: 10;
	margin-top: 4px;
}
.tfi-identity.open .tfi-dropdown { display: block; }
.tfi-dropdown a {
	display: block;
	padding: 11px 16px;
	font-size: 13.5px;
	color: var(--tfi-text-dark);
	text-decoration: none;
}
.tfi-dropdown a:hover { background: var(--tfi-bg-light); }

.tfi-sidebar nav { margin-top: 18px; }
.tfi-sidebar nav a {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 24px;
	color: #fff;
	opacity: 0.88;
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 500;
}
.tfi-sidebar nav a svg { width: 20px; height: 20px; flex: none; }
.tfi-sidebar nav a.active {
	background: var(--tfi-purple-dark);
	opacity: 1;
	font-weight: 700;
}
.tfi-sidebar nav a:hover { opacity: 1; }

.tfi-sidebar-footer {
	/*margin-top: auto; */
	padding: 2px 24px 9px;
	border-top: 1px solid rgba(255,255,255,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.tfi-sidebar-footer p {
	font-size: 12px;
	line-height: 1.5;
	color: rgba(255,255,255,0.75);
	margin: 16px 0 0;
}
.tfi-sidebar-footer a {
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
}

.tfi-portal-main { flex: 1; padding: 40px 44px; background: var(--tfi-bg-light); }
.tfi-portal-main h1 { margin: 0 0 24px; font-size: 26px; font-weight: 700; color: var(--tfi-text-dark); }

.tfi-resource-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	align-items: stretch;
}
.tfi-resource-card {
	background: #fff;
	border-radius: 12px;
	padding: 26px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 300px;
}
.tfi-doc-icon { width: 56px; height: 66px; margin-bottom: 14px; flex: none; }
.tfi-resource-card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--tfi-text-dark); }
.tfi-resource-card p {
	font-size: 13px;
	color: var(--tfi-text-grey);
	margin: 0 0 18px;
	line-height: 1.5;
	flex: 1 1 auto;
	display: -webkit-box;
	cursor: help;
	position: relative;
}
.tfi-resource-card p:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 12px);
	left: 0;
	background: var(--tfi-text-dark);
	color: #fff;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.55;
	min-width: 240px;
	max-width: 320px;
	width: max-content;
	white-space: normal;
	box-shadow: 0 10px 28px rgba(0,0,0,0.28);
	z-index: 60;
	pointer-events: none;
}
.tfi-resource-card p:hover::before {
	content: "";
	position: absolute;
	bottom: calc(100% + 5px);
	left: 22px;
	border: 7px solid transparent;
	border-top-color: var(--tfi-text-dark);
	z-index: 61;
	pointer-events: none;
}
.tfi-btn-download {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 18px !important;
	background: var(--tfi-purple) !important;
	color: #fff !important;
	border-radius: 7px !important;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 600;
	font-family: inherit;
	border: none !important;
	cursor: pointer;
	margin-top: auto;
	align-self: flex-start;
}
.tfi-btn-download svg { width: 16px; height: 16px; }
.tfi-btn-download:hover { background: var(--tfi-purple-dark) !important; }
.tfi-btn-disabled { background: #C9C4D6 !important; cursor: not-allowed; }

.tfi-training-card {
	background: #fff;
	border-radius: 12px;
	padding: 32px;
	max-width: 900px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.tfi-training-card h3 { margin-top: 0; font-size: 17px; font-weight: 700; color: var(--tfi-text-dark); }
.tfi-training-card p { color: var(--tfi-text-grey); font-size: 14.5px; line-height: 1.7; }
.tfi-btn-goto {
	display: inline-flex; width: 100%;
	padding: 14px 24px !important;
	margin-top: 14px;
	background: var(--tfi-purple) !important;
	font-weight: 600 !important;
}
.tfi-btn-goto:hover { background: var(--tfi-purple-dark) !important; }

.tfi-edit-profile-panel {
	background: #fff;
	border-radius: 12px;
	padding: 32px;
	max-width: 480px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.tfi-panel-header {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 22px;
}
.tfi-panel-header h1 { margin: 0; }
.tfi-panel-close {
	display: flex; color: var(--tfi-text-grey); text-decoration: none;
}
.tfi-panel-close svg { width: 22px; height: 22px; }
.tfi-edit-profile-panel label {
	display: block; font-size: 13.5px; font-weight: 700; margin: 16px 0 7px; color: var(--tfi-text-dark);
}
.tfi-edit-profile-panel label small { font-weight: 400; color: var(--tfi-text-grey); }
.tfi-edit-profile-panel input {
	width: 100%; padding: 12px 14px; border-radius: 8px;
	border: none; background: var(--tfi-input-grey); font-size: 14px;
	font-family: inherit; color: var(--tfi-text-dark);
}
.tfi-edit-profile-panel input::placeholder { color: #9A9A9A; }
.tfi-edit-profile-panel input:disabled { color: #9AA0AC; }
.tfi-edit-profile-panel .tfi-btn-primary { margin-top: 24px; }
.tfi-sidebar-footer p a {
    color: #FFC107;
}
/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.tfi-portal-layout { flex-direction: column; }
	.tfi-sidebar { width: 100%; }
	.tfi-resource-grid { grid-template-columns: 1fr; }
	.tfi-auth-card { padding: 40px 28px; }
}