/*
  Copyright 2025 Defense Unicorns
  SPDX-License-Identifier: LicenseRef-Defense-Unicorns-Commercial
*/

@import 'tailwindcss';
@plugin 'flowbite/plugin';

:root {
	--navbar-height: 4rem;
	--sidebar-width: 16rem;
	--table-height: 350px;
}

@theme {
	--breakpoint-xs: 31rem;
}

@layer base {
	html {
		@apply overflow-y-auto;

		color-scheme: dark; /* Dark scrollbar color for Safari, the webkit overrides do not work */
		/* Standard scrollbar properties (Firefox) */
		scrollbar-width: thin;
		scrollbar-color: rgba(156, 163, 175, 0.5) transparent;

		/* WebKit scrollbar styling (Chrome, Edge) */
		&::-webkit-scrollbar {
			width: 5px; /* Width that's narrow but still usable */
			z-index: 20;
		}

		/* Scrollbar thumb styling */
		&::-webkit-scrollbar-thumb {
			border-radius: 4px; /* Rounded corners for better aesthetics */
			background-color: rgba(156, 163, 175, 0.5); /* Semi-transparent gray */
		}

		/* Transparent track to focus attention on the thumb */
		&::-webkit-scrollbar-track {
			background: transparent;
		}

		button:not([disabled]),
		[role='button']:not([disabled]) {
			cursor: pointer;
		}
	}
}

@layer components {
	.sticky-header {
		position: sticky;
		z-index: 40;
	}

	/* Global button styling */
	.btn {
		@apply inline-flex cursor-pointer items-center rounded-lg border border-gray-600 bg-transparent px-3 py-1.5 text-center text-sm font-medium text-gray-400 transition-all ease-in-out hover:bg-gray-700 hover:text-white;
	}

	.btn-primary {
		@apply cursor-pointer rounded-lg border border-blue-600 bg-gray-900 px-5 py-2.5 text-sm font-medium text-blue-500 transition-colors hover:bg-blue-600 hover:text-white focus:outline-none focus-visible:z-10 focus-visible:bg-blue-600 focus-visible:text-white focus-visible:ring-4 focus-visible:ring-blue-200 disabled:cursor-not-allowed disabled:border-transparent disabled:bg-gray-500 disabled:text-white;
	}

	.btn-secondary {
		@apply cursor-pointer rounded-lg border border-transparent bg-blue-600 px-5 py-2.5 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:outline-none focus-visible:z-10 focus-visible:bg-blue-500 focus-visible:text-white focus-visible:ring-4 focus-visible:ring-blue-200 disabled:cursor-not-allowed disabled:border-transparent disabled:bg-gray-500 disabled:text-white;
	}

	.btn-alternative {
		@apply cursor-pointer rounded-lg border border-gray-600 bg-gray-800 px-5 py-2.5 text-sm font-medium text-gray-400 transition-colors hover:bg-gray-700 hover:text-white focus:z-10 focus:outline-none focus-visible:ring-4 focus-visible:ring-gray-700 disabled:cursor-not-allowed disabled:bg-gray-800 disabled:text-gray-400;
	}

	.card {
		@apply mb-4 rounded-lg border border-gray-800 bg-gray-900 p-4 shadow;
	}

	.search-input {
		@apply block w-full rounded-lg border border-gray-600 bg-gray-800 p-2.5 pr-10 pl-10 text-sm text-gray-100 placeholder-gray-300 focus:border-blue-500 focus:text-white focus:ring-1 focus:ring-blue-500 focus:outline-none [&::-webkit-search-cancel-button]:hidden;
	}

	select {
		@apply block w-full rounded-lg border border-gray-700 bg-gray-800 p-2.5 text-sm text-gray-100 placeholder-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none;
	}

	svg.icon {
		@apply flex-shrink-0 text-gray-400 transition duration-300;
	}

	.text-link {
		@apply text-blue-400 decoration-blue-400 hover:underline;
	}

	.no-scrollbar {
		scrollbar-width: none;
	}
}

@utility scrollable-container {
	overflow-x: hidden;
	overflow-y: auto;
	padding-bottom: 1rem;

	position: static !important;
	scrollbar-width: thin; /* duplication required here despite global override */

	&:not(.no-fade) {
		/* Create a fade overlay at the bottom */

		&::after {
			content: '';
			@apply pointer-events-none absolute right-0 bottom-0 left-0;
			height: 28px;
			@apply bg-gradient-to-b from-gray-900/0 to-gray-900;
		}
	}

	/* Specific styling for UI elements inside scrollable containers */

	.btn {
		&:not(.keep-default-btn-style) {
			@apply border-none;
		}
	}

	table {
		@apply w-full table-fixed text-left text-sm text-gray-400;

		thead {
			@apply sticky top-0 z-10 text-xs text-gray-400 uppercase shadow-sm;

			tr {
				@apply bg-gray-900/30 text-left text-xs font-medium tracking-wider text-gray-400 uppercase;

				th {
					@apply bg-gray-800 px-2 py-4 whitespace-nowrap;
				}

				th:first-child {
					@apply rounded-tl-lg;
				}

				th:last-child {
					@apply rounded-tr-lg;
				}
			}
		}

		tbody {
			tr {
				@apply bg-gray-900;

				&.group-boundary {
					@apply border-t-5 border-t-gray-800;
				}

				&.expandable-row {
					td {
						@apply bg-gray-950;
					}
				}

				td {
					@apply whitespace-nowrap text-gray-400;
				}
			}
		}
	}
}

/* Create a fade overlay at the bottom for catalog views */
@utility fade-overlay {
	position: sticky;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	pointer-events: none;
	height: 32px;
	@apply bg-gradient-to-b from-gray-950/0 to-gray-950;
}

@custom-variant mobileLandscape {
	@media only screen and ((
 ((max-height: 990px) and (max-width: 640px)) or
      ((max-height: 640px) and (max-width: 990px))
  )
  and (orientation: landscape)) {
		@slot;
	}
}
