/**
 * VERTEX B2B Client Portal — front-end client dashboard.
 * Corporate / minimal / multinational: black, white, and brand red
 * #B41E36 as the single accent. Green/amber are used only where financial
 * convention requires it (paid vs. partial vs. outstanding). No emojis, no
 * decorative color, SVG line icons only.
 */

.vtx-portal {
	--vtx-black: #0a0a0b;
	--vtx-gray-900: #18181b;
	--vtx-gray-700: #3f3f46;
	--vtx-gray-500: #71717a;
	--vtx-gray-300: #d4d4d8;
	--vtx-gray-200: #e4e4e7;
	--vtx-gray-100: #f5f5f6;
	--vtx-white: #ffffff;
	--vtx-red: #B41E36;
	--vtx-red-dark: #8f1729;
	--vtx-red-tint: #fbe9ec;
	--vtx-success: #1f8a4c;
	--vtx-success-bg: #eaf7ee;
	--vtx-warn: #b8860b;
	--vtx-warn-bg: #fdf3e0;
	--vtx-danger: #B41E36;
	--vtx-danger-bg: #fbe9ec;
	--vtx-info: #2563eb;
	--vtx-info-bg: #eff6ff;
	--vtx-radius: 14px;

	font-family: "Helvetica Neue", Helvetica, Arial, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--vtx-gray-900);
	background: var(--vtx-gray-100);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.vtx-portal * { box-sizing: border-box; }
.vtx-portal a { color: inherit; }
.vtx-icon { display: block; }

/* ---------- Top bar ---------- */
.vtx-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--vtx-black);
	color: var(--vtx-white);
	padding: 16px 28px;
	border-bottom: 2px solid var(--vtx-red);
}
.vtx-topbar__brand { display: flex; align-items: center; gap: 14px; }
.vtx-topbar__logo { height: 28px; width: auto; display: block; }
.vtx-topbar__title { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #a1a1aa; font-weight: 700; }
.vtx-topbar__right { display: flex; align-items: center; gap: 18px; }

.vtx-user { text-align: right; line-height: 1.2; }
.vtx-user__name { display: block; font-size: 13px; font-weight: 600; color: var(--vtx-white); }
.vtx-user__company { display: block; font-size: 11px; color: #a1a1aa; }

/* ---------- Notifications ---------- */
.vtx-notif { position: relative; }
.vtx-notif__btn { background: transparent; border: none; color: var(--vtx-white); cursor: pointer; position: relative; padding: 6px; display: flex; }
.vtx-notif__badge { position: absolute; top: -2px; right: -2px; background: var(--vtx-red); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 5px; }
.vtx-notif__panel {
	display: none;
	position: absolute;
	right: 0;
	top: 40px;
	width: 320px;
	background: var(--vtx-white);
	color: var(--vtx-gray-900);
	border-radius: var(--vtx-radius);
	box-shadow: 0 12px 32px rgba(0,0,0,.22);
	overflow: hidden;
	z-index: 40;
}
.vtx-notif__panel.is-open { display: block; }
.vtx-notif__header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--vtx-gray-200); font-size: 12px; font-weight: 600; }
.vtx-notif__header button { background: none; border: none; color: var(--vtx-gray-500); font-size: 11px; cursor: pointer; }
.vtx-notif__list { max-height: 320px; overflow-y: auto; }
.vtx-notif__item { padding: 10px 16px; border-bottom: 1px solid var(--vtx-gray-100); font-size: 12px; }
.vtx-notif__item p { margin: 0 0 3px; }
.vtx-notif__item span { color: var(--vtx-gray-500); font-size: 11px; }
.vtx-notif__item.is-unread { background: var(--vtx-red-tint); }

/* ---------- Shell / layout ---------- */
.vtx-shell { display: flex; min-height: calc(100vh - 62px); }

.vtx-sidebar {
	width: 224px;
	flex-shrink: 0;
	background: var(--vtx-white);
	border-right: 1px solid var(--vtx-gray-200);
	padding: 20px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.vtx-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	border: none;
	text-align: left;
	padding: 11px 12px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--vtx-gray-700);
	cursor: pointer;
}
.vtx-nav-item:hover { background: var(--vtx-gray-100); color: var(--vtx-black); }
.vtx-nav-item.is-active { background: var(--vtx-black); color: var(--vtx-white); }
.vtx-nav-item.is-active .vtx-icon { color: var(--vtx-red); }

.vtx-main { flex: 1; padding: 32px 40px; max-width: 1180px; }

.vtx-page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.vtx-page-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--vtx-red); text-transform: uppercase; margin-bottom: 4px; }
.vtx-page-title { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--vtx-black); text-transform: uppercase; }
.vtx-date-pill { font-size: 12px; font-weight: 600; color: var(--vtx-gray-700); background: var(--vtx-white); border: 1px solid var(--vtx-gray-200); border-radius: 999px; padding: 6px 14px; }

.vtx-tab .vtx-page-title { text-transform: none; font-size: 22px; }

.vtx-tab { display: none; }
.vtx-tab.is-active { display: block; animation: vtx-fade .15s ease; }
@keyframes vtx-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- KPI cards ---------- */
.vtx-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.vtx-kpi-card { background: var(--vtx-white); border: 1px solid var(--vtx-gray-200); border-radius: var(--vtx-radius); padding: 20px 22px; }
.vtx-kpi-card--accent { border-color: var(--vtx-red); background: var(--vtx-red-tint); }
.vtx-kpi-card--accent .vtx-kpi-card__value { color: var(--vtx-red); }
.vtx-kpi-card__label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--vtx-gray-500); margin-bottom: 8px; }
.vtx-kpi-card__value { font-size: 28px; font-weight: 800; color: var(--vtx-black); }

/* ---------- Finance grid (financial card + chart) ---------- */
.vtx-finance-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; margin-bottom: 20px; align-items: stretch; }
@media (max-width: 900px) { .vtx-finance-grid { grid-template-columns: 1fr; } }

.vtx-financial-card { background: var(--vtx-black); color: var(--vtx-white); border-radius: var(--vtx-radius); padding: 30px 32px; }
.vtx-financial-card__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; gap: 10px; flex-wrap: wrap; }
.vtx-financial-card h2 { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.vtx-financial-card__sub { font-size: 11px; color: #a1a1aa; }

.vtx-hero-stat { border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); padding: 18px 0; margin-bottom: 20px; }
.vtx-hero-stat__label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #d4a3ac; font-weight: 700; margin-bottom: 6px; }
.vtx-hero-stat__value { display: block; font-size: 40px; font-weight: 800; letter-spacing: -0.02em; color: #ff8a9c; line-height: 1.1; }
.vtx-hero-stat__caption { display: block; font-size: 12px; color: #a1a1aa; margin-top: 6px; }

.vtx-financial-card__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; margin: 0 0 22px; }
.vtx-financial-card__label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #a1a1aa; margin-bottom: 4px; }
.vtx-financial-card__row strong { font-size: 18px; font-weight: 700; }
.vtx-text-success { color: #4fd07a !important; }
.vtx-text-danger { color: #ff8a9c !important; }

.vtx-progress { height: 10px; border-radius: 6px; background: #3f3f46; overflow: hidden; }
.vtx-progress--sm { height: 6px; }
.vtx-progress__bar { height: 100%; background: linear-gradient(90deg, #ff5c73, var(--vtx-red)); }
.vtx-progress__caption { font-size: 12px; color: var(--vtx-gray-500); margin: 8px 0 0; }
.vtx-financial-card .vtx-progress__caption { color: #d4d4d8; }

.vtx-chart-card { background: var(--vtx-white); border: 1px solid var(--vtx-gray-200); border-radius: var(--vtx-radius); padding: 26px 24px; display: flex; flex-direction: column; }
.vtx-chart-card h2 { margin: 0 0 18px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--vtx-black); }
.vtx-chart-card__body { display: flex; align-items: center; gap: 22px; flex: 1; }
.vtx-donut { flex-shrink: 0; }
.vtx-chart-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.vtx-chart-legend li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--vtx-gray-700); }
.vtx-chart-legend strong { margin-left: auto; font-size: 14px; color: var(--vtx-black); font-weight: 700; }
.vtx-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.vtx-dot--success { background: #2a9d5c; }
.vtx-dot--warn { background: #e8b64c; }
.vtx-dot--danger { background: var(--vtx-red); }

/* ---------- Panels / generic ---------- */
.vtx-panel { background: var(--vtx-white); border: 1px solid var(--vtx-gray-200); border-radius: var(--vtx-radius); padding: 24px 26px; margin-bottom: 18px; }
.vtx-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.vtx-panel h2 { margin: 0 0 14px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.vtx-panel__head h2 { margin: 0; }
.vtx-empty { color: var(--vtx-gray-500); font-size: 13px; padding: 20px 0; text-align: center; }
.vtx-link { color: var(--vtx-red); font-weight: 600; text-decoration: none; font-size: 12px; }
.vtx-link:hover { text-decoration: underline; }
.vtx-nav-link { background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }

/* ---------- Tables ---------- */
.vtx-table { width: 100%; border-collapse: collapse; background: var(--vtx-white); border: 1px solid var(--vtx-gray-200); border-radius: var(--vtx-radius); overflow: hidden; }
.vtx-table th { text-align: left; background: var(--vtx-gray-100); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--vtx-gray-700); padding: 11px 14px; }
.vtx-table td { padding: 13px 14px; font-size: 13px; border-top: 1px solid var(--vtx-gray-100); vertical-align: middle; }

/* ---------- Badges ---------- */
.vtx-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.vtx-badge--success { background: var(--vtx-success-bg); color: var(--vtx-success); }
.vtx-badge--danger { background: var(--vtx-danger-bg); color: var(--vtx-danger); }
.vtx-badge--info { background: var(--vtx-info-bg); color: var(--vtx-info); }
.vtx-badge--neutral { background: var(--vtx-gray-100); color: var(--vtx-gray-700); }

/* ---------- Buttons ---------- */
.vtx-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; padding: 10px 18px; font-size: 13px; font-weight: 700; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .15s ease, transform .1s ease; }
.vtx-btn--primary { background: var(--vtx-red); color: var(--vtx-white); }
.vtx-btn--primary:hover { background: var(--vtx-red-dark); }
.vtx-btn--ghost { background: transparent; border-color: rgba(255,255,255,.25); color: var(--vtx-white); padding: 8px; }
.vtx-btn--sm { padding: 6px 11px; font-size: 12px; background: var(--vtx-gray-100); color: var(--vtx-gray-900); }
.vtx-btn--block { width: 100%; justify-content: center; }

/* ---------- Project cards ---------- */
.vtx-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.vtx-project-card { background: var(--vtx-white); border: 1px solid var(--vtx-gray-200); border-radius: var(--vtx-radius); padding: 18px 20px; }
.vtx-project-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.vtx-project-card__head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.vtx-project-card__desc { font-size: 13px; color: var(--vtx-gray-500); margin: 0 0 14px; min-height: 34px; }
.vtx-project-card__meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--vtx-gray-500); margin-top: 10px; }

/* ---------- Announcements ---------- */
.vtx-announcement { padding: 14px 0; border-bottom: 1px solid var(--vtx-gray-100); }
.vtx-announcement:last-child { border-bottom: none; }
.vtx-announcement h3 { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.vtx-announcement__date { font-size: 11px; color: var(--vtx-gray-500); }
.vtx-announcement p { font-size: 13px; margin: 6px 0 0; color: var(--vtx-gray-700); }

/* ---------- Messages ---------- */
.vtx-thread { max-height: 460px; overflow-y: auto; margin-bottom: 16px; padding-right: 4px; }
.vtx-message { border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; max-width: 65%; }
.vtx-message--client_to_vertex { background: var(--vtx-white); border: 1px solid var(--vtx-gray-200); }
.vtx-message--vertex_to_client { background: var(--vtx-black); color: var(--vtx-white); margin-left: auto; }
.vtx-message--vertex_to_client .vtx-message__meta span { color: #a1a1aa; }
.vtx-message__meta { display: flex; justify-content: space-between; gap: 14px; font-size: 11px; color: var(--vtx-gray-500); margin-bottom: 4px; }
.vtx-message p { margin: 0; font-size: 13px; }
.vtx-reply-form textarea { width: 100%; border: 1px solid var(--vtx-gray-300); border-radius: 10px; padding: 12px; font-family: inherit; font-size: 13px; margin-bottom: 10px; resize: vertical; }

/* =====================================================================
   LOGIN / OTP / FORGOT / RESET — full black screen, multinational-corporate.
   Black background, white type, brand red (#B41E36) as the only accent.
   ===================================================================== */
.vtx-login-screen {
	min-height: 100vh;
	background: var(--vtx-black);
	color: var(--vtx-white);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.vtx-login-screen::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -260px;
	transform: translateX(-50%);
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(180,30,54,.45) 0%, rgba(180,30,54,0) 70%);
	pointer-events: none;
}
.vtx-login-screen::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 4px;
	background: var(--vtx-red);
}

.vtx-login-main { display: flex; align-items: center; justify-content: center; padding: 48px 24px; width: 100%; position: relative; z-index: 1; }
.vtx-login-card { width: 100%; max-width: 400px; text-align: center; }
.vtx-login-card__logo { height: 40px; width: auto; margin: 0 auto 30px; display: block; filter: brightness(0) invert(1); }

.vtx-login-card__eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--vtx-red); margin-bottom: 12px; }
.vtx-login-card__title { font-size: 26px; font-weight: 800; margin: 0 0 8px; color: var(--vtx-white); letter-spacing: -0.01em; text-transform: uppercase; }
.vtx-login-card__subtitle { font-size: 13px; color: #a1a1aa; margin: 0 0 30px; line-height: 1.6; }

.vtx-login-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #a1a1aa; text-decoration: none; margin-bottom: 24px; }
.vtx-login-back .vtx-icon { width: 15px; height: 15px; }
.vtx-login-back:hover { color: var(--vtx-white); }

.vtx-login-form { text-align: left; display: flex; flex-direction: column; gap: 6px; }
.vtx-login-form label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #a1a1aa; margin-top: 16px; }
.vtx-login-form input[type="text"],
.vtx-login-form input[type="email"],
.vtx-login-form input[type="password"] {
	background: #141416;
	border: 1.5px solid #3f3f46;
	border-radius: 9px;
	padding: 13px 14px;
	font-size: 14px;
	font-family: inherit;
	width: 100%;
	color: var(--vtx-white);
	transition: border-color .15s ease;
}
.vtx-login-form input::placeholder { color: #6b6b70; }
.vtx-login-form input:focus { outline: none; border-color: var(--vtx-red); }
.vtx-login-form button.vtx-btn { margin-top: 24px; }
.vtx-login-form__row { display: flex; justify-content: flex-end; margin-top: 10px; }

.vtx-password-field { position: relative; display: flex; }
.vtx-password-field input { padding-right: 42px; }
.vtx-password-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #a1a1aa; cursor: pointer; padding: 6px; opacity: .6; }
.vtx-password-toggle .vtx-icon { width: 16px; height: 16px; }
.vtx-password-toggle.is-visible { opacity: 1; color: var(--vtx-red); }

.vtx-otp-inputs { display: flex; gap: 8px; margin-top: 14px; }
.vtx-otp-digit {
	width: 100%;
	aspect-ratio: 1 / 1;
	text-align: center;
	font-size: 22px;
	font-weight: 800;
	background: #141416;
	color: var(--vtx-white);
	border: 1.5px solid #3f3f46;
	border-radius: 10px;
	font-family: inherit;
}
.vtx-otp-digit:focus { outline: none; border-color: var(--vtx-red); box-shadow: 0 0 0 3px rgba(180,30,54,.35); }

.vtx-login-card__footer { font-size: 12px; color: #a1a1aa; margin: 28px 0 0; line-height: 1.6; }
.vtx-login-card__credit { font-size: 10px; color: #6b6b70; margin: 26px 0 0; text-align: center; letter-spacing: .05em; text-transform: uppercase; }

.vtx-alert { border-radius: 9px; padding: 11px 14px; font-size: 12.5px; margin-bottom: 16px; text-align: left; font-weight: 500; }
.vtx-alert--danger { background: rgba(180,30,54,.16); color: #ff8a9c; border: 1px solid rgba(180,30,54,.4); }
.vtx-alert--success { background: rgba(31,138,76,.16); color: #4fd07a; border: 1px solid rgba(31,138,76,.4); }
.vtx-alert--neutral { background: #141416; color: #d4d4d8; border: 1px solid #3f3f46; }

.vtx-notice { max-width: 560px; margin: 60px auto; text-align: center; background: var(--vtx-white); border: 1px solid var(--vtx-gray-200); border-radius: var(--vtx-radius); padding: 26px; font-size: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.vtx-shell { flex-direction: column; }
	.vtx-sidebar { width: 100%; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--vtx-gray-200); padding: 10px; }
	.vtx-nav-item span { display: none; }
	.vtx-nav-item { padding: 10px; }
	.vtx-main { padding: 24px 18px; }
}

@media (max-width: 600px) {
	.vtx-topbar { padding: 12px 16px; }
	.vtx-user { display: none; }
	.vtx-financial-card { padding: 22px; }
	.vtx-kpi-grid { grid-template-columns: 1fr 1fr; }
	.vtx-table { display: block; overflow-x: auto; }
	.vtx-message { max-width: 90%; }
	.vtx-otp-digit { font-size: 18px; }
}