/**
 * Custom CSS for SaasAdmin Theme
 * Overrides for TailAdmin default behavior
 */

/* ============================================
   DISABLE SIDEBAR EXPANSION ON HOVER
   ============================================ */

/* Prevent sidebar from expanding on hover when collapsed */
.sidebar:hover {
	width: auto !important;
}

/* Keep logo hidden on hover when sidebar is collapsed */
.sidebar:hover .logo {
	display: inherit !important;
}

/* Keep logo icon visible on hover when sidebar is collapsed */
.sidebar:hover .logo-icon {
	display: inherit !important;
}

/* Keep sidebar header alignment on hover */
.sidebar:hover .sidebar-header {
	justify-content: inherit !important;
}

/* Keep menu group title hidden on hover when sidebar is collapsed */
.sidebar:hover .menu-group-title {
	display: inherit !important;
}

/* Keep menu group icon visible on hover when sidebar is collapsed */
.sidebar:hover .menu-group-icon {
	display: inherit !important;
}

/* Keep menu item text visible on hover when sidebar is collapsed */
.sidebar:hover .menu-item-text {
	display: inherit !important;
}

/* Keep menu item arrow hidden on hover when sidebar is collapsed */
.sidebar:hover .menu-item-arrow {
	display: inherit !important;
}

/* Keep menu dropdown hidden on hover when sidebar is collapsed */
.sidebar:hover .menu-dropdown {
	display: inherit !important;
}


/* ============================================
   MENU ITEM VERTICAL LAYOUT (COLLAPSED SIDEBAR)
   ============================================ */

/* Menu item layout when sidebar is collapsed - vertical layout */
@media (min-width: 1024px) {
	.sidebar.lg\:w-\[110px\] .menu-item {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.25rem;
		padding: 0.625rem 0.5rem;
		min-height: 60px;
	}

	.sidebar.lg\:w-\[110px\] .menu-item svg {
		margin: 0;
	}

	.sidebar.lg\:w-\[110px\] .menu-item-text {
		font-size: 0.625rem;
		line-height: 1;
		text-align: center;
		font-weight: 500;
		display: block !important;
	}
}

/* Menu item layout when sidebar is expanded - horizontal layout (default) */
@media (min-width: 1024px) {
	.sidebar:not(.lg\:w-\[110px\]) .menu-item {
		flex-direction: row;
		align-items: center;
		gap: 1rem;
		white-space: nowrap;
	}

	.sidebar:not(.lg\:w-\[110px\]) .menu-item-text {
		font-size: 0.9375rem;
		line-height: 1.5;
		display: block;
	}
}

/* Ensure sidebar expands to fit content */
.sidebar {
	min-width: fit-content;
}

.sidebar.max-w-\[280px\] {
	max-width: 280px;
}


/* ============================================
   DARK MODE CONTENT FIXES
   ============================================ */

/* Ensure all content text is readable in dark mode - General content */
.dark .site-main,
.dark .entry-content,
.dark main {
	color: #e5e7eb;
}

.dark .site-main p,
.dark .entry-content p,
.dark main p,
.dark .site-main li,
.dark .entry-content li,
.dark main li,
.dark .site-main td,
.dark .entry-content td,
.dark main td,
.dark .site-main span,
.dark .entry-content span,
.dark main span,
.dark .site-main div {
	color: inherit;
}

.dark .site-main h1,
.dark .entry-content h1,
.dark main h1,
.dark .site-main h2,
.dark .entry-content h2,
.dark main h2,
.dark .site-main h3,
.dark .entry-content h3,
.dark main h3,
.dark .site-main h4,
.dark .entry-content h4,
.dark main h4,
.dark .site-main h5,
.dark .entry-content h5,
.dark main h5,
.dark .site-main h6,
.dark .entry-content h6,
.dark main h6,
.dark .entry-title,
.dark .page-title {
	color: #f9fafb;
}

.dark .site-main a,
.dark .entry-content a,
.dark main a {
	color: #60a5fa;
}

.dark .site-main a:hover,
.dark .entry-content a:hover,
.dark main a:hover {
	color: #93c5fd;
}

/* Prose-specific styles */
.dark .prose,
.dark .prose p,
.dark .prose li,
.dark .prose td,
.dark .prose th,
.dark .prose blockquote,
.dark .prose dl,
.dark .prose dd,
.dark .prose dt,
.dark .prose figcaption {
	color: #e5e7eb;
}

.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6 {
	color: #f9fafb;
}

.dark .prose strong {
	color: #f9fafb;
}

.dark .prose a {
	color: #60a5fa;
}

.dark .prose a:hover {
	color: #93c5fd;
}

.dark .prose code {
	color: #f9fafb;
	background-color: #374151;
}

.dark .prose pre {
	background-color: #1f2937;
	border-color: #374151;
}

.dark .prose pre code {
	background-color: transparent;
}

.dark .prose blockquote {
	border-left-color: #4b5563;
	color: #d1d5db;
}

.dark .prose hr {
	border-color: #374151;
}

.dark .prose table {
	color: #e5e7eb;
}

.dark .prose thead {
	border-bottom-color: #4b5563;
}

.dark .prose tbody tr {
	border-bottom-color: #374151;
}

.dark .prose th {
	color: #f9fafb;
}

/* Entry header and meta */
.dark .entry-header,
.dark .entry-meta,
.dark .entry-footer {
	color: #9ca3af;
}

.dark .posted-on,
.dark .byline,
.dark .cat-links,
.dark .tags-links,
.dark .comments-link {
	color: #9ca3af;
}

/* Navigation */
.dark .nav-links,
.dark .post-navigation,
.dark .posts-navigation {
	color: #e5e7eb;
}

.dark .nav-subtitle {
	color: #9ca3af;
}

.dark .nav-title {
	color: #f9fafb;
}

/* Page header */
.dark .page-header {
	color: #e5e7eb;
	border-color: #374151;
}

.dark .archive-description {
	color: #9ca3af;
}


/* ============================================
   FOOTER STYLES
   ============================================ */

/* Footer general styles */
.saasadmin-footer {
	position: relative;
	width: 100%;
	z-index: 10;
}

/* Ensure footer links have proper spacing */
.saasadmin-footer a {
	transition: color 0.2s ease;
}

/* Login page specific styles */
body.login {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f9fafb;
}

body.login #login {
	flex: 1;
}

/* Position footer at the bottom of login page */
body.login .saasadmin-footer {
	margin-top: auto;
	border-top: none;
	background-color: transparent;
	padding: 1.5rem 1rem;
}

/* Adjust footer container in login page */
body.login .saasadmin-footer > div {
	max-width: 400px;
	margin: 0 auto;
	padding-left: 0;
	padding-right: 0;
}

/* Center and adjust spacing for login footer */
body.login .saasadmin-footer .flex {
	flex-direction: column;
	gap: 0.75rem;
	text-align: center;
}

body.login .saasadmin-footer a {
	font-size: 0.875rem;
}

/* Dark mode for login footer */
body.login.dark {
	background-color: #111827;
}

body.login.dark .saasadmin-footer {
	background-color: transparent;
	border-color: transparent;
	color: #9ca3af;
}

body.login.dark .saasadmin-footer a {
	color: #9ca3af;
}

body.login.dark .saasadmin-footer a:hover {
	color: #ffffff;
}