@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
	.scrollbar-hide {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.scrollbar-hide::-webkit-scrollbar {
		display: none;
	}
}

:root {
	--app-header-height: 3.5rem;
	--mobile-filter-bar-height: var(--app-header-height);
	--mobile-bottom-nav-height: 64px;
	--mobile-list-peek-height: 210px;
}

.turbo-progress-bar {
	@apply bg-primary-600;
	height: 3px;
}

@media (prefers-color-scheme: dark) {
	.turbo-progress-bar {
		@apply bg-primary-500;
	}
}

.mobile-search-results [data-search-target="results"] {
	position: static;
	margin-top: 0;
	border-radius: 0.75rem;
	box-shadow: none;
	max-height: min(60vh, 24rem);
	background: transparent;
	--tw-ring-shadow: 0 0 #0000;
}

.mobile-search-results turbo-frame:empty {
	display: none;
}

html,
body {
	@apply m-0 p-0 h-full w-full;
}

body {
	@apply overflow-x-clip antialiased text-sm lg:text-base;
	text-rendering: optimizeLegibility;
}

h1 {
	@apply text-xl;
}

h2 {
	@apply text-lg;
}

pre {
	display: block;
	font-family: inherit;
	white-space: pre-line;
}

.link {
	@apply text-primary-600 dark:text-primary-400 hover:text-primary-500 dark:hover:text-primary-300 hover:underline;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="date"],
input[type="datetime"],
input[type="time"],
input[type="number"],
textarea {
	@apply py-2.5 pl-3 w-full rounded border-0 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 placeholder:text-gray-400 dark:placeholder:text-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:focus:ring-primary-500 sm:leading-6;
}

select,
select[multiple="multiple"] {
	@apply w-full rounded border-0 py-1.5 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:focus:ring-primary-500 sm:leading-6 cursor-pointer;
}

.btn {
	@apply px-4 py-2.5 font-semibold rounded cursor-pointer shadow-sm text-center sm:leading-6;
}

.btn-primary {
	@apply bg-primary-600 dark:bg-primary-500 hover:bg-primary-700 dark:hover:bg-primary-600 text-white;
}

.btn-neutral {
	@apply bg-white dark:bg-gray-800 ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:focus:ring-primary-500 outline-none;
}

.btn-black {
	@apply bg-primary-600 dark:bg-primary-500 hover:bg-primary-700 dark:hover:bg-primary-600 text-white;
}

.section-heading {
	@apply text-xl font-semibold tracking-tight text-gray-900 dark:text-gray-100;
}

.section-subheading {
	@apply text-sm font-semibold text-gray-900 dark:text-gray-100;
}

.filters-panel input[type="number"],
.filters-panel select {
	@apply !py-2 !text-sm !rounded-lg;
}

.filters-panel label {
	@apply mb-0;
}

.modal-form input[type="text"],
.modal-form input[type="email"],
.modal-form input[type="password"],
.modal-form input[type="tel"],
.modal-form textarea,
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
	@apply !py-2 !text-sm !rounded-lg !bg-white !text-gray-900 !ring-gray-300 placeholder:!text-gray-400 focus:!ring-primary-500;
}

.modal-form input:-webkit-autofill,
.modal-form input:-webkit-autofill:hover,
.modal-form input:-webkit-autofill:focus,
.auth-card input:-webkit-autofill,
.auth-card input:-webkit-autofill:hover,
.auth-card input:-webkit-autofill:focus {
	-webkit-text-fill-color: #111827;
	caret-color: #111827;
	box-shadow: 0 0 0 1000px #fff inset;
	transition: background-color 99999s ease-out;
}

.modal-form .btn,
.auth-card .btn {
	@apply !py-2 !text-sm;
}

.modal-form label,
.auth-card label {
	@apply !text-xs !leading-4 !mb-0 !text-gray-700;
}

@keyframes auth-modal-backdrop-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes auth-modal-panel-in {
	from {
		opacity: 0;
		transform: scale(0.96) translateY(0.75rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes auth-modal-backdrop-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes auth-modal-panel-out {
	from {
		opacity: 1;
		transform: none;
	}
	to {
		opacity: 0;
		transform: scale(0.96) translateY(0.75rem);
	}
}

.auth-modal-backdrop {
	animation: auth-modal-backdrop-in 0.25s ease-out both;
}

.auth-modal-panel {
	border-radius: 1rem;
	overflow: hidden;
	animation: auth-modal-panel-in 0.25s ease-out both;
}

.auth-modal-backdrop.auth-modal-leave {
	animation: auth-modal-backdrop-out 0.2s ease-in both;
}

.auth-modal-panel.auth-modal-leave {
	animation: auth-modal-panel-out 0.2s ease-in both;
}

table {
	@apply border-collapse min-w-full table-fixed text-sm;
}

table th,
table td {
	@apply border-b border-gray-100 dark:border-gray-700 py-1.5 pr-3 w-[15%] whitespace-nowrap align-middle;
}

table th {
	@apply text-left text-[0.65rem] sm:text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400 border-gray-200 dark:border-gray-600;
}

table td {
	@apply text-sm font-normal tabular-nums text-gray-900 dark:text-gray-100 leading-snug;
}

table td:first-child {
	@apply pl-0;
}

table tbody tr:last-child th,
table tbody tr:last-child td {
	@apply border-b-0;
}

table tbody tr:hover {
	@apply bg-gray-50/80 dark:bg-gray-700/30;
}

.building-units-table table {
	@apply table-auto;
}

.building-units-table th,
.building-units-table td {
	@apply w-auto;
}

.building-units-table th {
	@apply !text-[0.65rem] sm:!text-xs !font-medium !uppercase !tracking-wide !text-gray-500 dark:!text-gray-400;
}

.building-units-table td {
	@apply !text-sm !font-normal !leading-snug !text-gray-900 dark:!text-gray-100;
}

.building-units-table td a {
	@apply font-normal;
}

.building-units-table th:first-child,
.building-units-table td:first-child {
	@apply w-[34%] min-w-[12rem] max-w-[20rem];
}

.area-market-table {
	@apply min-h-0 flex-1;
}

.area-market-table > .flow-root,
.area-market-table > .flow-root > .overflow-x-auto,
.area-market-table > .flow-root > .overflow-x-auto > .inline-block {
	@apply !block w-full;
}

.area-market-table table {
	@apply !w-full;
}

.area-market-table th:first-child,
.area-market-table td:first-child {
	@apply !w-[42%] !max-w-0 !pl-4 overflow-hidden text-ellipsis;
}

.area-market-table th:not(:first-child),
.area-market-table td:not(:first-child) {
	@apply !w-[19.333%] text-right;
}

.area-market-table th:last-child,
.area-market-table td:last-child {
	@apply !pr-4;
}

.area-market-table th button {
	@apply inline-flex items-center gap-1 uppercase tracking-wide hover:text-gray-900 dark:hover:text-gray-100;
}

.area-market-table th:not(:first-child) button {
	@apply ml-auto;
}

img {
	@apply object-cover object-center;
	image-rendering: high-quality;
	font-size: 0;
}

.adsbygoogle {
	@apply w-full max-w-full;
}

.glightbox-container {
	& .goverlay {
		@apply !bg-white/50 !backdrop-blur-md;
	}

	& .gslide-image {
		@apply !shadow;
	}

	& .gslide-image img {
		@apply !rounded-sm;
	}
}

.photo-nav {
	@apply absolute top-1/2 -translate-y-1/2 z-10 text-white transition-opacity opacity-70;
	pointer-events: auto;
	touch-action: manipulation;
}

.photo-nav--prev {
	@apply left-0;
}

.photo-nav--next {
	@apply right-0;
}

@media (hover: hover) and (pointer: fine) {
	.photo-nav {
		opacity: 0;
		pointer-events: none;
	}

	.group:hover .photo-nav,
	.photo-nav:focus-visible {
		opacity: 0.75;
		pointer-events: auto;
	}

	.photo-nav:hover {
		opacity: 1;
	}
}

.mapboxgl-popup {
	@apply bg-transparent;
	z-index: 2000 !important;
}

.mapboxgl-popup-content {
	@apply !p-0 !rounded-xl !shadow-2xl;

	& a {
		outline: none;
	}

	& img {
		@apply object-cover object-center;
		image-rendering: high-quality;
		font-size: 0;
	}
}

.property-popup {
	.mapboxgl-popup-content {
		@apply !bg-white dark:!bg-gray-800 !overflow-visible;
	}

	.mapboxgl-popup-tip {
		@apply !hidden;
	}
}

@media (min-width: 1400px) {
	#list_col {
		@apply static w-[30rem] shrink-0 translate-y-0;
	}

	#map_col {
		@apply static flex-1 w-auto min-w-0;
	}

	#new_listings {
		@apply grid-cols-1;
	}

	[data-view-mode="hybrid"] {
		@apply bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm;
	}

	[data-view-mode="list"],
	[data-view-mode="map"] {
		@apply bg-transparent text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100;
	}

	:has(#view-toggle-list:checked) #map_col {
		@apply hidden;
	}

	:has(#view-toggle-list:checked) #list_col {
		@apply static w-full translate-y-0;
	}

	:has(#view-toggle-list:checked) #new_listings {
		@apply grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4;
	}

	:has(#view-toggle-list:checked) [data-view-mode="list"] {
		@apply bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm;
	}

	:has(#view-toggle-list:checked) [data-view-mode="hybrid"],
	:has(#view-toggle-list:checked) [data-view-mode="map"] {
		@apply bg-transparent text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 shadow-none;
	}

	:has(#view-toggle-map:checked) #list_col {
		@apply hidden;
	}

	:has(#view-toggle-map:checked) #map_col {
		@apply static w-full;
	}

	:has(#view-toggle-map:checked) #new_listings {
		@apply grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4;
	}

	:has(#view-toggle-map:checked) [data-view-mode="map"] {
		@apply bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm;
	}

	:has(#view-toggle-map:checked) [data-view-mode="list"],
	:has(#view-toggle-map:checked) [data-view-mode="hybrid"] {
		@apply bg-transparent text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 shadow-none;
	}

	:has(#view-toggle-hybrid:checked) #list_col {
		@apply static w-[30rem] shrink-0 translate-y-0;
	}

	:has(#view-toggle-hybrid:checked) #map_col {
		@apply static flex-1 w-auto min-w-0;
	}

	:has(#view-toggle-hybrid:checked) #new_listings {
		@apply grid-cols-1 md:grid-cols-1 xl:grid-cols-1 2xl:grid-cols-1;
	}

	:has(#view-toggle-hybrid:checked) [data-view-mode="hybrid"] {
		@apply bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm;
	}

	:has(#view-toggle-hybrid:checked) [data-view-mode="list"],
	:has(#view-toggle-hybrid:checked) [data-view-mode="map"] {
		@apply bg-transparent text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 shadow-none;
	}
}

.custom-marker {
	cursor: pointer;
}

.custom-marker .marker-content {
	@apply bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-3 py-1.5 rounded-md font-semibold text-xs whitespace-nowrap shadow-lg antialiased;
	border: 2.5px solid white;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.custom-marker:hover {
	z-index: 1000;
}

.custom-marker:hover .marker-content {
	@apply shadow-xl;
	transform: scale(1.05);
}

.dot-marker {
	width: 12px;
	height: 12px;
	border-radius: 9999px;
	background: var(--dot-color, #4d5fa5);
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(52, 72, 145, 0.35);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dot-marker:hover,
.dot-marker.marker-highlighted {
	z-index: 1000;
	transform: scale(1.35);
	box-shadow: 0 0 0 4px rgba(77, 95, 165, 0.25), 0 1px 4px rgba(52, 72, 145, 0.4);
}

.marker-highlighted {
	z-index: 1000;
}

.marker-highlighted .marker-content {
	@apply shadow-2xl;
	transform: scale(1.1);
	animation: pulse-border 1.5s ease-in-out infinite;
}

@keyframes pulse-border {
	0% {
		box-shadow: 0 0 0 0 rgba(52, 72, 145, 0.7);
	}
	100% {
		box-shadow: 0 0 0 20px rgba(52, 72, 145, 0);
	}
}

@media (max-width: 1399px) {
	.overflow-y-auto {
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: auto;
	}

	#list_col .overflow-y-auto {
		scroll-padding-top: var(--mobile-filter-bar-height);
		scroll-padding-bottom: 20px;
	}

	.sticky.top-0 {
		margin-bottom: 0 !important;
	}

	#map_col {
		top: var(--mobile-filter-bar-height) !important;
		margin-top: 0 !important;
	}

	#search_grid {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	#list_col {
		top: var(--mobile-filter-bar-height) !important;
	}

	#list_col > div {
		max-height: calc(100vh - var(--mobile-filter-bar-height) - var(--mobile-bottom-nav-height));
	}

	#list_col.list-col--peek > div {
		max-height: var(--mobile-list-peek-height);
	}
}