/**
 * Custom Unfold admin theme overrides
 * - Gold primary color (#FFBB00) instead of default purple
 * - Neutral gray base colors instead of blue-tinted slate
 * - Dark mode refinements
 * - Lower sidebar breakpoint (1100px instead of 1280px)
 * - Narrower sidebar (200px instead of 288px)
 */

/* Logo - full width with padding */
#nav-sidebar a:has(> img[alt="Home"]),
#nav-sidebar-inner a:has(> img[alt="Home"]) {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding-top: 30px;
}

#nav-sidebar img[alt="Home"],
#nav-sidebar-inner img[alt="Home"] {
	height: auto !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-right: 0 !important;
	padding: 0 8px;
	box-sizing: border-box;
}

/* Dark mode: Add gold glow to logo for visibility */
.dark #nav-sidebar img[alt="Home"],
.dark #nav-sidebar-inner img[alt="Home"] {
	filter: drop-shadow(0 0 1px rgba(255,187,0,0.8))
	        drop-shadow(0 0 2px rgba(255,187,0,0.6));
}

/* Add "Admin Backend" text below logo (light mode) */
#nav-sidebar a:has(> img[alt="Home"])::after,
#nav-sidebar-inner a:has(> img[alt="Home"])::after {
	content: "Admin Backend";
	display: block;
	color: #666;
	font-size: 0.75rem;
	margin-top: 8px;
	letter-spacing: 0.05em;
}

/* Dark mode: Logo subtitle */
.dark #nav-sidebar a:has(> img[alt="Home"])::after,
.dark #nav-sidebar-inner a:has(> img[alt="Home"])::after {
	color: #999;
}

/* Narrower sidebar (200px) */
#nav-sidebar {
	width: 200px !important;
}

.w-\[288px\] {
	width: 200px !important;
}

/* All Applications drawer - position adjacent to narrower sidebar */
.md\:left-72 {
	left: 200px !important;
}

/* Custom breakpoint: show sidebar at 1100px+ instead of 1280px (xl) */
@media (min-width: 1100px) {
	.xl\:relative.xl\:block {
		position: relative !important;
		display: block !important;
	}

	.xl\:hidden\! {
		display: none !important;
	}
}

@media (max-width: 1099px) {
	.xl\:relative.xl\:block {
		display: none !important;
	}

	.block\! {
		display: block !important;
	}
}

/* Header - light grey background */
header,
header.sticky,
.sticky.top-0.z-40 {
	background-color: #bbb !important;
}

/* Dark mode - page background #121212 */
.dark body,
.dark main,
.dark .bg-base-50,
.dark .bg-gray-50,
.dark .bg-white {
	background-color: #121212 !important;
}

/* Override Unfold's primary/accent color from purple to gold */
:root {
	--color-primary-50: #fff9e6 !important;
	--color-primary-100: #ffefb3 !important;
	--color-primary-200: #ffe580 !important;
	--color-primary-300: #ffdb4d !important;
	--color-primary-400: #ffd11a !important;
	--color-primary-500: #FFBB00 !important;
	--color-primary-600: #e6a800 !important;
	--color-primary-700: #cc9600 !important;
	--color-primary-800: #b38300 !important;
	--color-primary-900: #996f00 !important;
}

/* Accent color overrides for common elements */
.text-primary-600,
.text-primary-700,
a.text-primary-600,
a.text-primary-700 {
	color: #FFBB00 !important;
}

.bg-primary-600,
.bg-primary-700,
.dark .bg-primary-600,
.dark .bg-primary-700 {
	background-color: #FFBB00 !important;
}

.border-primary-600,
.border-primary-700 {
	border-color: #FFBB00 !important;
}

/* Buttons with primary color - black text on gold for readability */
button.bg-primary-600,
a.bg-primary-600,
input[type="submit"].bg-primary-600,
.btn-primary,
.bg-primary-600,
.bg-primary-700 {
	background-color: #FFBB00 !important;
	color: #000 !important;
}

/* Explicitly handle checked inputs to use our brand color */
input:checked[class*="bg-primary-"],
.peer:checked ~ .peer-checked\:bg-primary-600 {
	background-color: #FFBB00 !important;
	border-color: #FFBB00 !important;
	color: #000 !important;
}

/* Ensure button text is black */
button.bg-primary-600 *,
a.bg-primary-600 *,
:not(input)[class*="bg-primary-"] span,
:not(input)[class*="bg-primary-"] svg {
	color: #000 !important;
	fill: #000 !important;
}

button.bg-primary-600:hover,
a.bg-primary-600:hover,
[class*="bg-primary-"]:hover {
	background-color: #e6a800 !important;
}

/* Focus rings */
.focus\:ring-primary-600:focus,
.ring-primary-600 {
	--tw-ring-color: #FFBB00 !important;
}

/* ============================================
   DARK MODE: Override blue-tinted base colors with neutral grays
   Unfold uses Tailwind's slate colors which have blue undertones.
   These overrides use pure neutral grays instead.
   ============================================ */

:root {
	/* Base/neutral colors - pure grays instead of slate */
	--color-base-50: #fafafa !important;
	--color-base-100: #f5f5f5 !important;
	--color-base-200: #e5e5e5 !important;
	--color-base-300: #d4d4d4 !important;
	--color-base-400: #a3a3a3 !important;
	--color-base-500: #737373 !important;
	--color-base-600: #525252 !important;
	--color-base-700: #404040 !important;
	--color-base-800: #262626 !important;
	--color-base-900: #171717 !important;
	--color-base-950: #0a0a0a !important;
}

/* Dark mode table backgrounds - neutral grays */
.dark table,
.dark tbody,
.dark thead {
	background-color: #171717 !important;
}

.dark table tr {
	background-color: #171717 !important;
	border-color: #262626 !important;
}

.dark table tr:nth-child(even),
.dark table tbody tr:nth-child(even) {
	background-color: #1c1c1c !important;
}

.dark table tr:hover,
.dark table tbody tr:hover {
	background-color: #262626 !important;
	box-shadow: none !important;
}

/* Remove glow/shadow effects on table row hover */
table tr:hover,
table tbody tr:hover,
.dark table tr:hover,
.dark table tbody tr:hover {
	box-shadow: none !important;
	outline: none !important;
	filter: none !important;
}

.dark table th {
	background-color: #1f1f1f !important;
	border-color: #333 !important;
}

.dark table td {
	border-color: #262626 !important;
}

/* Dark mode card/panel backgrounds */
.dark .bg-base-50,
.dark .bg-base-100 {
	background-color: #171717 !important;
}

.dark .bg-base-200 {
	background-color: #1f1f1f !important;
}

/* Dark mode borders */
.dark .border-base-200,
.dark .border-base-300 {
	border-color: #333 !important;
}

/* Primary column in list views - heavier font weight */
#result_list tbody th.field-__str__ a,
#result_list tbody th a {
	font-weight: 700 !important;
}