/************************************/
/*** Our CSS - pages the client's prototype does not have.
/*** e-warranty.css is the client's file and is never edited for these (rule 4).
/***
/*** 01. Login - also Forgot Password and Reset Password
/*** 02. Password Field - eye button and live rules
/*** 03. Portal Top Bar - Logout button
/*** 04. Dealer Sign In Details - HQ Add / Edit Dealer
/*** 05. Change Password - sidebar page in both portals
/*** 06. Installation Companies - HQ Dealers page
/*** 07. Claim Resolution - HQ claim screen
/*** 08. Portal Layout - sidebar links and flash message
/*** 09. PHP-drawn HQ Pages - panels, link buttons, forms, settings and dealer lists
/************************************/

/************************************/
/*** 01. Login ***/
/************************************/
.ew-login-top {
	justify-content: center;
}
.ew-login {
	min-height: calc(100vh - 82px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px 16px;
}
.ew-login-box {
	width: 100%;
	max-width: 420px;
	padding: 28px;
}
.ew-login-box label {
	margin-top: 16px;
}
.ew-login-error {
	margin-top: 16px;
	padding: 10px 12px;
	border: 1px solid #f3c4c1;
	border-radius: 8px;
	background: #fdeeed;
	color: #b7231d;
	font-size: 13px;
}
.ew-login-notice {
	margin-top: 16px;
	padding: 10px 12px;
	border: 1px solid #bfe0d3;
	border-radius: 8px;
	background: #eaf6f1;
	color: var(--green);
	font-size: 13px;
}
.ew-login-box .sub {
	margin-top: 4px;
}
.ew-login-box input[readonly] {
	background: #f5f6f6;
	color: var(--mut);
}
.ew-login-btn {
	width: 100%;
	margin-top: 22px;
}
/*** The Request New Link button is an <a> - without these it keeps link styling and left-aligned text ***/
a.ew-login-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}
.ew-login-btn:disabled {
	opacity: .45;
	cursor: not-allowed;
}
.ew-login-box .ew-check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	color: var(--ink);
	font-weight: 600;
	cursor: pointer;
}
/*** e-warranty.css gives every input margin-top: 6px - that would push the box below its words ***/
.ew-check input {
	margin: 0;
	accent-color: var(--r);
	cursor: pointer;
}
.ew-login-link {
	color: var(--r);
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
}
.ew-login-link:hover {
	text-decoration: underline;
}
.ew-login-foot {
	margin-top: 18px;
	text-align: center;
}
/*** Negative margin pulls the link up into the card padding, so the title keeps its place ***/
.ew-login-backtop {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 32px;
	margin: -6px 0 10px -4px;
	color: var(--mut);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.ew-login-backtop:hover {
	color: var(--r);
}
.ew-login-backtop svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
@media (max-width: 700px){
	.ew-login {
		align-items: flex-start;
	}
	.ew-login-box {
		padding: 20px;
	}
}

/************************************/
/*** 02. Password Field ***/
/************************************/
/*** position: relative is what the eye button is placed against ***/
.ew-password {
	position: relative;
	display: block;
}
/*** Room on the right so typed text never runs under the eye button ***/
.ew-password input {
	padding-right: 46px;
}
/*** top: 6px matches the input's margin-top in e-warranty.css, so the button sits on the box ***/
.ew-eye {
	position: absolute;
	top: 6px;
	right: 2px;
	bottom: 0;
	width: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--mut);
	cursor: pointer;
}
.ew-eye:hover {
	color: var(--ink);
}
.ew-eye svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ew-eye .ew-eye-off,
.ew-eye[aria-pressed="true"] .ew-eye-on {
	display: none;
}
.ew-eye[aria-pressed="true"] .ew-eye-off {
	display: block;
}

/*** Password Field - Live Rules ***/
.ew-password-warn {
	margin-top: 8px;
	color: #b7231d;
	font-size: 12px;
	font-weight: 600;
}
.ew-password-rules {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin-top: 12px;
}
.ew-password-rule {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--mut);
	font-size: 12px;
}
.ew-password-rule svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ew-password-rule.ew-met {
	color: var(--green);
	font-weight: 600;
}

/************************************/
/*** 03. Portal Top Bar ***/
/************************************/
/*** Takes the place of the client's Portal dropdown, at the same height (36px) ***/
.ew-logout {
	flex: 0 0 auto;
	margin: 0;
}
.ew-logout-btn {
	min-height: 36px;
	padding: 8px 16px;
	font-size: 12px;
	white-space: nowrap;
}

/************************************/
/*** 04. Dealer Sign In Details ***/
/************************************/
/*** Added under the client's Add / Edit Dealer form fields by e-warranty-pages.js ***/
.ew-signin {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}
.ew-signin-title {
	margin: 0 0 4px;
}
.ew-signin-note {
	margin: 0 0 12px;
}
.ew-signin .grid2 {
	margin-top: 10px;
}
/*** The hint sits inside a bold label - block + normal weight, or it runs on after the input in bold ***/
.ew-signin .hint {
	display: block;
	font-weight: 400;
}
.ew-signin input[readonly] {
	background: #f5f6f6;
	color: var(--mut);
}
/*** The client's .btn has no disabled look - without this Save Dealer looks clickable while it is off ***/
#dealerEdit [data-ew-password-submit]:disabled {
	opacity: .45;
	cursor: not-allowed;
}
/*** Empty cell beside Username, so Password and Confirm Password start a row together ***/
@media (max-width: 700px){
	.ew-signin-gap {
		display: none;
	}
}

/************************************/
/*** 05. Change Password ***/
/************************************/
.ew-change-password {
	max-width: 480px;
}
.ew-change-password label {
	margin-top: 16px;
}
.ew-change-password label:first-of-type {
	margin-top: 0;
}
/*** The messages carry margin-top for the login card - here they open the form, so the first label takes the gap ***/
.ew-change-password .ew-login-error,
.ew-change-password .ew-login-notice {
	margin: 0 0 16px;
}
.ew-change-btn {
	width: 100%;
	margin-top: 22px;
}
.ew-change-btn:disabled {
	opacity: .45;
	cursor: not-allowed;
}

/************************************/
/*** 06. Installation Companies ***/
/************************************/
/*** Same gap as the client's dealer list under its + Add Dealer button ***/
.ew-company-list {
	margin-top: 12px;
}

/************************************/
/*** 07. Claim Resolution ***/
/************************************/
/*** The client's label { display: block } beats the hidden attribute - without this the HQ lot and sqft stay visible ***/
[data-ew-replacement][hidden] {
	display: none;
}

/************************************/
/*** 08. Portal Layout ***/
/************************************/
/*** Sidebar items are links now; e-warranty.css styles .nav for a <div> ***/
.nav {
	text-decoration: none;
}
/*** Desktop only: under 700px e-warranty.css makes .nav display: flex for the scrolling tab bar ***/
@media (min-width: 701px){
	.nav {
		display: block;
	}
}

/*** The messages carry margin-top for the login card - at the top of a page they need space below instead ***/
.ew-flash {
	margin: 0 0 16px;
}

/************************************/
/*** 09. PHP-drawn HQ Pages ***/
/************************************/
/*** Same spacing the prototype's hqPanel() wrote inline ***/
.ew-panel {
	margin-bottom: 16px;
}
.ew-panel-title {
	margin: 0 0 14px;
}

/*** Links styled as the client's .btn (written for <button>) keep its size and centre their text ***/
a.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	/* A <button> takes the browser's 13.3333px control font; a link would inherit the 14px body size */
	font-size: 13.3333px;
}
.btn.ew-unit-active {
	background: #e9f4fb;
	font-weight: 700;
}

.ew-form-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}
.ew-field-gap {
	margin-top: 12px;
}
.ew-filter-gap {
	margin-top: 12px;
}
.ew-table-gap {
	margin-top: 12px;
}

/*** The wrapper must not take a grid2 cell of its own - its fields line up with the others ***/
.ew-category-fields {
	display: contents;
}
.ew-category-fields[hidden] {
	display: none;
}

.ew-search-form {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}
.ew-search-form input {
	margin-top: 0;
}

.ew-product-summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #e5e7eb;
	cursor: pointer;
}
.ew-product-summary-title {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ew-unit-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 10px 0 14px;
}
.ew-sqft-input {
	max-width: 120px;
	margin-top: 0;
}