/*!
 * Jetpack CRM
 * https://jetpackcrm.com
 *
 * Copyright 2022 Automattic
 *
 * Date: 22/08/22
 */

// theme compatibility fixes
@use "../../../sass/ZeroBSCRM.ThemeCompat";

// Import JS CSS vars
@use "../../../sass/emerald/jp_vars";

.zbs-client-portal-wrap {
	position: relative;
	min-height: 650px !important;
	display: flex;

	#zbs-nav-tabs {
		list-style-type: none;
		width: 30%;
		float: left;
		min-height: 650px;
		margin: 0;
		padding-left: 0;
		box-shadow: 0 1px 0 1px #ccc;
		border-radius: 7px 0 0 7px;
		padding-top: 7px;
		flex: 1;

		li {
			list-style: none;
			position: relative;
			padding: 0;

			a {
				display: block;
				padding: 10px;
				box-shadow: none;
			}

			a:hover {
				box-shadow: none;
				background: #000;
				color: #fff;
			}
		}

		a {
			color: #ccc;
		}

		a:hover {
			color: #ccc !important;
		}

		.fa {
			margin-right: 0.5em;
		}
	}

	#zbs_invoice_logos img {
		max-width: 50%;
		max-height: 100px;
	}

	wh-logo-set-img {
		max-width: 50%;
		height: 100px;
	}
	// alerts, e.g. admin 'viewing as user'
	.alert {
		margin: 2em;
		background: #38b6dc;
		text-align: center;
		padding: 1em;
		border-radius: 0.5em;

		a {
			color: #000 !important;
			font-weight: 800;
		}

		a:hover {
			text-decoration: underline;
		}
	}

	.container {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.zbs-portal-wrapper {
		padding: 20px;
		box-shadow: 1px 1px 1px 1px #ccc;
		border-radius: 0 7px 7px 0;
		min-height: 650px !important;
		position: relative;
		flex: 1;
		flex-grow: 3;
	}
}

.zbs-client-portal-pro-note {
	background: #000;
	text-align: center;
	color: #fff;
	padding: 1em;
	margin: 2em;
	font-family: helvetica, sans-serif;
	border-radius: 0.5em;

	img,
	a img {
		margin-top: 1em;
		border: 0;
	}

	a {
		color: #fff !important;
		font-weight: 800;
	}

	a:hover {
		text-decoration: underline;
	}

	.small {
		margin-top: 1em;
		font-size: 0.7em;

		span {
			color: #00f;
		}

		span:hover {
			cursor: pointer;
		}
	}
}

.zbs_alert {
	padding: 10px;
	background: #8bc34a;
	color: #fff;
	display: block;
	text-align: center;
}

.zbs-portal-wrapper {
	padding-left: 20px;
	padding-right: 20px;
	float: right;
	width: 70%;
	box-sizing: border-box !important;

	h1 {
		margin-top: 0;
	}

	.zbs-field-checkbox-wrap {
		// overall padding margin: 0.5em 1em 1em;
		.zbs-cf-checkbox {
			margin-top: 0;
			margin-bottom: 0;
		}

		.zbs-cf-checkbox label {
			padding: 0 0 0 23px !important;
		}

		.zbs-cf-checkbox:first-of-type {
			padding-left: 0 !important;
		}

		.zbs-cf-checkbox label,
		.zbs-cf-checkbox + label {
			font-size: 16px !important;
			font-weight: 400;
		}
	}
	// edit pages radio custom fields
	.zbs-field-radio-wrap {
		// overall padding margin: 0.5em 1em 1em;
		text-align: left;

		.zbs-radio {
			margin: 0;
			padding: 0;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			outline: none;
			vertical-align: baseline;
			font-style: normal;
			min-height: 17px;
			line-height: 17px;
			min-width: 17px;
			// good if these match the above checkbox labels ^^ label {
			font-size: 16px !important;
			font-weight: 400;
		}
	}

	/* Few tweaks as provided by Alvaro in slack ... wh selectively added
	 * those which made sense for multi-theme userbase JIRA-ZBS-531 */
	.zbs-portal-login .login-form input[type="text"],
	.zbs-portal-login .login-form input[type="password"],
	.form-control.widetext,
	.form-control.zbs-tel,
	.form-control.zbs-email,
	.form-control.zbs-date,
	input[type="text"],
	input[type="password"],
	input[type="tel"],
	input[type="email"],
	input.text,
	input.title,
	textarea,
	select {
		padding-left: 1em;
		padding-right: 1em;
		margin-bottom: 1em;
		width: 100%;
		height: 50px;
	}

	/* Fixes for Astra Theme and general poor display on WP.org themes */
	label {
		clear: left;
	}
}

.zbs-portal-wrapper-sin {
	padding-left: 20px;
	padding-right: 20px;
	float: right;
	width: 100%;
}

.zbs-portal-wrapper-sin h1 {
	margin-top: 0;
}

.zbs-alert-danger {
	color: #a94442;
	background-color: #f2dede;
	border-color: #ebccd1;
	padding: 10px;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
}

.zbs-portal-login {

	.login-form {
		width: 500px;
		max-width: 80%;
		padding: 20px;
		border: 1px solid #ddd;
		text-align: center;
		margin: auto;
		margin-bottom: 50px;
		margin-top: 20px;

		input[type="text"],
		input[type="password"] {
			width: 100%;
		}

	}

}

.zbs-portal-invoices-list {

	.tools .fa {
		color: #a3210b;
	}

	.status {
		padding: 5px;
		border-radius: 2px;
	}

	.paid {
		background: #008000;
		color: #fff;
		font-weight: 700;
		line-height: 21px;
	}

	.unpaid {
		background: #d0d012;
		color: #fff;
		font-weight: 700;
		line-height: 21px;
	}

	.draft {
		background: #999;
		color: #fff;
		font-weight: 700;
		line-height: 21px;
	}

	.overdue {
		background: #f00;
		color: #fff;
		font-weight: 700;
		line-height: 21px;
	}

}

.zbs-invoice-thanks {
	text-align: center;
}

.zbs-single-invoice-portal {

	.zbs-invoice-pull-left {
		float: left;
		width: 50%;
	}

	.zbs-invoice-pull-right {
		float: right;
		width: 50%;
		text-align: right;
	}

	.clear {
		clear: both;
	}

	.zbs-invoice-portal-inner {
		padding: 20px;
		border: 1px solid #ddd;
	}

	.zbs-invoice-portal-inner .status-total {
		position: relative;
	}

	.zbs-invoice-portal-inner #invoice_totals tr td {
		border: none;
	}

	.zbs-invoice-portal-inner #zbs-business-info-wrapper {
		width: 50%;
		float: left;
	}

	.zbs-invoice-portal-inner #zbs-customer-info-wrapper {
		width: 50%;
		float: right;
		text-align: right;
	}

	.zbs-invoice-portal-inner .zbs-invoice-box {
		padding: 50px;
		border: 1px solid #ddd;
		margin-bottom: 20px;
	}

	.zbs-invoice-portal-inner .zbs-invoice-box .zbs-portal-value {
		font-size: 40px;
		font-weight: 900;
	}

	.zbs-invoice-portal-inner .zbs-invoice-box table,
	.zbs-invoice-portal-inner .zbs-invoice-box td,
	.zbs-invoice-portal-inner .zbs-invoice-box th {
		table-layout: auto;
		border: none;
	}

	.zbs-invoice-portal-inner .zbs-invoice-box table .dz,
	.zbs-invoice-portal-inner .zbs-invoice-box td .dz,
	.zbs-invoice-portal-inner .zbs-invoice-box th .dz {
		font-size: 13px;
		font-style: italic;
	}

	.zbs-invoice-portal-inner .zbs-invoice-box .ri {
		text-align: right;
		font-weight: 600;
	}

	.zbs-invoice-portal-inner .zbs-invoice-box .cen {
		text-align: center;
	}

	.zbs-invoice-portal-inner .zbs-invoice-box .zbs-invoice-paid {
		position: absolute;
		right: 0;
		top: 0;
		padding: 30px;
		margin-right: 50px;
		color: #038d24;
		background: #92e9a7;
		text-transform: uppercase;
		font-weight: 900;
		margin-top: 50px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.zbs-invoice-portal-inner .zbs-invoice-box .zbs-invoice-paid .fa {
		margin-right: 10px;
	}

	.zbs-invoice-portal-inner .zbs-invoice-box .zbs-portal-label {
		background: #546273;
		color: #fff;
		display: inline;
		padding: 5px;
		border-radius: 4px;
	}

	.zbs-invoice-portal-inner .zbs-invoice-box .pay-to-name {
		font-size: 30px;
		font-weight: 800;
	}

	.zbs-invoice-portal-inner .zbs-invoice-box .inv-num {
		font-size: 18px;
		font-weight: 800;
	}

	.zbs-invoice-portal-inner .zbs-invoice-box .zbs-portal-biz {
		margin-top: 20px;
	}

	.zbs-invoice-portal-inner .zbs-portal-inv-deets {
		text-align: right;
	}

	.zbs-invoice-portal-inner .zbs-portal-inv-deets .date {
		font-style: italic !important;
	}

}

.zbs-fieldgroup-main_address,
.zbs-fieldgroup-second_address {
	width: 48%;
	float: left;
	margin-right: 2%;

	table {
		width: 100%;
	}
}

.zbs-fieldgroup-main_address_100w,
#wptbpMetaBoxGroup-main_address_100w {
	width: 100%;
}

.zbs-hide {
	display: none;
}

.zbs-fieldgroup-main_address::after {
	content: "";
	display: table;
	clear: both;
}

.zerobs-proposal-actions {
	text-align: center;
	margin-top: 3em;
}

.zerobs-proposal-poweredby {
	margin-top: 2em;
}

//hide the title from the Portal Page
.entry-title {
	display: none !important;
}
//for the invoice hashes. No portal nav for these.
.fullW {
	width: 100% !important;
}

.zbs-line-info-title {
	font-size: 30px;
	font-weight: 800;
}

.portal-invoice-to {
	margin-bottom: 20px;
}

.zbs-entry-content {
	margin-top: var(--global--spacing-vertical);
}

.zbs-portal-grid {
	display: grid;
	gap: 1rem;
	overflow: auto;

	@media (min-width: 1100px) {
		// menu in the first column, content in the second column on large screens
		grid-template-columns: 1fr 3fr;

		// forces the main/second address field to show in two columns (no wrapping)
		.zbs-multi-group-wrap {
			display: flex;
			flex-wrap: nowrap;
			align-items: flex-start;
		}

		.zbs-multi-group-item {
			margin-top: 10px !important;
			margin-bottom: 10px !important;
			flex: 1;
		}

		.zbs-portal-grid-footer {
			grid-column: span 2;
		}
	}

	.zbs-responsive-table {

		@media (max-width: 1100px) {

			table,
			thead,
			tbody,
			th,
			td,
			tr {
				display: block;
			}

			thead {
				display: none;
			}

			tr {
				border: 1px solid rgba(0, 0, 0, 0.2);
			}

			td {
				border: none;
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
				position: relative;
				padding-left: 50%;
			}

			td::before {
				position: absolute;
				left: 6px;
				width: 45%;
				padding-right: 10px;
				white-space: nowrap;
				content: attr(data-title);
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}

	.zbs-multi-group-item:first-child {
		margin-top: 30px;
	}

	.zbs-multi-group-item {
		margin-bottom: 30px;
		padding: 10px;
		border-left: 5px solid rgba(0, 0, 0, 0.1);
	}

	.zerobs-proposal-body {
		max-width: unset !important;
	}

	.zbs-field-group-label {
		font-weight: 700;
		font-size: 110%;
	}

	.zbs-portal-nav {
		max-width: 58rem;
	}

	#zbs-nav-tabs {
		padding: 0;
	}

	#zbs-nav-tabs li {
		list-style: none;
		border: 1px solid rgba(0, 0, 0, 0.1);
		border-bottom-width: 0;
		white-space: nowrap;
	}

	#zbs-nav-tabs li:last-child {
		border-bottom-width: 1px;
	}

	#zbs-nav-tabs a {
		display: block;
		padding: 0.5em 1em;
	}

	#zbs-nav-tabs .fa {
		margin-right: 0.5em;
	}

	.zbs-portal-content .alert {
		margin: 2em;
		background: var(--jp-green-20);
		text-align: center;
		padding: 1em;
		border-radius: 0.5em;
	}

	.zbs-portal-content .alert a {
		font-weight: 800;
	}

	.zbs-portal-grid-footer {
		clear: both;
		position: relative;
		margin-top: 50px;
	}

	p {
		padding: 3px;
		margin: 0 0 6px;
	}

	label {
		display: block;
		margin: 0;
	}

	.zbs-radio label,
	.zbs-cf-checkbox label {
		white-space: nowrap !important;
		padding: 2px;
	}

	.zbs-radio label span,
	.zbs-cf-checkbox label span,
	.zbs-radio label input,
	.zbs-cf-checkbox label input {
		vertical-align: middle;
	}

	#submit {
		margin-top: 2rem;
	}

	input:not([type="checkbox"]):not([type="radio"]),
	select,
	textarea,
	.jpcrm-inline-file-input {
		width: 95%;
	}

	tr,
	td,
	th {
		word-break: keep-all;
	}
}

.zbs-portal-grid.no-nav {
	grid-template-columns: 1fr;
}

#rememberme {
	vertical-align: baseline;
	margin-right: 5px;
}

.login-remember label {
	display: block;
	margin-top: 10px;
}

.sgr-recaptcha {
	transform: scale(1);
}

.sgr-recaptcha div {
	margin: auto;
}

.zbs-default-avatar {
	font-size: 3em;
	margin: 0.3em;
	margin-top: 0.5em;
	font-style: normal;
}

i.icon.child::before {
	content: "\f1ae"; // f1ae = fontawesome 'child' icon code
	display: inline-block;
	font-family: FontAwesome;
}

.client-portal-file-upload::before {
	content: "\f0ee"; // f0ee = fontawesome 'cloud upload' icon code
	display: inline-block;
	font-family: FontAwesome;
}

.client-portal-file-upload-remove::before {
	content: "\f00d"; // f00d = fontawesome 'icon-remove' icon code
	display: inline-block;
	font-family: FontAwesome;
}

.client-portal-file-upload {
	border: 1px solid #ccc;
	display: inline-block !important;
	padding: 6px 12px;
	cursor: pointer;
	width: initial;
}

.client-portal-file-upload,
.client-portal-file-upload-remove {
	border: 1px solid #ccc;
	display: inline-block !important;
	padding: 6px 12px;
	cursor: pointer;
	width: initial;
}

.client-portal-file-upload:hover,
.client-portal-file-upload-remove:hover {
	border: 1px solid #999;
}

.client-portal-input-file {
	display: none;
}

.client-portal-profile-picture {
	max-width: 150px;
	height: auto;
	display: inline-block;
}

.client-portal-profile-picture-container {
	display: inline-block;
	text-align: center;
}

.jpcrm-client-portal-admin-banner {
	padding: 0 20px 20px 20px;
	color: var(--jp-black);

	.admin-message {
		text-wrap: balance;
	}

	a,
	a:visited,
	a:active {
		color: var(--jp-black);
		text-decoration: underline;

		&:hover,
		&:focus {
			color: var(--jp-gray-80);
		}
	}
}

.jpcrm-invoice-lineitem-description {
	text-align: left;
}

.jpcrm-invoice-lineitem-quantity,
.jpcrm-invoice-lineitem-price,
.jpcrm-invoice-lineitem-amount {
	text-align: right;
}

#jpcrm-invoice-lineitems {

	.jpcrm-invoice-lineitem-description {
		width: 50%;

		.title {
			font-weight: 700;
		}

		.subtitle {
			font-size: 13px;
			font-style: italic;
		}
	}

	.jpcrm-invoice-lineitem-quantity,
	.jpcrm-invoice-lineitem-price,
	.jpcrm-invoice-lineitem-amount {
		width: 15%;
	}
}