/*
 * 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.
 */

@media (min-width: 1024px) {
	[data-sidebar-collapsed="true"] .sidebar--static {
		width: 4.5rem;
	}

	[data-sidebar-collapsed="true"] .sidebar--static .sidebar-text {
		display: none;
	}

	[data-sidebar-collapsed="true"] .sidebar--static .sidebar-account-bar {
		justify-content: center;
		padding: 0.625rem;
	}

	[data-sidebar-collapsed="true"] .sidebar--static div.sidebar-account-bar {
		display: none;
	}

	[data-sidebar-collapsed="true"] .sidebar--static .sidebar-link {
		justify-content: center;
		padding: 0.625rem;
		border-radius: 0.5rem;
		position: relative;
	}

	[data-sidebar-collapsed="true"] .sidebar--static .sidebar-link span[aria-hidden="true"] {
		margin-right: 0;
	}

	[data-sidebar-collapsed="true"] .sidebar--static .sidebar-link i {
		margin-right: 0;
		font-size: 1.125rem;
	}

	[data-sidebar-collapsed="true"] .sidebar--static ul[role="list"] {
		gap: 0.375rem;
	}

	/* Section headers in collapsed state */
	[data-sidebar-collapsed="true"] .sidebar--static .sidebar-section-header {
		justify-content: center;
		padding: 0.625rem;
		border-radius: 0.5rem;
		position: relative;
	}

	[data-sidebar-collapsed="true"] .sidebar--static .sidebar-section-header i {
		font-size: 1rem;
	}

	[data-sidebar-collapsed="true"] .sidebar--static .sidebar-chevron {
		display: none;
	}

	/* Hide submenu items by default when collapsed */
	[data-sidebar-collapsed="true"] .sidebar--static details > ul[role="list"] {
		display: none;
	}

	/* Show popover on hover/focus for collapsed sections */
	[data-sidebar-collapsed="true"] .sidebar--static details.is-flyout-open > ul[role="list"] {
		display: flex;
		flex-direction: column;
		position: fixed;
		background: rgb(var(--color-surface));
		backdrop-filter: blur(12px);
		border: 1px solid rgb(var(--color-border) / 0.75);
		border-radius: 0.75rem;
		padding: 0.5rem;
		box-shadow: 
			0 20px 25px -5px rgb(0 0 0 / 0.15), 
			0 8px 10px -6px rgb(0 0 0 / 0.15),
			0 0 0 1px rgb(var(--color-border) / 0.1),
			inset 0 1px 0 0 rgb(255 255 255 / 0.05);
		z-index: 100;
		min-width: 11rem;
		max-width: 12.5rem;
		gap: 0.125rem;
		animation: slideInFromLeft 0.2s cubic-bezier(0.16, 1, 0.3, 1);
		margin: 0;
		border-left: 0;
		padding-left: 0.5rem;
	}

	/* Add connecting arrow to popover */
	[data-sidebar-collapsed="true"] .sidebar--static details.is-flyout-open > ul[role="list"]::before {
		content: '';
		position: absolute;
		left: -6px;
		top: 0.625rem;
		width: 12px;
		height: 12px;
		background: rgb(var(--color-surface));
		border-left: 1px solid rgb(var(--color-border) / 0.5);
		border-bottom: 1px solid rgb(var(--color-border) / 0.5);
		transform: rotate(45deg);
		z-index: -1;
	}

	/* Style links inside popovers */
	[data-sidebar-collapsed="true"] .sidebar--static details > ul[role="list"] .sidebar-link {
		justify-content: flex-start;
		align-items: center;
		gap: 0.625rem;
		padding: 0.5rem 0.6875rem;
		border-radius: 0.5rem;
		font-size: 0.875rem;
		font-weight: 500;
		transition: all 0.15s ease;
		background: transparent;
	}

	/* Keep submenu labels visible in collapsed flyout */
	[data-sidebar-collapsed="true"] .sidebar--static details > ul[role="list"] .sidebar-text {
		display: inline;
	}

	[data-sidebar-collapsed="true"] .sidebar--static details > ul[role="list"] .sidebar-link:hover {
		background: rgb(var(--color-primary) / 0.1);
		color: rgb(var(--color-primary));
		transform: translateX(2px);
		box-shadow: 0 0 0 1px rgb(var(--color-primary) / 0.2);
	}

	/* Active/current page in popover */
	[data-sidebar-collapsed="true"] .sidebar--static details > ul[role="list"] .sidebar-link.bg-muted {
		background: rgb(var(--color-primary) / 0.15);
		color: rgb(var(--color-primary));
		font-weight: 600;
		box-shadow: 
			0 0 0 1px rgb(var(--color-primary) / 0.3),
			0 2px 4px rgb(var(--color-primary) / 0.1);
	}

	/* Icon styling in popovers */
	[data-sidebar-collapsed="true"] .sidebar--static details > ul[role="list"] .sidebar-link i {
		font-size: 1rem;
		opacity: 0.8;
	}

	[data-sidebar-collapsed="true"] .sidebar--static details > ul[role="list"] .sidebar-link:hover i,
	[data-sidebar-collapsed="true"] .sidebar--static details > ul[role="list"] .sidebar-link.bg-muted i {
		opacity: 1;
	}

	/* Position popovers correctly based on their container */
	[data-sidebar-collapsed="true"] .sidebar--static details {
		position: relative;
		isolation: isolate;
	}

	/* Hover bridge so mouse can cross into the flyout without closing */
	[data-sidebar-collapsed="true"] .sidebar--static details::after {
		content: "";
		position: absolute;
		left: 100%;
		top: 0;
		width: 0.5rem;
		height: 100%;
	}

	/* Suppress tooltips inside open flyouts (text is already visible) */
	[data-sidebar-collapsed="true"] .sidebar--static details.is-flyout-open > ul[role="list"] .sidebar-link:hover::after {
		content: none;
	}

	/* Tooltips for regular menu items */
	[data-sidebar-collapsed="true"] .sidebar--static .sidebar-link:hover::after {
		content: attr(data-tooltip);
		position: fixed;
		left: calc(4.5rem + 0.5rem);
		background: rgb(var(--color-surface));
		color: rgb(var(--color-foreground));
		border: 1px solid rgb(var(--color-border) / 0.5);
		padding: 0.5rem 0.875rem;
		border-radius: 0.5rem;
		font-size: 0.8125rem;
		font-weight: 500;
		white-space: nowrap;
		z-index: 100;
		box-shadow: 
			0 10px 15px -3px rgb(0 0 0 / 0.1), 
			0 4px 6px -4px rgb(0 0 0 / 0.1),
			inset 0 1px 0 0 rgb(255 255 255 / 0.05);
		pointer-events: none;
		animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
		backdrop-filter: blur(8px);
	}

	/* Tooltip for impersonation icon button in collapsed sidebar */
	[data-sidebar-collapsed="true"] .sidebar--static button[data-tooltip]:hover::after {
		content: attr(data-tooltip);
		position: fixed;
		left: calc(4.5rem + 0.5rem);
		background: rgb(var(--color-surface));
		color: rgb(var(--color-foreground));
		border: 1px solid rgb(var(--color-border) / 0.5);
		padding: 0.5rem 0.875rem;
		border-radius: 0.5rem;
		font-size: 0.8125rem;
		font-weight: 500;
		white-space: nowrap;
		z-index: 100;
		box-shadow:
			0 10px 15px -3px rgb(0 0 0 / 0.1),
			0 4px 6px -4px rgb(0 0 0 / 0.1),
			inset 0 1px 0 0 rgb(255 255 255 / 0.05);
		pointer-events: none;
		animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
		backdrop-filter: blur(8px);
	}

	/* Section : rgb(var(--color-surface));
		color: rgb(var(--color-foreground));
		border: 1px solid rgb(var(--color-border) / 0.5);
		padding: 0.5rem 0.875rem;
		border-radius: 0.5rem;
		font-size: 0.8125rem;
		font-weight: 600;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		white-space: nowrap;
		z-index: 100;
		box-shadow: 
			0 10px 15px -3px rgb(0 0 0 / 0.1), 
			0 4px 6px -4px rgb(0 0 0 / 0.1),
			inset 0 1px 0 0 rgb(255 255 255 / 0.05);
		pointer-events: none;
		animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
		backdrop-filter: blur(8px)
		white-space: nowrap;
		z-index: 100;
		box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
		pointer-events: none;
		animation: fadeIn 0.15s ease-out;
	}

	/* Prevent tooltip and popover from showing at the same time */
	[data-sidebar-collapsed="true"] .sidebar--static details:hover .sidebar-section-header::after {
		display: none;
	}

	[data-sidebar-collapsed="true"] .content--with-sidebar {
		padding-left: 4.5rem !important;
	}

	/* Improve hover states for collapsed sidebar */
	[data-sidebar-collapsed="true"] .sidebar--static .sidebar-link:hover,
	[data-sidebar-collapsed="true"] .sidebar--static .sidebar-section-header:hover {
		background-color: rgb(var(--color-muted) / 0.8);
	}

	/* Enhance section icon hover state when showing popover */
	[data-sidebar-collapsed="true"] .sidebar--static details:hover .sidebar-section-header {
		background-color: rgb(var(--color-primary) / 0.15);
		color: rgb(var(--color-primary));
		box-shadow: 0 0 0 2px rgb(var(--color-primary) / 0.2);
	}

	/* Hide the profile section text when collapsed and center the avatar */
	[data-sidebar-collapsed="true"] .sidebar--static .mt-auto a {
		justify-content: center;
		gap: 0;
	}

	[data-sidebar-collapsed="true"] .sidebar--static .user-menu-trigger {
		justify-content: center;
		gap: 0;
	}

	[data-sidebar-collapsed="true"] .sidebar--static .user-menu-popup .user-menu-item {
		justify-content: center;
		text-align: center;
	}

	/* Animations */
	@keyframes slideInFromLeft {
		from {
			opacity: 0;
			transform: translateX(-8px) scale(0.96);
		}
		to {
			opacity: 1;
			transform: translateX(0) scale(1);
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(-2px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}