/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
	font-size: 16px;
	@media (width < 40rem) { font-size: 14px }

	--bg-color-light: #fcfaf7;
	--bg-color: #f9f5ef;
	--bg-color-md: #f2eee8;
	--bg-color-dark: #e5ddd0;
	--bg-color-xdark: #756a69;
	--text-color: #34040e;

	--color-gray: #f9fafb;
	--color-red: oklch(50.5% 0.213 27.518);
	--color-red-light: #f6dddd;
	--color-red-xlight: #fcf2f2;
	--color-green: #307251;
	--color-green-light: #cee5de;
	--color-green-xlight: #f2f8f6;
	--color-orange: #f54900;
	--color-orange-light: #ffedd4;
	--color-orange-xlight: #fff7ed;
	--color-blue: oklch(50% 0.134 242.749);
	--color-blue-light: #d2e4ef;
	--color-blue-xlight: #f2f7fb;
	--color-pink: #cc76a1;
	--color-pink-light: #fce7f3;
	--color-pink-xlight: #fdf2f8;
	--color-neutral-50: #fafafa;
	--color-neutral-100: #f5f5f5;
	--color-neutral-200: oklch(92.2% 0 0);
	--color-neutral-300: oklch(87% 0 0);
	--color-neutral-500: oklch(55.6% 0 0);
	--color-neutral-600: #525252;
	--color-neutral-900: oklch(20.5% 0 0);

	--color-consultation: var(--color-orange);
	--color-consultation-light: var(--color-orange-light);
	--color-consultation-xlight: var(--color-orange-xlight);
	--color-install: var(--color-green);
	--color-install-light: var(--color-green-light);
	--color-install-xlight: var(--color-green-xlight);
	--color-pickup: var(--color-blue);
	--color-pickup-light: var(--color-blue-light);
	--color-pickup-xlight: var(--color-blue-xlight);

	--nav-width: calc(64 * var(--spacing));
	/* --ios-safe-area: calc(64 * var(--spacing)); */

	--rounded: 0.25rem;
	--rounded-md: 0.375rem;
	--rounded-lg: 0.5rem;
	--rounded-xl: calc(0.375rem + 4px);

	--radius: 0.375rem;
	--radius-md: 0.375rem;
	--radius-lg: 0.5rem;
	--radius-2xl: 1rem;
	--radius-3xl: 2rem;

	--box-shadow: rgba(55, 48, 48, 0.1) 0px 2px 8px;
	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);

	--spacing: 0.25rem;

	--text-base: 1rem;
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-md: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;

	--font-weight-medium: 500;

	--z-modal: 4;
	--z-combo: 3;
	--z-nav: 2;
	--z-dropdown: 1;
}

/* base -------------------------------------------------------------------- */

* { box-sizing: border-box }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	margin-bottom: calc(2 * var(--spacing));
	color: var(--color-neutral-900);
	font-weight: 400;

	&.--label {
		color: var(--bg-color-xdark);
		text-transform: uppercase;
		font-size: var(--text-xs);
	}
}

h1 { font-size: var(--text-2xl) }

h2 { font-size: var(--text-md) }

p, label {
	margin: 0;
	color: var(--text-color);
}

small {
	font-size: var(--text-sm);
	color: var(--color-neutral-500);

	&.--label {
		color: var(--bg-color-xdark);
		text-transform: uppercase;
		font-size: var(--text-xs);
	}
}

a {
	color: inherit;
	text-decoration: none;
}

a[href^="mailto:"] {
	background-color: white;
	border: 1px solid var(--color-neutral-200);
	display: flex;
	align-items: center;
	gap: calc(2 * var(--spacing));
	border-radius: var(--radius-lg);
	padding: 0 calc(3 * var(--spacing));
	height: calc(8 * var(--spacing));
	display: flex;
	align-items: center;
	justify-content: center;

	svg {
		width: calc(4 * var(--spacing));
		height: calc(4 * var(--spacing));
	}
}

a[href^="tel:"] {
	background-color: var(--color-green);
	color: white;
	display: flex;
	align-items: center;
	gap: calc(2 * var(--spacing));
	border-radius: var(--radius-lg);
	padding: 0 calc(3 * var(--spacing));
	height: calc(8 * var(--spacing));
	display: flex;
	align-items: center;
	justify-content: center;

	svg {
		width: calc(4 * var(--spacing));
		height: calc(4 * var(--spacing));
	}
}

ul, ol {
	margin: 0;
	padding-left: 0;
}

li { list-style-type: none }

button { background-color: transparent }

button,
input[type=submit],
.btn {
	height: calc(8 * var(--spacing));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 calc(3 * var(--spacing));
	border: 0;
	border-radius: var(--radius-md);
	box-sizing: border-box;
	font-weight: var(--font-weight-medium);
	font-size: var(--text-sm);
	cursor: default;
	text-wrap: nowrap;

	&.primary {
		background: #000;
		color: white;
	}

	&.secondary {
		background: white;
		border: 1px solid var(--color-neutral-200);
	}

	&.tertiary {
		border-radius: 0.75rem;
	}

	&.danger {
		color: var(--color-red);
		border: 1px solid var(--color-red-light);
		background: white;
	}

	&.icon {
		background: transparent;
		padding: 0;
		height: initial;
	}

	&.--full-width {
		width: 100%;
	}

	&:has(svg) { gap: calc(1 * var(--spacing)) }
	svg { height: calc(4 * var(--spacing)) }
}

button.clear {
	padding: 0;
}

input { border: 0 }

input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]),
gmp-place-autocomplete,
select,
textarea {
	display: block;
	width: 100%;
	border: 1px solid var(--color-neutral-200);
	border-radius: var(--radius-md);
	background: white;
	padding: calc(2 * var(--spacing)) calc(3 * var(--spacing));
	font-family: inherit;
	font-size: inherit;
}

input:not([type=submit]):not([type=file]):not([type=radio]):not([type=checkbox]),
gmp-place-autocomplete,
select {
	height: calc(10 * var(--spacing));
}

input[type=radio],
input[type=checkbox] {
	height: calc(4 * var(--spacing));
	margin-right: calc(1 * var(--spacing));
}

label {
	display: block;
	margin-bottom: calc(1 * var(--spacing));
}

gmp-place-autocomplete {
	padding: 0;
}

form.card {
	padding: calc(6 * var(--spacing));
}

table {
	width: 100%;

	th {
		border-bottom: 1px solid var(--color-neutral-200);
		height: calc(10 * var(--spacing));
		padding: 0 calc(2 * var(--spacing));
		text-align: left;
		vertical-align: middle;
		font-weight: var(--font-weight-medium);
	}

	td {
		padding: calc(2 * var(--spacing));
		text-align: left;
		white-space: nowrap;
		font-size: var(--text-sm);
	}
}

details {
	summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: calc(3 * var(--spacing));
	}

	h1, h2, h3, h4, h5, h6 { margin-bottom: 0 }

	.details-body {
		padding: calc(3 * var(--spacing));
		border-top: 1px solid var(--color-neutral-200);

		@media (width < 40rem) {
			border-top: 0;
		}
	}

	.details-expand-btn svg {
		width: calc(4 * var(--spacing));
		height: calc(4 * var(--spacing));
	}

	&:not(:last-child) {
		border-bottom: 1px solid var(--color-neutral-200);
	}
}

dt { color: var(--bg-color-xdark) }
dd { margin: 0 }

hr {
	height: 0;
	border: 0;
	border-top: 1px solid var(--color-neutral-200);
	padding-bottom: calc(6 * var(--spacing));
	margin-top: calc(6 * var(--spacing));
	margin-bottom: 0;
}

/* layout ------------------------------------------------------------------ */

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: var(--text-sm);
	margin: 0;
	display: flex;
	height: 100vh;
	width: 100vw;
	overflow: hidden;

	@media (width < 40rem) { flex-direction: column-reverse }

	&.hw-native main {
		/* padding-bottom: var(--ios-safe-area); */
	}

	&.hw-native .modal {
		/* padding-bottom: var(--ios-safe-area); */
	}
}

#nav {
	display: flex;
	@media (width < 40rem) { display: none }

	flex-direction: column;
	flex-basis: var(--nav-width);
	flex-shrink: 0;
	justify-content: space-between;

	.logo {
		padding: calc(6 * var(--spacing));
		border-bottom: 1px solid var(--color-neutral-200);

		img { height: calc(8 * var(--spacing)) }
	}

	> ul {
		padding: calc(4 * var(--spacing));
		flex-grow: 1;
	}

	li {
		display: flex;
		align-items: center;
		padding: calc(2 * var(--spacing)) calc(3 * var(--spacing));
		border-radius: var(--radius-lg);
		font-size: var(--text-sm);
		font-weight: var(--font-weight-medium);
		height: calc(12 * var(--spacing));
		color: var(--bg-color-xdark);

		> a {
			display: flex;
			align-items: center;
			gap: calc(3 * var(--spacing));
			width: 100%;
			height: 100%;

			> svg {
				width: calc(5 * var(--spacing));
				height: calc(5 * var(--spacing));
				margin-right: calc(3 * var(--spacing));
			}
		}

		&.current {
			background-color: var(--bg-color-light);
			color: var(--text-color);
		}
	}

	.auth-user {
		padding: calc(4 * var(--spacing));
		border-top: 1px solid var(--color-neutral-200);
	}
}

#nav-project {
	display: block;
	@media (width < 40rem) { display: none }

	margin-bottom: calc(6 * var(--spacing));

	.breadcrumbs {
		display: flex;
		align-items: center;
		gap: calc(1.5 * var(--spacing));

		a { text-decoration: underline }
	}

	.breadcrumb-separator {
		width: calc(4 * var(--spacing));
		height: calc(4 * var(--spacing));
	}

	header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: calc(6 * var(--spacing));

		h1 { font-size: var(--text-xl) }
	}
}

#nav-project-mobile {
	display: none;
	@media (width < 40rem) { display: flex }

	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	background-color: white;
	flex-direction: column;
	z-index: var(--z-nav);

	.project-select {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: calc(2 * var(--spacing)) calc(4 * var(--spacing));
		border-bottom: 1px solid var(--color-neutral-200);

		input { background-color: white }
	}

	> ul {
		flex: 1;
		display: flex;
		border-bottom: 1px solid var(--color-neutral-200);
	}

	li.nav-item {
		font-size: var(--text-xs);
		color: var(--bg-color-xdark);
		flex: 1;

		> a {
			display: flex;
			flex-direction: column;
			gap: calc(1 * var(--spacing));
			align-items: center;
			padding: calc(3 * var(--spacing)) 0;

			svg {
				width: calc(5 * var(--spacing));
				height: calc(5 * var(--spacing));
			}
		}

		&.current {
			border-bottom: 2px solid black;
			color: var(--text-color);
		}
	}
}

#main {
	background-color: var(--bg-color);
	flex-grow: 1;
	overflow-y: scroll;
	overflow-x: hidden;
}

#content {
	padding: calc(6 * var(--spacing));

	@media (width < 40rem) { padding: calc(4 * var(--spacing)) }

	&.hw-native { background: white }
	&.has-nav { padding-top: calc(36 * var(--spacing)) }
}

/* utilities --------------------------------------------------------------- */

.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: calc(6 * var(--spacing));

	.page-header-left, .page-header-right {
		display: flex;
		align-items: center;
		gap: calc(1 * var(--spacing));
	}

	.image {
		margin-right: calc(5 * var(--spacing));
		width: calc(12 * var(--spacing));
		height: calc(12 * var(--spacing));
	}

	.page-header-back-btn {
		margin-right: calc(5 * var(--spacing));
	}

	.page-header-span {
		font-size: var(--text-lg);
	}

	h1, h2 { margin-bottom: 0 }
}

.layout-rows {
	display: flex;
	flex-direction: column;
	gap: calc(3 * var(--spacing));

	&.--sm {
		gap: calc(2 * var(--spacing));
	}

	&.--reverse {
		flex-direction: column-reverse;
		justify-content: start;
	}
}

.layout-cols {
	display: flex;
	align-items: center;
	gap: calc(3 * var(--spacing));

	&.--equal {
		> * {
			flex: 1;
		}
	}

	&.--sm {
		gap: calc(2 * var(--spacing));
	}

	&.--space-between {
		justify-content: space-between;
	}

	&.--wrap {
		flex-wrap: wrap;
	}
}

.layout-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: calc(3 * var(--spacing));

	&.--sm {
		gap: calc(2 * var(--spacing));
	}

	&.--lg {
		gap: calc(6 * var(--spacing));
	}

	&.--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.layout-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.text-with-icon {
	display: flex;
	align-items: center;
	gap: calc(2 * var(--spacing));

	svg {
		width: calc(4 * var(--spacing));
		height: calc(4 * var(--spacing));
	}

	&.--sm {
		gap: calc(2 * var(--spacing));

		svg {
			width: calc(3 * var(--spacing));
			height: calc(3 * var(--spacing));
		}
	}

	&.--lg {
		gap: calc(3 * var(--spacing));

		svg {
			width: calc(5 * var(--spacing));
			height: calc(5 * var(--spacing));
		}
	}

	&.--xl {
		svg {
			width: calc(7 * var(--spacing));
			height: calc(7 * var(--spacing));
		}
	}

	&.--xxl {
		svg {
			width: calc(8 * var(--spacing));
			height: calc(8 * var(--spacing));
		}
	}

	&.--xxxl {
		svg {
			width: calc(9 * var(--spacing));
			height: calc(9 * var(--spacing));
		}
	}

	&.--orange {
		svg {
			color: var(--color-orange);
			background-color: var(--color-orange-xlight);
			padding: calc(2 * var(--spacing));
			border-radius: var(--rounded-md);
		}
	}

	&.--green {
		svg {
			color: var(--color-green);
			background-color: var(--color-green-xlight);
			padding: calc(2 * var(--spacing));
			border-radius: var(--rounded-md);
		}
	}

	&.--blue {
		svg {
			color: var(--color-blue);
			background-color: var(--color-blue-xlight);
			padding: calc(2 * var(--spacing));
			border-radius: var(--rounded-md);
		}
	}

	&.--pink {
		svg {
			color: var(--color-pink);
			background-color: var(--color-pink-xlight);
			padding: calc(2 * var(--spacing));
			border-radius: var(--rounded-md);
		}
	}

	&.--gray {
		svg {
			color: var(--color-neutral-600);
			background-color: var(--color-neutral-50);
			padding: calc(2 * var(--spacing));
			border-radius: var(--rounded-md);
		}
	}
}

.actions-column {
	width: calc(12 * var(--spacing));
	padding: 0;
}

.mobile-only {
	display: none;
	@media (width < 40rem) { display: initial }
}

.no-mobile {
	@media (width < 40rem) { display: none }
}