@font-face {
    font-family: "Averta";
    src: url("https://db.onlinewebfonts.com/t/f036e81e6040acc6b43aabc036862d21.eot");
    src: url("https://db.onlinewebfonts.com/t/f036e81e6040acc6b43aabc036862d21.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/f036e81e6040acc6b43aabc036862d21.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/f036e81e6040acc6b43aabc036862d21.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/f036e81e6040acc6b43aabc036862d21.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/f036e81e6040acc6b43aabc036862d21.svg#Averta")format("svg");
}

/* SETTINGS */

/* ===================================
   BREAKPOINTS & RESPONSIVE DESIGN
   =================================== */

:root {
  --bp-sm: 414px;
  --bp-md: 769px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-xxl: 1440px;
}

:root {
	/* --neutral-000: oklch(1 0 0); */
	/* --neutral-50: #f8f9fa; */
	--slate-00: rgb(252, 252, 252);
}

:root {
		--slate-50: 	 rgb(242, 245, 251)
;
		--neutral-50:  rgb(255, 255, 255)
;
		--primary-50:	 rgb(248, 255, 254)
;
		/* --primary-$(i):	 oklch(calc(0.97 - (($i -  50) / 900) * 0.73) calc(0.055 + (($i - 250)  / 900) * 0.20)  250.77); */
		--info-50:	 rgb(231, 249, 255)
;
		--error-50:	 rgb(255, 242, 239)
;
		--warning-50:	 rgb(255, 244, 225)
;
		--success-50:	 rgb(223, 255, 228)
;
		--slate-100: 	 rgb(228, 232, 238)
;
		--neutral-100:  rgb(239, 246, 253)
;
		--primary-100:	 rgb(187, 255, 250)
;
		/* --primary-$(i):	 oklch(calc(0.97 - (($i -  50) / 900) * 0.73) calc(0.055 + (($i - 250)  / 900) * 0.20)  250.77); */
		--info-100:	 rgb(196, 240, 255)
;
		--error-100:	 rgb(255, 223, 218)
;
		--warning-100:	 rgb(255, 228, 183)
;
		--success-100:	 rgb(198, 246, 207)
;
		--slate-150: 	 rgb(214, 219, 226)
;
		--neutral-150:  rgb(224, 231, 239)
;
		--primary-150:	 rgb(154, 246, 240)
;
		/* --primary-$(i):	 oklch(calc(0.97 - (($i -  50) / 900) * 0.73) calc(0.055 + (($i - 250)  / 900) * 0.20)  250.77); */
		--info-150:	 rgb(160, 231, 254)
;
		--error-150:	 rgb(255, 205, 196)
;
		--warning-150:	 rgb(249, 213, 151)
;
		--success-150:	 rgb(177, 235, 188)
;
		--slate-200: 	 rgb(200, 206, 213)
;
		--neutral-200:  rgb(208, 216, 224)
;
		--primary-200:	 rgb(121, 235, 229)
;
		/* --primary-$(i):	 oklch(calc(0.97 - (($i -  50) / 900) * 0.73) calc(0.055 + (($i - 250)  / 900) * 0.20)  250.77); */
		--info-200:	 rgb(136, 219, 245)
;
		--error-200:	 rgb(255, 185, 173)
;
		--warning-200:	 rgb(241, 198, 124)
;
		--success-200:	 rgb(155, 225, 169)
;
		--slate-250: 	 rgb(186, 193, 201)
;
		--neutral-250:  rgb(193, 201, 210)
;
		--primary-250:	 rgb(81, 225, 218)
;
		/* --primary-$(i):	 oklch(calc(0.97 - (($i -  50) / 900) * 0.73) calc(0.055 + (($i - 250)  / 900) * 0.20)  250.77); */
		--info-250:	 rgb(111, 207, 237)
;
		--error-250:	 rgb(255, 165, 150)
;
		--warning-250:	 rgb(233, 183, 94)
;
		--success-250:	 rgb(132, 214, 150)
;
		--slate-300: 	 rgb(173, 180, 189)
;
		--neutral-300:  rgb(178, 187, 196)
;
		--primary-300:	 rgb(0, 214, 208)
;
		/* --primary-$(i):	 oklch(calc(0.97 - (($i -  50) / 900) * 0.73) calc(0.055 + (($i - 250)  / 900) * 0.20)  250.77); */
		--info-300:	 rgb(83, 196, 228)
;
		--error-300:	 rgb(255, 143, 126)
;
		--warning-300:	 rgb(225, 168, 59)
;
		--success-300:	 rgb(108, 204, 131)
;
		--slate-350: 	 rgb(160, 167, 177)
;
		--neutral-350:  rgb(164, 172, 182)
;
		--primary-350:	 rgb(0, 200, 193)
;
		/* --primary-$(i):	 oklch(calc(0.97 - (($i -  50) / 900) * 0.73) calc(0.055 + (($i - 250)  / 900) * 0.20)  250.77); */
		--info-350:	 rgb(47, 184, 219)
;
		--error-350:	 rgb(248, 125, 106)
;
		--warning-350:	 rgb(215, 154, 0)
;
		--success-350:	 rgb(81, 193, 112)
;
		--slate-400: 	 rgb(147, 155, 165)
;
		--neutral-400:  rgb(149, 158, 168)
;
		--primary-400:	 rgb(0, 185, 180)
;
		/* --primary-$(i):	 oklch(calc(0.97 - (($i -  50) / 900) * 0.73) calc(0.055 + (($i - 250)  / 900) * 0.20)  250.77); */
		--info-400:	 rgb(0, 171, 207)
;
		--error-400:	 rgb(241, 105, 87)
;
		--warning-400:	 rgb(200, 142, 0)
;
		--success-400:	 rgb(47, 182, 93)
;
		--slate-450: 	 rgb(134, 143, 154)
;
		--neutral-450:  rgb(135, 145, 155)
;
		--primary-450:	 rgb(0, 171, 166)
;
		/* --primary-$(i):	 oklch(calc(0.97 - (($i -  50) / 900) * 0.73) calc(0.055 + (($i - 250)  / 900) * 0.20)  250.77); */
		--info-450:	 rgb(0, 158, 191)
;
		--error-450:	 rgb(234, 84, 66)
;
		--warning-450:	 rgb(184, 131, 0)
;
		--success-450:	 rgb(0, 170, 78)
;
		--slate-500: 	 rgb(122, 131, 142)
;
		--neutral-500:  rgb(121, 131, 142)
;
		--primary-500:	 rgb(0, 157, 152)
;
		/* --primary-$(i):	 oklch(calc(0.97 - (($i -  50) / 900) * 0.73) calc(0.055 + (($i - 250)  / 900) * 0.20)  250.77); */
		--info-500:	 rgb(0, 144, 175)
;
		--error-500:	 rgb(226, 60, 43)
;
		--warning-500:	 rgb(168, 120, 0)
;
		--success-500:	 rgb(0, 156, 71)
;
		--slate-550: 	 rgb(109, 119, 131)
;
		--neutral-550:  rgb(107, 118, 128)
;
		--primary-550:	 rgb(0, 144, 139)
;
		/* --primary-$(i):	 oklch(calc(0.97 - (($i -  50) / 900) * 0.73) calc(0.055 + (($i - 250)  / 900) * 0.20)  250.77); */
		--info-550:	 rgb(0, 131, 159)
;
		--error-550:	 rgb(218, 25, 8)
;
		--warning-550:	 rgb(153, 109, 0)
;
		--success-550:	 rgb(0, 142, 64)
;
		--slate-600: 	 rgb(97, 107, 120)
;
		--neutral-600:  rgb(94, 104, 116)
;
		--primary-600:	 rgb(0, 130, 126)
;
		/* --primary-$(i):	 oklch(calc(0.97 - (($i -  50) / 900) * 0.73) calc(0.055 + (($i - 250)  / 900) * 0.20)  250.77); */
		--info-600:	 rgb(0, 118, 144)
;
		--error-600:	 rgb(199, 13, 0)
;
		--warning-600:	 rgb(138, 98, 0)
;
		--success-600:	 rgb(0, 128, 57)
;
		--slate-650: 	 rgb(85, 95, 109)
;
		--neutral-650:  rgb(81, 92, 103)
;
		--primary-650:	 rgb(0, 117, 113)
;
		/* --primary-$(i):	 oklch(calc(0.97 - (($i -  50) / 900) * 0.73) calc(0.055 + (($i - 250)  / 900) * 0.20)  250.77); */
		--info-650:	 rgb(0, 105, 129)
;
		--error-650:	 rgb(178, 11, 0)
;
		--warning-650:	 rgb(124, 87, 0)
;
		--success-650:	 rgb(0, 114, 50)
;
		--slate-700: 	 rgb(74, 84, 98)
;
		--neutral-700:  rgb(68, 79, 91)
;
		--primary-700:	 rgb(0, 104, 101)
;
		/* --primary-$(i):	 oklch(calc(0.97 - (($i -  50) / 900) * 0.73) calc(0.055 + (($i - 250)  / 900) * 0.20)  250.77); */
		--info-700:	 rgb(0, 93, 114)
;
		--error-700:	 rgb(158, 8, 0)
;
		--warning-700:	 rgb(110, 76, 0)
;
		--success-700:	 rgb(0, 101, 43)
;
		--slate-750: 	 rgb(62, 73, 87)
;
		--neutral-750:  rgb(56, 67, 79)
;
		--primary-750:	 rgb(0, 91, 88)
;
		/* --primary-$(i):	 oklch(calc(0.97 - (($i -  50) / 900) * 0.73) calc(0.055 + (($i - 250)  / 900) * 0.20)  250.77); */
		--info-750:	 rgb(0, 81, 99)
;
		--error-750:	 rgb(139, 6, 0)
;
		--warning-750:	 rgb(96, 66, 0)
;
		--success-750:	 rgb(0, 88, 37)
;
		--slate-800: 	 rgb(51, 62, 77)
;
		--neutral-800:  rgb(44, 55, 67)
;
		--primary-800:	 rgb(0, 79, 76)
;
		/* --primary-$(i):	 oklch(calc(0.97 - (($i -  50) / 900) * 0.73) calc(0.055 + (($i - 250)  / 900) * 0.20)  250.77); */
		--info-800:	 rgb(0, 69, 85)
;
		--error-800:	 rgb(120, 5, 0)
;
		--warning-800:	 rgb(82, 56, 0)
;
		--success-800:	 rgb(0, 75, 31)
;
		--slate-850: 	 rgb(41, 52, 67)
;
		--neutral-850:  rgb(32, 43, 55)
;
		--primary-850:	 rgb(0, 67, 65)
;
		/* --primary-$(i):	 oklch(calc(0.97 - (($i -  50) / 900) * 0.73) calc(0.055 + (($i - 250)  / 900) * 0.20)  250.77); */
		--info-850:	 rgb(0, 58, 72)
;
		--error-850:	 rgb(101, 3, 0)
;
		--warning-850:	 rgb(69, 47, 0)
;
		--success-850:	 rgb(0, 63, 24)
;
		--slate-900: 	 rgb(30, 42, 57)
;
		--neutral-900:  rgb(21, 32, 44)
;
		--primary-900:	 rgb(0, 55, 53)
;
		/* --primary-$(i):	 oklch(calc(0.97 - (($i -  50) / 900) * 0.73) calc(0.055 + (($i - 250)  / 900) * 0.20)  250.77); */
		--info-900:	 rgb(0, 47, 58)
;
		--error-900:	 rgb(83, 2, 0)
;
		--warning-900:	 rgb(56, 37, 0)
;
		--success-900:	 rgb(0, 51, 18)
;
		--slate-950: 	 rgb(20, 32, 47)
;
		--neutral-950:  rgb(10, 22, 33)
;
		--primary-950:	 rgb(0, 44, 42)
;
		/* --primary-$(i):	 oklch(calc(0.97 - (($i -  50) / 900) * 0.73) calc(0.055 + (($i - 250)  / 900) * 0.20)  250.77); */
		--info-950:	 rgb(0, 36, 45)
;
		--error-950:	 rgb(66, 1, 0)
;
		--warning-950:	 rgb(43, 28, 0)
;
		--success-950:	 rgb(0, 39, 13)

}

@supports (color: color(display-p3 0 0 0%)) {
:root {
		--primary-50:	 rgb(248, 255, 254)
;
		--info-50:	 rgb(231, 249, 255)
;
		--error-50:	 rgb(255, 242, 239)
;
		--warning-50:	 rgb(255, 244, 225)
;
		--success-50:	 rgb(223, 255, 228)
;
		--primary-100:	 rgb(187, 255, 250)
;
		--info-100:	 rgb(196, 240, 255)
;
		--error-100:	 rgb(255, 223, 218)
;
		--warning-100:	 rgb(255, 228, 183)
;
		--error-150:	 rgb(255, 205, 196)
;
		--error-200:	 rgb(255, 185, 173)
;
		--error-250:	 rgb(255, 165, 150)
;
		--primary-300:	 rgb(0, 214, 208)
;
		--error-300:	 rgb(255, 143, 126)
;
		--primary-350:	 rgb(0, 200, 193)
;
		--warning-350:	 rgb(215, 154, 0)
;
		--primary-400:	 rgb(0, 185, 180)
;
		--info-400:	 rgb(0, 171, 207)
;
		--warning-400:	 rgb(200, 142, 0)
;
		--primary-450:	 rgb(0, 171, 166)
;
		--info-450:	 rgb(0, 158, 191)
;
		--warning-450:	 rgb(184, 131, 0)
;
		--success-450:	 rgb(0, 170, 78)
;
		--primary-500:	 rgb(0, 157, 152)
;
		--info-500:	 rgb(0, 144, 175)
;
		--warning-500:	 rgb(168, 120, 0)
;
		--success-500:	 rgb(0, 156, 71)
;
		--primary-550:	 rgb(0, 144, 139)
;
		--info-550:	 rgb(0, 131, 159)
;
		--warning-550:	 rgb(153, 109, 0)
;
		--success-550:	 rgb(0, 142, 64)
;
		--primary-600:	 rgb(0, 130, 126)
;
		--info-600:	 rgb(0, 118, 144)
;
		--error-600:	 rgb(199, 13, 0)
;
		--warning-600:	 rgb(138, 98, 0)
;
		--success-600:	 rgb(0, 128, 57)
;
		--primary-650:	 rgb(0, 117, 113)
;
		--info-650:	 rgb(0, 105, 129)
;
		--error-650:	 rgb(179, 10, 0)
;
		--warning-650:	 rgb(124, 87, 0)
;
		--success-650:	 rgb(0, 114, 50)
;
		--primary-700:	 rgb(0, 104, 101)
;
		--info-700:	 rgb(0, 93, 114)
;
		--error-700:	 rgb(158, 8, 0)
;
		--warning-700:	 rgb(110, 76, 0)
;
		--success-700:	 rgb(0, 101, 43)
;
		--primary-750:	 rgb(0, 91, 88)
;
		--info-750:	 rgb(0, 81, 99)
;
		--error-750:	 rgb(139, 6, 0)
;
		--warning-750:	 rgb(96, 66, 0)
;
		--success-750:	 rgb(0, 88, 37)
;
		--primary-800:	 rgb(0, 79, 76)
;
		--info-800:	 rgb(0, 69, 85)
;
		--error-800:	 rgb(120, 4, 0)
;
		--warning-800:	 rgb(82, 56, 0)
;
		--success-800:	 rgb(0, 75, 31)
;
		--primary-850:	 rgb(0, 67, 65)
;
		--info-850:	 rgb(0, 58, 72)
;
		--error-850:	 rgb(101, 3, 0)
;
		--warning-850:	 rgb(69, 47, 0)
;
		--success-850:	 rgb(0, 63, 24)
;
		--primary-900:	 rgb(0, 55, 53)
;
		--info-900:	 rgb(0, 47, 58)
;
		--error-900:	 rgb(84, 2, 0)
;
		--warning-900:	 rgb(56, 37, 0)
;
		--success-900:	 rgb(0, 51, 18)
;
		--primary-950:	 rgb(0, 44, 42)
;
		--info-950:	 rgb(0, 36, 45)
;
		--error-950:	 rgb(66, 1, 0)
;
		--warning-950:	 rgb(43, 28, 0)
;
		--success-950:	 rgb(0, 39, 13)

}

@media (color-gamut: p3) {
:root {
		--primary-50:	 color(display-p3 0.97404 1 0.9979)
;
		--info-50:	 color(display-p3 0.91354 0.97467 1)
;
		--error-50:	 color(display-p3 1 0.94626 0.93385)
;
		--warning-50:	 color(display-p3 1 0.95574 0.87311)
;
		--success-50:	 color(display-p3 0.89167 1 0.8966)
;
		--primary-100:	 color(display-p3 0.77985 0.99567 0.98195)
;
		--info-100:	 color(display-p3 0.79271 0.93948 1)
;
		--error-100:	 color(display-p3 1 0.87216 0.84319)
;
		--warning-100:	 color(display-p3 0.98929 0.89531 0.72037)
;
		--error-150:	 color(display-p3 1 0.79577 0.75074)
;
		--error-200:	 color(display-p3 0.9962 0.71823 0.65917)
;
		--error-250:	 color(display-p3 0.96933 0.65136 0.58581)
;
		--primary-300:	 color(display-p3 0.37275 0.82878 0.81069)
;
		--error-300:	 color(display-p3 0.94129 0.58389 0.51298)
;
		--primary-350:	 color(display-p3 0.23014 0.78645 0.7687)
;
		--warning-350:	 color(display-p3 0.81327 0.61214 0.18213)
;
		--primary-400:	 color(display-p3 0 0.74014 0.72337)
;
		--info-400:	 color(display-p3 0.26739 0.66377 0.80898)
;
		--warning-400:	 color(display-p3 0.76978 0.55852 0)
;
		--primary-450:	 color(display-p3 0 0.68382 0.66823)
;
		--info-450:	 color(display-p3 0.14467 0.61696 0.77386)
;
		--warning-450:	 color(display-p3 0.7093 0.51352 0)
;
		--success-450:	 color(display-p3 0.273 0.66232 0.33188)
;
		--primary-500:	 color(display-p3 0 0.62834 0.61392)
;
		--info-500:	 color(display-p3 0 0.56774 0.72562)
;
		--warning-500:	 color(display-p3 0.64976 0.46923 0)
;
		--success-500:	 color(display-p3 0.16881 0.61929 0.25984)
;
		--primary-550:	 color(display-p3 0 0.57374 0.56048)
;
		--info-550:	 color(display-p3 0 0.516 0.66077)
;
		--warning-550:	 color(display-p3 0.59121 0.42568 0)
;
		--success-550:	 color(display-p3 0 0.57407 0.19131)
;
		--primary-600:	 color(display-p3 0 0.52008 0.50795)
;
		--info-600:	 color(display-p3 0 0.46519 0.59708)
;
		--error-600:	 color(display-p3 0.74437 0.06655 0)
;
		--warning-600:	 color(display-p3 0.53371 0.3829 0)
;
		--success-600:	 color(display-p3 0 0.51809 0.16939)
;
		--primary-650:	 color(display-p3 0 0.4674 0.45638)
;
		--info-650:	 color(display-p3 0 0.41535 0.5346)
;
		--error-650:	 color(display-p3 0.66817 0.05268 0)
;
		--warning-650:	 color(display-p3 0.47731 0.34094 0)
;
		--success-650:	 color(display-p3 0 0.46318 0.14788)
;
		--primary-700:	 color(display-p3 0 0.41577 0.40584)
;
		--info-700:	 color(display-p3 0 0.36654 0.47343)
;
		--error-700:	 color(display-p3 0.59299 0.04232 0)
;
		--warning-700:	 color(display-p3 0.42209 0.29985 0)
;
		--success-700:	 color(display-p3 0 0.40941 0.12683)
;
		--primary-750:	 color(display-p3 0 0.36525 0.35638)
;
		--info-750:	 color(display-p3 0 0.31884 0.41365)
;
		--error-750:	 color(display-p3 0.51962 0.03203 0)
;
		--warning-750:	 color(display-p3 0.36812 0.25969 0)
;
		--success-750:	 color(display-p3 0 0.35686 0.10625)
;
		--primary-800:	 color(display-p3 0 0.31591 0.30809)
;
		--info-800:	 color(display-p3 0 0.27233 0.35535)
;
		--error-800:	 color(display-p3 0.44814 0.02326 0)
;
		--warning-800:	 color(display-p3 0.31551 0.22053 0)
;
		--success-800:	 color(display-p3 0 0.30563 0.08618)
;
		--primary-850:	 color(display-p3 0 0.26785 0.26104)
;
		--info-850:	 color(display-p3 0 0.22711 0.29867)
;
		--error-850:	 color(display-p3 0.37867 0.01614 0)
;
		--warning-850:	 color(display-p3 0.26436 0.18244 0)
;
		--success-850:	 color(display-p3 0 0.25581 0.06667)
;
		--primary-900:	 color(display-p3 0 0.22119 0.21537)
;
		--info-900:	 color(display-p3 0 0.1833 0.24376)
;
		--error-900:	 color(display-p3 0.31138 0.0106 0)
;
		--warning-900:	 color(display-p3 0.21478 0.14556 0)
;
		--success-900:	 color(display-p3 0 0.20754 0.04777)
;
		--primary-950:	 color(display-p3 0 0.17606 0.17119)
;
		--info-950:	 color(display-p3 0 0.14104 0.19082)
;
		--error-950:	 color(display-p3 0.24649 0.00651 0)
;
		--warning-950:	 color(display-p3 0.16692 0.11001 0)
;
		--success-950:	 color(display-p3 0 0.16099 0.03024)

}
}
}

/* :root {
	--neutral-000: oklch(1 0 0);
	--neutral-50: #f8f9fa;
}

@each $i in 100, 200, 300, 400, 500, 600, 700, 800, 900 {
	:root {
		--neutral-$(i): oklch(calc(97% - (($i - 100) / 800) * 73%) calc((0.08 + (($i - 100) / 800) * 0.12) * 0.15) 250);
	}
}

:root {
	@each $i in 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950 {
		--slate-$(i): 	 oklch(calc(0.99 - (($i - 50) / 900) * 0.86) calc(0.008 + (($i - 50) / 900) * 0.025)   255);
		--primary-$(i):	 oklch(calc(0.99 - (($i - 80) / 900) * 0.84) calc(0.06 + (($i - 90)/900) * 0.30)    190.77);
		--info-$(i):	 oklch(calc(0.99 - (($i - 50) / 900) * 0.84) calc(0.06 + (($i - 50)/900) * 0.30) 220);
		--error-$(i):	 oklch(calc(0.99 - (($i - 50) / 900) * 0.84) calc(0.06 + (($i - 50)/900) * 0.30) 30);
		--warning-$(i):	 oklch(calc(0.99 - (($i - 50) / 900) * 0.84) calc(0.08 + (($i - 50)/900) * 0.30) 80);
		--success-$(i):	 oklch(calc(0.99 - (($i - 50) / 900) * 0.84) calc(0.06 + (($i - 50)/900) * 0.30) 150);
	}
} */

/* ===================================
   TYPOGRAPHY SYSTEM
   =================================== */

:root {
  /* Font Families */
  --font-family-base: 'Averta', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  
  /* Font Sizes */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
}

/* ===================================
   SPACING SYSTEM
   =================================== */

:root {
  /* Spacing Scale */
  --spacing-xxs: 0.25rem;   /* 4px */
  --spacing-xs: 0.5rem;     /* 8px */
  --spacing-sm: 0.75rem;   /* 12px */
  --spacing-base: 1rem;     /* 16px */
  --spacing-m: 1.5rem;     /* 24px */
  --spacing-l: 2rem;       /* 32px */
  --spacing-xl: 3rem;      /* 48px */
  --spacing-xxl: 4rem;     /* 64px */
  --spacing-xxxl: 5rem;    /* 80px */
  
  /* Gap Variants */
  --gap-xs: var(--spacing-xs);
  --gap-sm: var(--spacing-sm);
  --gap-md: var(--spacing-base);
  --gap-lg: var(--spacing-m);
  --gap-xl: var(--spacing-l);
  
  /* Layout Gap */
  --layout-gap: var(--gap-md);
}

/* ===================================
   SHADOW SYSTEM
   =================================== */

:root {
  /* Shadow Elevations */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-base:
    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-md:
    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-text-01: 0 1px 2px rgba(0, 0, 0, 0.15);
  --box-shadow-small: 0 2px 4px rgba(0, 0, 0, 0.1);

  /* Component Shadows */
  --shadow-navbar: var(--shadow-sm);
  --shadow-card: var(--shadow-sm);
  --shadow-modal: var(--shadow-lg);
  --shadow-tooltip: var(--shadow-xs);
}

/* ===================================
   BORDER SYSTEM
   =================================== */

:root {
  /* Border Radius */
  --border-radius-none: 0;
  --border-radius-xs: 0.125rem;  /* 2px */
  --border-radius-sm: 0.25rem;   /* 4px */
  --border-radius-base: 0.375rem; /* 6px */
  --border-radius-md: 0.5rem;    /* 8px */
  --border-radius-lg: 0.75rem;   /* 12px */
  --border-radius-xl: 1rem;      /* 16px */
  --border-radius-full: 9999px;
  
  /* Border Styles */
  --border-style-default: solid;
  --border-style-thick: 2px solid;
  --border-style-dashed: dashed;
  
  /* Border Colors */
  --border-color-light: var(--slate-200);
  --border-color-base: var(--slate-300);
  --border-color-dark: var(--slate-400);
}

/* ===================================
   Z-INDEX HIERARCHY
   =================================== */

:root {
  /* Z-Index Levels */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 1070;
  --z-index-toast: 1100;
  --z-index-notification: 1200;
}

/* ===================================
   ANIMATION & TRANSITION SETTINGS
   =================================== */

:root {
  /* Transition Durations */
  --transition-fast: 150ms;
  --transition-normal: 250ms;
  --transition-slow: 350ms;
  
  /* Transition Timing Functions */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Animation Keyframes */
  --animation-loading-spin: spin var(--transition-normal) linear infinite;
  --animation-success-bounce: bounce var(--transition-normal) ease-in-out;
  --animation-fade-in: fadeIn var(--transition-normal) ease-in-out;
  --animation-slide-up: slideUp var(--transition-normal) ease-in-out;
}

/* Keyframes */

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ===================================
   BUTTON SYSTEM SETTINGS
   =================================== */

:root {
  /* Button Dimensions */
  --button-height: 2.5rem;
  --button-height-small: 1.75rem;
  --button-height-large: 3rem;
  
  /* Button Typography */
  --button-font-size: var(--font-size-base);
  --button-font-size-small: var(--font-size-sm);
  --button-font-size-large: var(--font-size-lg);
  
  /* Button Spacing */
  --button-padding-x: var(--spacing-m);
  --button-padding-x-small: var(--spacing-xs);
  --button-padding-x-large: var(--spacing-l);
  
  /* Button Icon Gap */
  --button-icon-gap: var(--spacing-xs);
  
  /* Button Border Radius */
  --button-border-radius: var(--border-radius-base);
}

/* ===================================
   SEMANTIC DESIGN TOKENS
   =================================== */

:root {
  /* Semantic Color Tokens */
  --color-surface: var(--slate-50);
  --color-surface-secondary: var(--slate-100);
  --color-text: var(--slate-900);
  --color-text-secondary: var(--slate-600);
  --color-border: var(--slate-200);
  
  /* Feedback Colors */
  --color-success: var(--success-500);
  --color-error: var(--error-500);
  --color-warning: var(--warning-500);
  --color-info: var(--info-500);
  
  /* Status Backgrounds */
  --color-success-bg: oklch(from var(--success-500) l c h / 0.1);
  --color-error-bg: oklch(from var(--error-500) l c h / 0.1);
  --color-warning-bg: oklch(from var(--warning-500) l c h / 0.1);
  --color-info-bg: oklch(from var(--info-500) l c h / 0.1);
  
  /* Validation Colors */
  --validation-success: var(--success-500);
  --validation-error: var(--error-500);
  --validation-warning: var(--warning-500);
  --validation-info: var(--info-500);
}

/* Dark mode - light-dark() nativo */

@supports (color: light-dark(red, blue)) {
  :root {
    --color-surface: light-dark(var(--slate-50), var(--slate-950));
    --color-text: light-dark(var(--slate-900), var(--slate-50));
    --color-surface-secondary: light-dark(var(--slate-100), var(--slate-900));
    --color-text-secondary: light-dark(var(--slate-600), var(--slate-400));
    --color-border: light-dark(var(--slate-200), var(--slate-700));
  }
}

/* Fallback dark mode */

@media (prefers-color-scheme: dark) {
  :root {
    --color-surface: var(--slate-950);
    --color-text: var(--slate-50);
    --color-surface-secondary: var(--slate-900);
    --color-text-secondary: var(--slate-400);
    --color-border: var(--slate-700);
  }
}

/* ====================================================
   # DESIGN SYSTEM CONSOLIDATED VARIABLES
   ====================================================
   All design system variables in a single, optimized file
   - Centralized variable management
   - No duplications
   - Organized by category
   - Ready for production use
==================================================== */

/* Simplified text color system using neutral extremes */

:root {
  --text-light: var(--slate-950); /* For light backgrounds */
  --text-dark: var(--slate-50); /* For dark backgrounds */
}

:root {
  /* ====================================================
     # DESIGN TOKENS - CORE
     ====================================================
     Core design tokens for consistent theming
  ==================================================== */
  --radius-none: var(--border-radius-none);
  --radius-sm: var(--border-radius-small);
  --radius-md: var(--border-radius-medium);
  --radius-lg: var(--border-radius-large);
  --radius-full: var(--border-radius-circular);

  --gap-xs: var(--spacing-xs);
  --gap-sm: var(--spacing-s);
  --gap-md: var(--spacing-m);
  --gap-lg: var(--spacing-l);
  --gap-xl: var(--spacing-xl);

  /* ====================================================
     # SPACING SYSTEM
     ====================================================
     Consistent spacing scale for the entire design system
  ==================================================== */
  --spacing-xxxs: 0.125rem;
  --spacing-xxs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-s: 0.75rem;
  --spacing-m: 0.875rem;
  --spacing-base: 1rem;
  --spacing-l: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 2.5rem;
  --spacing-xxxl: 4rem;
  --spacing-x: 0.625rem;

  /* ====================================================
     # TYPOGRAPHY SYSTEM
     ====================================================
     Complete typography system for consistent text styling
  ==================================================== */
  --font-family:
    system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
  --font-family-monospace:
    "JetBrains Mono", ui-monospace, "Roboto Mono", SFMono-Regular, Menlo,
    Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --font-size-0: 0.875rem;
  --font-size-1: 0.75rem;
  --font-size-2: 0.875rem;
  --font-size-3: 1rem;
  --font-size-4: 1.125rem;
  --font-size-5: 1.25rem;
  --font-size-6: 1.5rem;
  --font-size-7: 1.875rem;
  --font-size-8: 2.25rem;
  --font-size-9: 3rem;

  --font-size-display-1: 2.25rem;
  --font-size-display-2: 2rem;

  --font-size-base: 1rem;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semi-bold: 500;
  --font-weight-bold: 600;

  --line-height-1: 1rem;
  --line-height-2: 1.25rem;
  --line-height-3: 1.5rem;
  --line-height-4: 1.75rem;
  --line-height-5: 2rem;
  --line-height-6: 2.25rem;
  --line-height-7: 2.5rem;
  --line-height-8: 2.75rem;
  --line-height-9: 3rem;

  /* ====================================================
     # COLOR SYSTEM
     ====================================================
     Core design tokens for color system
  ==================================================== */
  --accent-surface: light-dark(var(--primary-400), var(--primary-500));
  --accent-surface-light: light-dark(var(--primary-300), var(--primary-400));
  --accent-surface-dark: light-dark(var(--primary-500), var(--primary-600));
  --accent-foreground: light-dark(var(--primary-500), var(--primary-200));
  --primary-500-bg: oklch(from var(--primary-500) l c h / 0.1);

  --color-surface: light-dark(var(--slate-00), var(--slate-900));
  --color-text: light-dark(var(--text-light), var(--text-dark));

  --color-text-heading: light-dark(var(--text-light), var(--text-dark));
  --color-text-heading-before: var(--accent-foreground);
  --color-text--muted: light-dark(var(--slate-600), var(--slate-300));
  --color-text-muted: var(--color-text--muted);
  --color-text-placeholder: light-dark(var(--slate-500), var(--slate-400));
  --color-text-week: light-dark(var(--slate-400), var(--slate-500));
  --color-link: light-dark(var(--primary-600), var(--primary-400));
  --color-link-hover: light-dark(var(--primary-500), var(--primary-500));

  --color-text-success: light-dark(var(--success-600), var(--success-400));
  --color-text-warning: light-dark(var(--warning-600), var(--warning-400));
  --color-text-error: light-dark(var(--error-700), var(--error-300));
  --color-text-info: light-dark(var(--info-700), var(--info-300));

  --info-box-text--muted: light-dark(var(--text-light), var(--text-dark));

  /* Typography code & kbd colors */
  --color-code-bg: var(--slate-100);
  --color-code-text: var(--slate-800);
  --color-pre-bg: var(--slate-100);
  --color-pre-text: var(--slate-800);
  --color-kbd-bg: var(--slate-100);
  --color-kbd-border: var(--slate-300);
  --color-kbd-text: var(--slate-700);
  --color-highlight-bg: var(--yellow-100);
  --color-highlight-text: var(--yellow-900);
  --color-focus: var(--focus-ring-color);

  --gradient-blue-01: radial-gradient(
    circle,
    rgb(0, 125, 196) 0%,
    rgb(0, 3, 61) 100%
  );

  /* ====================================================
     # LAYOUT & GRID SYSTEM
     ====================================================
     Layout and grid system variables
  ==================================================== */
  --layout-content-max-width: min(100vw - 2rem, 1900px);
  --layout-content-padding: var(--spacing-base);
  --layout-narrow-max-width: 992px;
  --layout-max-width: var(--layout-content-max-width);
  --layout-content-size: calc(
    (var(--layout-content-max-width) - var(--layout-narrow-max-width)) / 2
  );

  --layout-section-flow: var(--spacing-base);
  --layout-header-height: calc(var(--spacing-xl) + var(--spacing-xs));
  --layout-blockquote-max-width: 80ch;
  --max-width: var(--layout-blockquote-max-width);
  --layout-grid-gutter: var(--spacing-l);

  --layout-padding-column: minmax(var(--spacing-base), 1fr);
  --layout-padding-inline: var(--spacing-base);
  --layout-padding-component: var(--spacing-base);

  --layout-main-padding-block: var(--spacing-m);
  --layout-main-margin-block: var(--spacing-base);

  --layout-margin-block-small: var(--spacing-s);
  --layout-margin-block-medium: var(--spacing-m);
  --layout-margin-block-large: var(--spacing-l);
  --layout-margin-heading-bottom: var(--spacing-m);
  --layout-app-padding: clamp(
    var(--spacing-base),
    0.5238rem + 2.381vw,
    var(--spacing-xl)
  );
  --layout-gap: var(--spacing-base);

  /* ====================================================
     # TRANSITIONS & ANIMATIONS
     ====================================================
     Animation system variables
  ==================================================== */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 250ms ease-in-out;
  --transition-smooth: 600ms ease-in-out;

  --animation-shake: shake var(--transition-normal);
  --animation-bounce: bounce var(--transition-normal);
  --animation-fade-in: fadeIn var(--transition-normal);
  --animation-fade-out: fadeOut var(--transition-normal);
  --animation-slide-up: slideUp var(--transition-normal);
  --animation-slide-down: slideDown var(--transition-normal);
  --animation-scale-in: scaleIn var(--transition-fast);
  --animation-pulse: pulse var(--transition-slow);

  --animation-loading-spin: spin 1s linear infinite;
  --animation-loading-pulse: pulse 2s ease-in-out infinite;

  --animation-input-focus: focusRing var(--transition-fast);
  --animation-validation-appear: slideUp var(--transition-fast);
  --animation-error-shake: shake var(--transition-fast);
  --animation-success-bounce: bounce var(--transition-normal);
}

@supports (color: color(display-p3 0 0 0%)) {
:root {

  --gradient-blue-01: radial-gradient(
    circle,
    rgb(0, 125, 196) 0%,
    rgb(0, 3, 61) 100%
  );
}

@media (color-gamut: p3) {
:root {

  --gradient-blue-01: radial-gradient(
    circle,
    color(display-p3 0.18945 0.48393 0.7598) 0%,
    color(display-p3 0.0017 0.01045 0.22979) 100%
  );
}
}
}

@media (prefers-reduced-motion: reduce) {

:root {
    --animation-shake: none;
    --animation-bounce: none;
    --animation-fade-in: none;
    --animation-fade-out: none;
    --animation-slide-up: none;
    --animation-slide-down: none;
    --animation-scale-in: none;
    --animation-pulse: none;
    --animation-loading-spin: none;
    --animation-loading-pulse: none;
    --animation-error-shake: none;
    --animation-success-bounce: none;
}
  }

:root {

  /* ====================================================
     # BORDERS & SHADOWS
     ====================================================
     Visual effects and shadow system
  ==================================================== */
  --border-color: light-dark(var(--slate-200), var(--slate-700));
  --border-none: 0px dotted var(--border-color);
  --border-default: 1px dotted var(--border-color);
  --border-radius-none: 0;
  --border-radius-extra-small: var(--spacing-xxs);
  --border-radius-small: var(--spacing-xxs);
  --border-radius-medium: var(--spacing-xs);
  --border-radius-large: var(--spacing-s);
  --border-radius-circular: 50%;

  --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.15);
  --shadow-large: 0 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-extra-large: 0 8px 16px rgba(0, 0, 0, 0.25);

  --stroke-width-base: 1;

  /* ====================================================
     # Z-INDEX SYSTEM
     ====================================================
     Z-index stacking context system
  ==================================================== */
  --z-index-base: 0;
  --z-index-header: 10;
  --z-index-search: 9;
  --z-index-dropdown: 11;
  --z-index-tooltip: 10;
  --z-index-modal: 12;
  --z-index-toast: 15;

  /* ====================================================
     # COMPONENTS - CARDS
     ====================================================
     Card component styling variables
  ==================================================== */
  --card-background: light-dark(
    oklch(from var(--slate-50) l c h / 0.3),
    oklch(from var(--slate-800) l c h / 0.6)
  );
  --card-border: 4px solid var(--primary-500);
  --card-header-background: light-dark(
    oklch(from var(--slate-50) l c h / 0.8),
    oklch(from var(--slate-850) l c h / 0.8)
  );
  --card-footer-background: light-dark(
    oklch(from var(--slate-100) l c h / 0.7),
    oklch(from var(--slate-900) l c h / 0.7)
  );
  --card-text-color: light-dark(var(--text-light), var(--text-dark));
  --card-hover-background: light-dark(
    oklch(from var(--slate-200) l c h / 0.8),
    oklch(from var(--slate-700) l c h / 0.8)
  );
  --card-padding: var(--spacing-s);
  --card-header-padding: var(--spacing-base);
  --card-footer-padding: var(--spacing-base);
  --card-shadow: var(--shadow-medium);
  --card-hover-shadow: var(--shadow-extra-large);
  --card-shadow-hover: var(--card-hover-shadow);

  --cards-gutter: var(--spacing-l);
  --card-margin-block: var(--spacing-m);

  /* ====================================================
     # COMPONENTS - TABLES
     ====================================================
     Table component styling variables
  ==================================================== */
  --table-header-bg: light-dark(var(--slate-100), var(--slate-800));
  --table-header-text: light-dark(var(--text-light), var(--text-dark));
  --table-hover-bg: light-dark(var(--slate-200), var(--slate-800));
  --table-hover-muted-color: light-dark(var(--slate-600), var(--slate-300));
  --table-hover-color: light-dark(var(--text-light), var(--text-dark));
  --table-hover-icon-color: light-dark(var(--primary-500), var(--primary-400));
  --table-padding: var(--spacing-s) var(--spacing-m);
  --table-padding-mobile: var(--spacing-xs) var(--spacing-s) 0 var(--spacing-s);
  --table-border: 1px solid light-dark(var(--slate-200), var(--slate-700));
  --table-border-color: light-dark(var(--slate-200), var(--slate-700));
  --table-even-row-bg: light-dark(
    oklch(from var(--slate-100) l c h / 0.3),
    oklch(from var(--slate-800) l c h / 0.6)
  );
  --table-header-border: light-dark(var(--slate-500), var(--slate-500));
  --table-font-size: var(--font-size-2);
  --table-mobile-label-color: light-dark(var(--slate-700), var(--slate-400));
  --table-icon-size: 1.5em;

  /* ====================================================
     # COMPONENTS - NAVIGATION
     ====================================================
     Navigation component styling variables
  ==================================================== */
  --navbar-background: light-dark(var(--slate-50), var(--slate-900));
  --navbar-header-height: calc(var(--spacing-xxl) * 1.35);
  --navbar-font-size: var(--font-size-2);
  --navbar-text: light-dark(var(--text-light), var(--text-dark));
  --navbar-link-color: light-dark(var(--text-light), var(--text-dark));
  --navbar-content-color: light-dark(var(--text-light), var(--text-dark));
  --navbar-link-hover-color: light-dark(var(--primary-500), var(--slate-300));
  --navbar-toggle-icon-size: var(--spacing-l);
  --navbar-submenu-background: light-dark(var(--slate-50), var(--slate-900));
  --navbar-submenu-text-color: light-dark(var(--text-light), var(--text-dark));
  --navbar-submenu-hover-color: light-dark(var(--slate-500), var(--slate-100));
  --navbar-submenu-border-radius: 0;

  /* ====================================================
     # COMPONENTS - PAGINATION
     ====================================================
     Pagination component styling variables
  ==================================================== */
  --pagination-spacing-xs: var(--spacing-xs);
  --pagination-spacing-s: var(--spacing-s);
  --pagination-spacing-m: var(--spacing-base);
  --pagination-font-size: var(--font-size-2);
  --pagination-item-size: var(--spacing-l);
  --pagination-transition: 0.4s ease-in-out;
  --pagination-color-text: light-dark(var(--text-light), var(--text-dark));
  --pagination-color-text--muted: light-dark(
    var(--text-light),
    var(--text-dark)
  );
  --pagination-color-link: light-dark(var(--slate-600), var(--slate-400));
  --pagination-color-link-hover: light-dark(var(--slate-600), var(--slate-300));
  --pagination-color-surface: light-dark(var(--slate-50), var(--slate-800));
  --pagination-color-hover-surface: light-dark(
    var(--slate-200),
    var(--slate-700)
  );
  --pagination-color-active: light-dark(var(--slate-700), var(--slate-400));
  --pagination-color-active-text: light-dark(var(--slate-50), var(--slate-800));
  --pagination-color-disabled: transparent;

  /* ====================================================
     # COMPONENTS - TOASTS & BLOCKS
     ====================================================
     Toast and block component styling variables
  ==================================================== */
  --toast-min-width: 250px;
  --alert-min-width: var(--toast-min-width);
  --blockquote-background: light-dark(var(--slate-200), var(--slate-700));

  /* ====================================================
     # COMPONENTS - STEPS
     ====================================================
     Step component styling variables
  ==================================================== */
  --step-background: light-dark(var(--slate-200), var(--slate-800));
  --step-background-muted: light-dark(var(--slate-400), var(--slate-600));
  --step-foreground: light-dark(var(--slate-600), var(--slate-400));
  --step-foreground-light: light-dark(var(--slate-400), var(--slate-600));
  --step-text--muted: light-dark(var(--slate-600), var(--slate-400));

  /* ====================================================
     # COMPONENTS - MODALS
     ====================================================
     Modal component styling variables
  ==================================================== */
  --modal-background: light-dark(var(--slate-50), var(--slate-900));
  --modal-text-color: light-dark(var(--text-light), var(--text-dark));
  --modal-header-border: var(--border-default);
  --modal-overlay-background: rgba(0, 0, 0, 0.5);
  --modal-shadow: var(--shadow-extra-large);
  --modal-border-radius: var(--border-radius-extra-small);
  --modal-padding: var(--spacing-l);
  --modal-close-color: light-dark(var(--text-light), var(--text-dark));
  --modal-close-hover-color: var(--accent-foreground);
  --modal-title-color: light-dark(var(--text-light), var(--text-dark));

  /* ====================================================
     # COMPONENTS - FORMS
     ====================================================
     Form component styling variables
  ==================================================== */
  --form-grid-gap: 1.5rem;
  --form-meta-spacing: 1rem;
  --form-border-color: light-dark(var(--slate-200), var(--slate-700));
  --form-title-size: var(--font-size-4);
  --form-desc-size: var(--font-size-2);

  /* Form input specific variables - moved from _form.pcss */
  --input-radius: 0.375rem;
  --input-border-width: 1px;

  /* Enhanced validation state colors with comprehensive fallbacks */
  --state-error: var(--error-500, #ef4444);
  --state-success: var(--success-500, #10b981);
  --state-warning: var(--warning-500, #f59e0b);
  --state-info: var(--info-500, #3b82f6);

  /* Validation border colors */
  --validation-error: var(--error-500, #ef4444);
  --validation-success: var(--success-500, #10b981);
  --validation-warning: var(--warning-500, #f59e0b);
  --validation-info: var(--info-500, #3b82f6);

  /* Focus ring colors with fallbacks */
  --focus-ring-color: var(--primary-500, #0d9488);
  --focus-ring-color-light: rgba(20, 184, 166, 0.2);
  --focus-ring-color-dark: rgba(13, 148, 136, 0.2);
  --focus-color: var(--focus-ring-color);
  --focus-color-rgb: 13, 148, 136;

  /* Enhanced validation icon SVGs (Base64 encoded for performance) */
  --validation-icon-error: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3e%3cpath d='M12 9v4'/%3e%3ccircle cx='12' cy='17' r='1'/%3e%3c/svg%3e");
  --validation-icon-success: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 6 9 17l-5-5'/%3e%3c/svg%3e");
  --validation-icon-warning: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3e%3cline x1='12' x2='12' y1='9' y2='13'/%3e%3ccircle cx='12' cy='17' r='1'/%3e%3c/svg%3e");
  --validation-icon-info: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cpath d='M12 16v-4'/%3e%3cpath d='M12 8h.01'/%3e%3c/svg%3e");

  /* Animation variables for forms */
  --animation-loading-spin: spin 1s linear infinite;
  --animation-error-shake: shake 0.5s ease-in-out;
  --animation-success-bounce: bounce 0.6s ease;

  /* ====================================================
     # COMPONENTS - BUTTONS
     ====================================================
     Button component styling variables
  ==================================================== */
  --button-color-background: light-dark(var(--slate-200), var(--slate-700));
  --button-color-background-hover: light-dark(
    var(--slate-300),
    var(--slate-800)
  );
  --button-color-text: light-dark(var(--slate-700), var(--slate-200));
  --button-font-size: var(--font-size-2);
  --button-padding: var(--spacing-s) var(--spacing-s);
  --button-padding-small: var(--spacing-m) var(--spacing-l);
  --button-height: var(--spacing-xxl);
  --button-height-small: 1.75rem;
  --button-height-large: 3rem;
  --button-font-size-small: 0.625rem;
  --button-font-size-large: 1.125rem;
  --button-padding-x: var(--spacing-s);
  --button-padding-y: var(--spacing-xs);
  --button-padding-x-small: var(--spacing-xs);
  --button-padding-x-large: 1.5rem;
  --button-icon-gap: 0.5rem;
  --button-transition: all 0.4s ease-in-out;

  /* ====================================================
     # COMPONENTS - ICONS
     ====================================================
     Icon component styling variables
  ==================================================== */
  --icon-color: light-dark(var(--primary-500), var(--primary-400));
  --icon-color-hover: light-dark(var(--primary-400), var(--primary-500));

  /* ====================================================
   # COMPONENTS - ACCORDION
   ====================================================
   Accordion component styling variables
 ==================================================== */
  --accordion-border-radius: var(--border-radius-medium);
  --accordion-header-padding: var(--spacing-base);
  --accordion-content-padding: var(--spacing-base);
  --accordion-icon-size: var(--spacing-l);
  --accordion-transition: var(--transition-slow);

  /* ====================================================
   # COMPONENTS - CALENDAR
   ====================================================
   Calendar component styling variables
 ==================================================== */
  /* --calendar-background: light-dark(var(--slate-50), var(--slate-900));
--calendar-text: light-dark(var(--slate-900), var(--slate-100));
--calendar-header-margin: var(--spacing-base);
--calendar-header-gap: var(--spacing-xs);
--calendar-title-size: var(--font-size-6);
--calendar-grid-gap: var(--spacing-xs);
--calendar-day-padding: var(--spacing-xs);
--calendar-min-day-height: 100px;
--calendar-border: 1px solid var(--border-color);
--calendar-today-background: light-dark(var(--primary-100), var(--primary-800));
--calendar-other-month-text: light-dark(var(--slate-400), var(--slate-500));
--calendar-other-month-background: light-dark(var(--slate-100), var(--slate-800));
--calendar-nav-padding: var(--spacing-s) var(--spacing-base);
--calendar-nav-font-size: var(--font-size-2);
--calendar-event-gap: var(--spacing-xxs);
--calendar-event-font-size: var(--font-size-1);
--calendar-event-padding: var(--spacing-xxs) var(--spacing-xs);
--calendar-event-border-radius: var(--border-radius-extra-small);
--calendar-event-requested-color: var(--info-500);
--calendar-event-pending-color: var(--warning-500);
--calendar-event-approved-color: var(--success-500);
--calendar-event-rejected-color: var(--error-500); */
  /* Reusing your existing color system */
  --calendar-background: var(--color-surface);
  --calendar-text: var(--color-text);
  --calendar-border: var(--border-default);
  --calendar-border-accent: 4px solid
    light-dark(var(--primary-500), var(--primary-600));
  --calendar-today-background: light-dark(var(--slate-200), var(--slate-800));
  --calendar-other-month-background: light-dark(
    var(--slate-100),
    var(--slate-800)
  );
  --calendar-other-month-text: var(--color-text-week);

  /* Calendar specific measurements */
  --calendar-min-day-height: 100px;
  --calendar-day-padding: var(--spacing-base);
  --calendar-grid-gap: var(--spacing-xxs);
  --calendar-event-border-radius: var(--border-radius-extra-small);

  /* Calendar header */
  --calendar-header-margin: var(--spacing-base);
  --calendar-header-gap: var(--spacing-base);
  --calendar-title-size: var(--font-size-6);

  /* Calendar events */
  --calendar-event-padding: var(--spacing-xxs) var(--spacing-xs);
  --calendar-event-font-size: var(--font-size-1);
  --calendar-event-gap: var(--spacing-xxs);

  /* Event status colors */
  --calendar-event-requested-color: var(--info-600);
  --calendar-event-pending-color: var(--warning-600);
  --calendar-event-approved-color: var(--success-600);
  --calendar-event-rejected-color: var(--error-600);

  /* Navigation */
  --calendar-nav-padding: var(--spacing-xs) var(--spacing-base);
  --calendar-nav-font-size: var(--font-size-2);
  /* ====================================================
     # COMPONENTS - TOAST
     ====================================================
     Toast component styling variables
  ==================================================== */
  --toast-border-radius: var(--border-radius-medium);
  --toast-padding: var(--spacing-base);
  --toast-icon-size: var(--spacing-l);
  --toast-close-button-size: var(--spacing-l);

  --toast-success-bg: light-dark(
    oklch(from var(--success-500) l c h / 0.14),
    oklch(from var(--success-500) l c h / 0.22)
  );
  --toast-success-text: light-dark(var(--success-800), var(--success-200));
  --toast-success-border: light-dark(var(--success-600), var(--success-400));

  --toast-info-bg: light-dark(
    oklch(from var(--info-500) l c h / 0.14),
    oklch(from var(--info-500) l c h / 0.22)
  );
  --toast-info-text: light-dark(var(--info-800), var(--info-200));
  --toast-info-border: light-dark(var(--info-600), var(--info-400));

  --toast-warning-bg: light-dark(
    oklch(from var(--warning-500) l c h / 0.16),
    oklch(from var(--warning-500) l c h / 0.25)
  );
  --toast-warning-text: light-dark(var(--warning-800), var(--warning-200));
  --toast-warning-border: light-dark(var(--warning-600), var(--warning-400));

  --toast-error-bg: light-dark(
    oklch(from var(--error-500) l c h / 0.14),
    oklch(from var(--error-500) l c h / 0.22)
  );
  --toast-error-text: light-dark(var(--error-800), var(--error-200));
  --toast-error-border: light-dark(var(--error-600), var(--error-400));

  --alert-border-radius: var(--toast-border-radius);
  --alert-padding: var(--toast-padding);
  --alert-icon-size: var(--toast-icon-size);
  --alert-close-button-size: var(--toast-close-button-size);

  /* ====================================================
     # INPUT SYSTEM
     ====================================================
     Complete input system variables
  ==================================================== */
  --input-label-color: light-dark(var(--text-light), var(--text-dark));
  --input-min-width: 10rem;
  --input-surface: light-dark(var(--slate-100), var(--slate-800));
  --input-border-color: light-dark(var(--slate-100), var(--slate-900));
  --input-textarea-height: 4ch;
  --input-radio-checkbox-size: var(--spacing-s);
  --input-background: light-dark(
    oklch(from var(--neutral-100) l c h / 0.3),
    oklch(from var(--neutral-800) l c h / 0.6)
  );
  --input-height: 3rem;
  --input-height-small: 2.75rem;
  --input-padding: var(--spacing-xs) var(--spacing-xs);
  --input-padding-x: 0.75rem;
  --input-padding-y: 0.5rem;
  --input-font-size: var(--font-size-2);
  --input-font-size-small: var(--font-size-1);
  --input-border: 1px solid var(--input-border-color);
  --input-border-radius: var(--border-radius-extra-small);
  --input-transition: all 0.3s ease-in-out;
  --input-checkbox-size: 1.5rem;
  --input-radio-size: 1.5rem;
  --input-icon-size: 1.25rem;
  --input-gap: 0.5rem;
  --input-height-default: var(--spacing-xxl);
  --input-margin-block: var(--spacing-base);

  /* ====================================================
     # VALIDATION SYSTEM - IMPROVED
     ====================================================
     Enhanced validation state system with accessibility
  ==================================================== */
  /* Core validation colors with improved contrast */ /* Contraste 4.5:1 */ /* Contraste 4.5:1 */ /* Contraste 4.5:1 */ /* Contraste 4.5:1 */

  /* Background colors with better accessibility */
  --validation-success-bg: light-dark(
    oklch(from var(--success-100) l c h / 0.5),
    oklch(from var(--success-900) l c h / 0.5)
  );
  --validation-error-bg: light-dark(
    oklch(from var(--error-100) l c h / 0.5),
    oklch(from var(--error-900) l c h / 0.5)
  );
  --validation-warning-bg: light-dark(
    oklch(from var(--warning-100) l c h / 0.5),
    oklch(from var(--warning-900) l c h / 0.5)
  );
  --validation-info-bg: light-dark(
    oklch(from var(--info-100) l c h / 0.5),
    oklch(from var(--info-900) l c h / 0.5)
  );

  /* Enhanced validation tokens */
  --validation-icon-size: 1.125rem;
  --validation-message-gap: 0.375rem;
  --validation-border-width: 2px;
  --validation-shadow-intensity: 0.2;
  --validation-loading-size: 1rem;

  /* Field state management with CSS variables */
  --field-state: default;
  --field-validation-type: none;
}

@supports (color: oklab(0% 0 0%)) {
:root {
  --validation-success: oklch(0.55 0.15 150);
  --validation-error: oklch(0.55 0.18 25);
  --validation-warning: rgb(148, 105, 0);
  --validation-info: rgb(0, 126, 154);
}

@media (color-gamut: rec2020) {
:root {
  --validation-warning: oklch(0.55 0.16 80);
  --validation-info: oklch(0.55 0.14 220);
}
}
}

/* ====================================================
   # KEYFRAMES ANIMATIONS
   ====================================================
   CSS Keyframe animations for interactive elements
==================================================== */

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-3px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(3px);
  }
}

@keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    transform: translate3d(0, -8px, 0);
  }
  70% {
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes focusRing {
  from {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  to {
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1);
  }
}

/* TOOLS */

/* ===================================
   BUTTON MIXINS
   =================================== */

/* Button sizing mixin with parameter */

/* Button status mixin with parameter */

/* Button outline mixin with parameter */

/* Special case for normal outline */

/* ===================================
   FORM MIXINS
   =================================== */

/* ===================================
   CARD MIXINS
   =================================== */

/* Separate mixins for each border position instead of conditional logic */

/* ===================================
   STATE MIXINS
   =================================== */

/* ===================================
   ANIMATION MIXINS
   =================================== */

/* Keyframes */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ===================================
   LAYOUT MIXINS - POSTCSS COMPATIBLE
   =================================== */

/* Simplified aspect ratio mixins without conditional logic */

/* Separate breakpoints instead of loop */

@media (max-width: 1024px) {
  .sidebar-layout {
    grid-template-columns: 1fr;
  }
}

/* ===================================
   ACCESSIBILITY MIXINS
   =================================== */

/* ===================================
   UTILITY MIXINS
   =================================== */

/* GENERIC */

/* Reset CSS - Modern, accessible, and performant reset */

/* Global reset with box-sizing */

*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box;
  margin: 0;
  border: 0 solid;
  padding: 0;
  caret-color: var(--color-text);
}

/* Selection styling */

::-moz-selection {
  background-color: var(--accent-foreground);
  color: var(--accent-surface);
}

::selection {
  background-color: var(--accent-foreground);
  color: var(--accent-surface);
}

/* Focus styles for accessibility */

:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

/* Remove default button and input styling */

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* HTML and host element base styles */

html,
:host {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background-color: var(--background);
  color: var(--foreground);
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  font-family:
    system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  interpolate-size: allow-keywords;
}

@media (prefers-reduced-motion: no-preference) {

html,
:host {
    scroll-behavior: smooth;
}
  }

/* Body base styles */

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  line-height: 1.5;
  font-size: 1rem;
}

/* Form elements base styles */

button,
input,
label,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  line-height: 1.1;
}

/* Typography reset */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  margin-bottom: 0;
}

figure,
blockquote,
dl,
dd {
  margin-bottom: 0;
}

p {
  margin: 0;
  padding: 0;
}

/* Text wrapping */

p,
li,
figcaption {
  text-wrap: pretty;
}

/* Link styling */

a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  -webkit-text-decoration: none;
  text-decoration: none;
  color: currentColor;
}

/* Tabular numbers for data elements */

td,
math,
time,
[datetime],
[data-time],
[data-date],
time[datetime*=":"] {
  font-feature-settings: tabular-nums lining-nums;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Target scroll behavior */

:target {
  scroll-margin-block: 48px;
  scroll-margin-block: 6rlh;
}

/* Media query for reduced motion */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Media elements */

img,
picture {
  max-width: 100%;
  display: block;
  height: auto;
}

/* First-child reset */

:first-child {
  margin-top: 0;
}

/* Textarea default sizing */

textarea:not([rows]) {
  min-height: 10em;
  resize: vertical;
}

/* Remove default button styling */

button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Remove default input styling */

input {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

/* Remove default textarea styling */

textarea {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  resize: vertical;
}

/* Remove default select styling */

select {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

/* Remove default label styling */

label {
  cursor: pointer;
}

/* ===================================
   POSTCSS DESIGN SYSTEM FRAMEWORK - BASE STYLES
   ===================================
   This file provides the foundational styles for the PostCSS design system.
   It includes:
   - CSS custom properties for color scheme (light/dark mode support)
   - Global HTML element resets
   - Link styling and hover states
   - Focus visible indicators for accessibility
   - Keyframe animations for enhanced UX
   - Reduced motion support for accessibility
   =================================== */

:root {
  color-scheme: light dark;
}

html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
  font-family: var(--font-family);
  font-size: 1rem;
  font-size: var(--font-size-base);
  margin: 0;
  padding: 0;
}

body {
  margin: auto;
}

a,
a:link,
a:visited,
a:active,
a:focus {
  color: var(--color-link);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  -webkit-text-decoration: none;
  text-decoration: none;
}

a:hover:not(.btn):not(.btn--small):not(.menu-item > a) {
  color: var(--color-link-hover);
}

address {
  font-style: normal;
  margin: 1rem 0;
}

b,
strong {
  font-weight: 600;
  font-weight: var(--font-weight-bold);
}

small {
  font-size: 0.75em;
}

[hidden],
template {
  display: none;
}

hr {
  border: 0;
  border-top: 1px solid var(--border-color);
  height: 0;
  margin: 2rem auto;
  width: min(50%, 15rem);
}

mark {
  background-color: var(--color-highlight-bg, var(--yellow-200));
  border-left: 4px solid var(--color-highlight-bg, var(--yellow-200));
  border-right: 4px solid var(--color-highlight-bg, var(--yellow-200));
  color: var(--color-highlight-text, var(--slate-900));
}

svg {
  border: 0;
  overflow: hidden;
}

.sr-only,
.visuallyhidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  width: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: normal;
}

.hidden {
  display: none !important;
}

/* ===================================
   ANIMATION KEYFRAMES
   CSS animations for enhanced user experience
   =================================== */

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-4px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(4px);
  }
}

@keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -8px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

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

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

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes focusRing {
  0% {
    box-shadow: 0 0 0 0
      light-dark(
        oklch(from var(--primary-500) l c h / 0.4),
        oklch(from var(--primary-400) l c h / 0.4)
      );
  }
  70% {
    box-shadow: 0 0 0 4px
      light-dark(
        oklch(from var(--primary-500) l c h / 0),
        oklch(from var(--primary-400) l c h / 0)
      );
  }
  100% {
    box-shadow: 0 0 0 0
      light-dark(
        oklch(from var(--primary-500) l c h / 0),
        oklch(from var(--primary-400) l c h / 0)
      );
  }
}

/* ===================================
   REDUCED MOTION SUPPORT
   Accessibility for users who prefer reduced motion
   =================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Typography Base Styles - Modern, accessible, and responsive typography */

/* Headings - Base styles */

h1, h2, h3, h4, h5, h6 {
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
	font-family: var(--font-family);
	font-weight: 600;
	font-weight: var(--font-weight-bold);
	color: var(--color-text-heading);
	text-wrap: balance;
	word-break: break-word;
	margin: 0;
	padding: 0;
	/* line-height: 1.2; */
	hyphens: auto;
}

/* Heading 1 - Display/Primary */

h1 {
	font-size: 1.875rem;
	font-size: var(--font-size-7);
	line-height: 3rem;
	line-height: var(--line-height-9);
	margin-bottom: 1.5rem;
	margin-bottom: var(--spacing-l);
}

/* Heading 2 - Section/Secondary */

h2 {
	font-size: 1.5rem;
	font-size: var(--font-size-6);
	line-height: 2.75rem;
	line-height: var(--line-height-8);
	margin-bottom: 0.875rem;
	margin-bottom: var(--spacing-m);
	position: relative;
}

/* Heading 3 - Tertiary */

h3 {
	font-size: 1.25rem;
	font-size: var(--font-size-5);
	line-height: 2.5rem;
	line-height: var(--line-height-7);
	margin-bottom: 0.875rem;
	margin-bottom: var(--spacing-m);
}

/* Heading 4 - Quaternary */

h4 {
	font-size: 1.125rem;
	font-size: var(--font-size-4);
	line-height: 2.25rem;
	line-height: var(--line-height-6);
	margin-bottom: 0.75rem;
	margin-bottom: var(--spacing-s);
}

/* Heading 5 - Quinary */

h5 {
	font-size: 1rem;
	font-size: var(--font-size-3);
	line-height: 2rem;
	line-height: var(--line-height-5);
	font-weight: 600;
	font-weight: var(--font-weight-bold);
	margin-bottom: 0.75rem;
	margin-bottom: var(--spacing-s);
}

/* Heading 6 - Senary */

h6 {
	font-size: 0.875rem;
	font-size: var(--font-size-2);
	line-height: 1.75rem;
	line-height: var(--line-height-4);
	margin-bottom: 0.5rem;
	margin-bottom: var(--spacing-xs);
}

/* Paragraphs - Base styles */

p {
	font-size: 1rem;
	line-height: 1.5rem;
	line-height: var(--line-height-3);
	/* margin: 0 0 var(--spacing-base) 0; */
	max-width: 80ch;
	max-width: var(--max-width);
	text-align: left;
}

/* Placeholder text styling */

::-moz-placeholder {
	font-size: 0.875rem;
	font-size: var(--font-size-2);
	font-style: italic;
	color: var(--color-text-placeholder);
	opacity: 1;
	-moz-transition: opacity 250ms ease-in-out;
	transition: opacity 250ms ease-in-out;
	-moz-transition: opacity var(--transition-normal);
	transition: opacity var(--transition-normal);
}

::placeholder {
	font-size: 0.875rem;
	font-size: var(--font-size-2);
	font-style: italic;
	color: var(--color-text-placeholder);
	opacity: 1;
	transition: opacity 250ms ease-in-out;
	transition: opacity var(--transition-normal);
}

/* Focus state for placeholders */

input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
	opacity: 0.5;
}

input:focus::placeholder,
textarea:focus::placeholder {
	opacity: 0.5;
}

/* Text elements - Base styles */

a {
	color: var(--color-link);
	-webkit-text-decoration: none;
	text-decoration: none;
	transition: color 250ms ease-in-out;
	transition: color var(--transition-normal);
}

a:hover,
a:focus {
	color: var(--color-link-hover);
	-webkit-text-decoration: underline;
	text-decoration: underline;
}

a:focus {
	outline: 2px solid #0d9488;
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

/* Strong and emphasis */

strong,
b {
	font-weight: 600;
	font-weight: var(--font-weight-bold);
}

em,
i {
	font-style: italic;
}

/* Small text */

small {
	font-size: 0.875rem;
	font-size: var(--font-size-0);
	line-height: 1.5rem;
	line-height: var(--line-height-3);
}

/* Mark/highlight text */

mark {
	background-color: var(--color-highlight-bg);
	color: var(--color-highlight-text);
	padding: 0 0.25rem;
	padding: 0 var(--spacing-xxs);
	border-radius: 0.25rem;
	border-radius: var(--border-radius-small);
}

/* Code elements */

code,
kbd,
samp,
pre {
	font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
	font-family: var(--font-family-mono);
	font-size: 0.875rem;
	font-size: var(--font-size-0);
	line-height: 1.5rem;
	line-height: var(--line-height-3);
}

code {
	background-color: var(--color-code-bg);
	color: var(--color-code-text);
	padding: 0.25rem 0.5rem;
	padding: var(--spacing-xxs) var(--spacing-xs);
	border-radius: 0.25rem;
	border-radius: var(--border-radius-small);
}

kbd {
	background-color: var(--color-kbd-bg);
	color: var(--color-kbd-text);
	padding: 0.25rem 0.5rem;
	padding: var(--spacing-xxs) var(--spacing-xs);
	border-radius: 0.25rem;
	border-radius: var(--border-radius-small);
	border: 1px solid var(--color-kbd-border);
}

pre {
	background-color: var(--color-pre-bg);
	color: var(--color-pre-text);
	padding: 1rem;
	padding: var(--spacing-base);
	border-radius: 0.5rem;
	border-radius: var(--border-radius-medium);
	overflow-x: auto;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/* Blockquote */

blockquote {
	border-left: 4px solid var(--border-color);
	padding-left: 1rem;
	padding-left: var(--spacing-base);
	margin: 1rem 0;
	margin: var(--spacing-base) 0;
	font-style: italic;
	color: var(--color-text--muted);
}

/* Horizontal rule */

hr {
	border: none;
	border-top: 1px solid var(--border-color);
	margin: 2rem 0;
	margin: var(--spacing-xl) 0;
}

/* Lists */

ul,
ol {
	margin: 0 0 1rem 0;
	margin: 0 0 var(--spacing-base) 0;
	padding-left: 1.5rem;
	padding-left: var(--spacing-l);
}

li {
	margin-bottom: 0.5rem;
	margin-bottom: var(--spacing-xs);
}

/* Definition lists */

dl {
	margin: 0 0 1rem 0;
	margin: 0 0 var(--spacing-base) 0;
}

dt {
	font-weight: 600;
	font-weight: var(--font-weight-bold);
	margin-bottom: 0.5rem;
	margin-bottom: var(--spacing-xs);
}

dd {
	margin: 0 0 1rem 0;
	margin: 0 0 var(--spacing-base) 0;
	padding-left: 1rem;
	padding-left: var(--spacing-base);
}

/* Figure and figcaption */

figure {
	margin: 0 0 1rem 0;
	margin: 0 0 var(--spacing-base) 0;
}

figcaption {
	font-size: 0.875rem;
	font-size: var(--font-size-0);
	color: var(--color-text--muted);
	margin-top: 0.5rem;
	margin-top: var(--spacing-xs);
}

/* Responsive typography adjustments */

@media (max-width: 768px) {
	h1 {
		font-size: 1.5rem;
		font-size: var(--font-size-6);
		line-height: 2.75rem;
		line-height: var(--line-height-8);
	}
	
	h2 {
		font-size: 1.25rem;
		font-size: var(--font-size-5);
		line-height: 2.5rem;
		line-height: var(--line-height-7);
	}
	
	h3 {
		font-size: 1.125rem;
		font-size: var(--font-size-4);
		line-height: 2.25rem;
		line-height: var(--line-height-6);
	}
}

/* Reduced motion preference */

@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* LAYOUT */

body {
	display: grid;
	grid-template-rows: auto 1fr auto;
}

@supports (padding: max(0px)) {
	body {
		padding-left: max(0px, env(safe-area-inset-left));
		padding-right: max(0px, env(safe-area-inset-right));
	}
}

main {
	margin-top: 1rem;
	margin-bottom: 1rem;
	margin-top: var(--layout-main-margin-block);
	margin-bottom: var(--layout-main-margin-block);
	display: grid;
	grid-template-columns:
		[full-width-start] minmax(1rem, 1fr)
		[content-start] minmax(0, calc(
    (min(100vw - 2rem, 1900px) - 992px) / 2
  ))
		[narrow-start] min(100% - (1rem * 2), 992px)
		[narrow-end] minmax(0, calc(
    (min(100vw - 2rem, 1900px) - 992px) / 2
  ))
		[content-end] minmax(1rem, 1fr)
		[full-width-end];
	grid-template-columns:
		[full-width-start] var(--layout-padding-column)
		[content-start] minmax(0, var(--layout-content-size))
		[narrow-start] min(100% - (var(--layout-padding-inline) * 2), var(--layout-narrow-max-width))
		[narrow-end] minmax(0, var(--layout-content-size))
		[content-end] var(--layout-padding-column)
		[full-width-end];
		grid-auto-rows: max-content;
}

main > section, main > h1, main > h2 {
	margin-top: 1rem;
	margin-bottom: 1rem;
	margin-top: var(--layout-section-flow);
	margin-bottom: var(--layout-section-flow);
}

main > :not(.narrow):not(.full-width),
.full-width > :not(.narrow):not(.full-width) {
	grid-column: content;
}

main > .narrow {
	grid-column: narrow;
}

main > .full-width {
	grid-column: full-width;
}

/* main > section > * {
    margin-top: 1.5rem;
} */

/* 
section {
	display: grid;
	gap: .5rem;
} */

section > h1, section > h2, section > h3, section > h4, section > h5, section > h6 {
	padding-top: 0.875rem;
	padding-top: var(--layout-margin-heading-bottom);
}

section > * + * {
	margin-top: 1rem;
	margin-top: var(--layout-section-flow);
}

/* section form.form-grid {
	margin-block-start: calc(var(--layout-section-flow) * 3);
}
*/

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid red;
    padding: 1rem;
    padding: var(--layout-gap);
    /* width: fit-content;
    height: fit-content; */
}

/* ===================================
    UNIFIED GRID SYSTEM (BEM) - FOR FORMS
    =================================== */

/* Base grid - defaults to 12 columns (grid-basic) */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 1rem;
  grid-gap: var(--layout-gap);
  gap: 1rem;
  gap: var(--layout-gap);
}

/* Modifier for auto-fit grid (grid--auto) */

.grid--auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  padding: 0.75rem;
  padding: var(--pagination-spacing-s);
  grid-gap: 1rem;
  grid-gap: var(--layout-gap);
  gap: 1rem;
  gap: var(--layout-gap);
  /*  border-radius: var(--border-radius-none); */
  /* border: 1px solid var(--border-color); */

  /* & > *:not(:last-child) {
    border-right: 2px solid var(--border-color);
  } */
}

/* Responsive adjustments for auto grid */

@media (min-width: 769px) and (max-width: 1023px) {
  .grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  .grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  .grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

/* Generate shared column classes for all grid types (grid__col--xx and grid__col--sm--xx) */

@for $i from 1 to 12 {
  .grid__col--$(i) {
    grid-column: span $(i);
  }
}

/* Responsive column classes */

@media (max-width: 768px) {
  @for $i from 1 to 12 {
    .grid__col--sm-$(i) {
      grid-column: span $(i);
    }
  }
}

@media (min-width: 769px) {
  @for $i from 1 to 12 {
    .grid__col--md-$(i) {
      grid-column: span $(i);
    }
  }
}

/* ===================================
    FORM-SPECIFIC GRIDS (BEM)
    =================================== */

/* Form row system (form-row) - Maintains specified styles */

.form-row {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Label | Input sections */
  grid-gap: 1rem;
  grid-gap: var(--layout-gap);
  gap: 1rem;
  gap: var(--layout-gap);
  margin-bottom: 1rem;
  margin-bottom: var(--spacing-base);
  border-bottom: 1px dotted var(--border-color);
  padding-bottom: 1rem;
  padding-bottom: var(--spacing-base);
}

/* Responsive for form-row */

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr; /* Stack vertically */
  }
}

/* Form elements container within form-row - Uses shared classes */

.form-elements {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-gap: 1rem;
  grid-gap: var(--spacing-base);
  gap: 1rem;
  gap: var(--spacing-base);
}

/* Form meta styles */

.form-meta {
  padding-right: 1rem;
  padding-right: var(--spacing-base);
}

.form-meta__title {
  font-size: 0.875rem;
  font-size: var(--font-size-2);
  font-weight: 600;
  font-weight: var(--font-weight-bold);
  margin: 0;
  color: var(--color-text-heading);
}

.form-meta__description {
  font-size: 0.75rem;
  font-size: var(--font-size-1);
  font-style: italic;
  font-weight: 300;
  font-weight: var(--font-weight-light);
  margin: 0.5rem 0 0 0;
  margin: var(--spacing-xs) 0 0 0;
  color: var(--color-text--muted);
  padding-right: 1rem;
  padding-right: var(--spacing-base);
  line-height: 1.2;
}

@media (max-width: 768px) {
  .form-elements {
    /* grid-template-columns: 1fr; */ /* Single column */
    gap: 0.75rem;
    gap: var(--spacing-s);
  }
}

@media (min-width: 1536px) {
  .form-elements {
    grid-template-columns: repeat(8, 1fr); /* Full 8 columns */
    gap: 1.5rem;
    gap: var(--spacing-l);
  }
}

/* Form-inline system (form--inline) - Adaptive full-line forms */

.form--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  gap: var(--layout-gap);
  align-items: flex-end;
}

.form--inline .form-group {
  margin-bottom: 0;
  margin-right: 0.75rem;
  margin-right: var(--spacing-s);
}

.form--inline label {
  margin-bottom: 0;
  margin-right: 0.5rem;
  margin-right: var(--spacing-xs);
}

/* Responsive for form-inline */

@media (max-width: 768px) {
  .form--inline {
    flex-direction: column; /* Stack on mobile */
    align-items: stretch;
  }
}

/* ===================================
    COMPONENT GRIDS (BEM) - Simplified Variants
    =================================== */

/* Cards grid - Extends grid--auto */

.grid--cards {
  grid-template-columns: repeat(
    auto-fit,
    minmax(280px, 1fr)
  );
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--card-min-width, 280px), 1fr)
  );
  margin-top: 0.875rem;
  margin-bottom: 0.875rem;
  margin-top: var(--card-margin-block);
  margin-bottom: var(--card-margin-block);
}

/* Dashboard grid - Extends grid--auto */

.grid--dashboard {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}

/* Table filter grid - Extends grid--auto */

.grid--table-filters {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 2rem;
  margin-bottom: var(--spacing-xl);
}

/* ===================================
    UTILITY CLASSES (BEM)
    =================================== */

/* Bootstrap replacement utilities */

.text--muted {
  color: var(--color-text--muted);
}

.text-align--center {
  text-align: center;
}

.content-align--center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid item utilities */

.grid__item {
  position: relative;
}

.grid__item--padded {
  padding: 1rem;
  padding: var(--spacing-base);
}

.grid__item--bordered {
  border: var(--border-default);
   border-radius: 0;
   border-radius: var(--border-radius-none);
}

.grid__item--shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  box-shadow: var(--shadow-medium);
}

/* Responsive visibility */

.grid__item--hidden-mobile {
  display: none;
}

.grid__item--hidden-desktop {
  display: block;
}

@media (max-width: 768px) {
  .grid__item--hidden-mobile {
    display: block;
  }

  .grid__item--hidden-desktop {
    display: none;
  }
}

/* ===================================
    FORM VALIDATION INTEGRATION
    =================================== */

.form-grid__field--error {
  position: relative;
}

.form-grid__field--error .validation-message {
  grid-column: 1 / -1; /* Span full width */
  margin-top: 0.5rem;
  margin-top: var(--spacing-xs);
}

/* ===================================
    ACCESSIBILITY ENHANCEMENTS
    =================================== */

.grid[role="region"] {
  /* Enhanced focus management for screen readers */
}

.grid__col:focus-visible {
  outline: 2px solid #0d9488;
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
}

/* ===================================
    PERFORMANCE OPTIMIZATIONS
    =================================== */

/* Reduce repaints on grid items */

.grid__col,
.form-grid__field {
  contain: layout style;
}

/* Optimize for frequent layout changes */

.grid {
  contain: layout;
}

/* Base column classes */

.grid__col--1 { grid-column: span 1; }

.grid__col--2 { grid-column: span 2; }

.grid__col--3 { grid-column: span 3; }

.grid__col--4 { grid-column: span 4; }

.grid__col--5 { grid-column: span 5; }

.grid__col--6 { grid-column: span 6; }

.grid__col--7 { grid-column: span 7; }

.grid__col--8 { grid-column: span 8; }

.grid__col--9 { grid-column: span 9; }

.grid__col--10 { grid-column: span 10; }

.grid__col--11 { grid-column: span 11; }

.grid__col--12 { grid-column: span 12; }

/* Responsive column classes */

@media (max-width: 768px) {
  .grid__col--sm-1 { grid-column: span 1; }
  .grid__col--sm-2 { grid-column: span 2; }
  .grid__col--sm-3 { grid-column: span 3; }
  .grid__col--sm-4 { grid-column: span 4; }
  .grid__col--sm-5 { grid-column: span 5; }
  .grid__col--sm-6 { grid-column: span 6; }
  .grid__col--sm-7 { grid-column: span 7; }
  .grid__col--sm-8 { grid-column: span 8; }
  .grid__col--sm-9 { grid-column: span 9; }
  .grid__col--sm-10 { grid-column: span 10; }
  .grid__col--sm-11 { grid-column: span 11; }
  .grid__col--sm-12 { grid-column: span 12; }
}

@media (min-width: 769px) {
  .grid__col--md-1 { grid-column: span 1; }
  .grid__col--md-2 { grid-column: span 2; }
  .grid__col--md-3 { grid-column: span 3; }
  .grid__col--md-4 { grid-column: span 4; }
  .grid__col--md-5 { grid-column: span 5; }
  .grid__col--md-6 { grid-column: span 6; }
  .grid__col--md-7 { grid-column: span 7; }
  .grid__col--md-8 { grid-column: span 8; }
  .grid__col--md-9 { grid-column: span 9; }
  .grid__col--md-10 { grid-column: span 10; }
  .grid__col--md-11 { grid-column: span 11; }
  .grid__col--md-12 { grid-column: span 12; }
}

@media (min-width: 1024px) {
  .grid__col--lg-1 { grid-column: span 1; }
  .grid__col--lg-2 { grid-column: span 2; }
  .grid__col--lg-3 { grid-column: span 3; }
  .grid__col--lg-4 { grid-column: span 4; }
  .grid__col--lg-5 { grid-column: span 5; }
  .grid__col--lg-6 { grid-column: span 6; }
  .grid__col--lg-7 { grid-column: span 7; }
  .grid__col--lg-8 { grid-column: span 8; }
  .grid__col--lg-9 { grid-column: span 9; }
  .grid__col--lg-10 { grid-column: span 10; }
  .grid__col--lg-11 { grid-column: span 11; }
  .grid__col--lg-12 { grid-column: span 12; }
}

.page-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem;
	gap: var(--spacing-s);
	align-items: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
	margin-top: var(--layout-main-margin-block);
	margin-bottom: var(--spacing-xs);
	width: 100%;
	width: min(min(100vw - 2rem, 1900px), 100% - (clamp(
    1rem,
    0.5238rem + 2.381vw,
    2rem
  ) * 2));
	width: min(var(--layout-content-max-width), 100% - (var(--layout-app-padding) * 2));
}

.page-footer  > * {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		padding-top: var(--spacing-xs);
		padding-bottom: var(--spacing-xs);
	}

.page-footer > * {
	font-size: calc(0.75rem - 5%);
	font-size: calc(var(--font-size-1) - 5%);
	color: var(--color-text--muted);
}

.page-footer__copyright {
}

.page-footer__social-links {
	list-style: none;
	display: flex;
	gap: 0.875rem;
	gap: var(--spacing-m);
	flex-direction: row;
	align-items: center;
	line-height: 1;
}

.page-footer__social-links li a {
		-webkit-text-decoration: none;
		text-decoration: none;
	}

.page-footer__social-links .social-link {
		display: flex;
		font-weight: 400;
		font-weight: var(--font-weight-regular);
		color: var(--slate-400);
	}

.page-footer__social-links .social-link svg {
			width: 20px;
		}

#poweredBy {
	color: var(--slate-400);
}

#poweredBy  > a {
		color: var(--slate-400);
	}

/* COMPONENTS */

/* ===================================
   BUTTON SYSTEM V3.0 - SEMANTIC BUTTONS
   =================================== */

/* Reset button styles */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* ===================================
   BASE BUTTON - Default to primary status
   =================================== */

.btn,
a.btn,
button:not([class*="btn--"]),
input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn:not(does-not-exist):disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

a.btn:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

button:not([class*="btn--"]):disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

input[type="button"]:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

input[type="reset"]:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

input[type="submit"]:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn[disabled]:not(does-not-exist),a.btn[disabled],button[disabled]:not([class*="btn--"]),input[disabled][type="button"],input[disabled][type="reset"],input[disabled][type="submit"] {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn:not(does-not-exist):focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

a.btn:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

button:not([class*="btn--"]):focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

input[type="button"]:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

input[type="reset"]:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

input[type="submit"]:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn:not(does-not-exist) svg,a.btn svg,button:not([class*="btn--"]) svg,input[type="button"] svg,input[type="reset"] svg,input[type="submit"] svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn:not(does-not-exist) path,a.btn path,button:not([class*="btn--"]) path,input[type="button"] path,input[type="reset"] path,input[type="submit"] path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn,
a.btn,
button:not([class*="btn--"]),
input[type="button"],
input[type="reset"],
input[type="submit"] {
  background-color: transparent;
  color: var(--primary-500);
  border: 1px solid var(--primary-500);
}

.btn:not(does-not-exist):not(:disabled):hover {
    background-color: oklch(from var(--primary-500) l c h / 0.1);
  }

a.btn:not(:disabled):hover {
    background-color: oklch(from var(--primary-500) l c h / 0.1);
  }

button:not([class*="btn--"]):not(:disabled):hover {
    background-color: oklch(from var(--primary-500) l c h / 0.1);
  }

input[type="button"]:not(:disabled):hover {
    background-color: oklch(from var(--primary-500) l c h / 0.1);
  }

input[type="reset"]:not(:disabled):hover {
    background-color: oklch(from var(--primary-500) l c h / 0.1);
  }

input[type="submit"]:not(:disabled):hover {
    background-color: oklch(from var(--primary-500) l c h / 0.1);
  }

/* ===================================
   BUTTON SIZING
   =================================== */

.btn--small {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--small[disabled],.btn--small:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--small:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--small svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--small path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--small {
  background-color: transparent;
  color: var(--primary-500);
  border: 1px solid var(--primary-500);
}

.btn--small:not(:disabled):hover {
    background-color: oklch(from var(--primary-500) l c h / 0.1);
  }

.btn--small {
  --button-height: var(--button-height-small);
  --button-font-size: var(--button-font-size-small);
  --button-padding-x: var(--button-padding-x-small);
}

.btn--large {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--large[disabled],.btn--large:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--large:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--large svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--large path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--large {
  background-color: transparent;
  color: var(--primary-500);
  border: 1px solid var(--primary-500);
}

.btn--large:not(:disabled):hover {
    background-color: oklch(from var(--primary-500) l c h / 0.1);
  }

.btn--large {
  --button-height: var(--button-height-large);
  --button-font-size: var(--button-font-size-large);
  --button-padding-x: var(--button-padding-x-large);
}

/* ===================================
   BUTTON V3.0 - 4 SEMANTIC STATUSES
   =================================== */

/* Error Status - Destructive actions (DELETE, REMOVE, CANCEL PAYMENT) */

.btn--error {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--error[disabled],.btn--error:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--error:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--error svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--error path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--error {
  --_background: var(--error-500);
  --_hover-background: var(--error-600);
  --_border-color: var(--error-500);
  --_color: white;
  background-color: var(--_background) !important;
  color: white !important;
  color: var(--_color) !important;
  border-color: var(--_border-color) !important;
}

.btn--error:not(:disabled):hover {
    background-color: var(--_hover-background) !important;
    border-color: var(--_hover-background) !important;
  }

.btn--error-outline {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--error-outline[disabled],.btn--error-outline:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--error-outline:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--error-outline svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--error-outline path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--error-outline {
  background-color: transparent;
  color: var(--error-500);
  border: 1px solid var(--error-500);
}

.btn--error-outline:not(:disabled):hover {
    background-color: oklch(from var(--error-500) l c h / 0.1);
  }

.btn--small.btn--error {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--small.btn--error[disabled],.btn--small.btn--error:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--small.btn--error:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--small.btn--error svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--small.btn--error path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--small.btn--error {
  --button-height: var(--button-height-small);
  --button-font-size: var(--button-font-size-small);
  --button-padding-x: var(--button-padding-x-small);
  --_background: var(--error-500);
  --_hover-background: var(--error-600);
  --_border-color: var(--error-500);
  --_color: white;
  background-color: var(--_background) !important;
  color: white !important;
  color: var(--_color) !important;
  border-color: var(--_border-color) !important;
}

.btn--small.btn--error:not(:disabled):hover {
    background-color: var(--_hover-background) !important;
    border-color: var(--_hover-background) !important;
  }

.btn--small.btn--error-outline {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--small.btn--error-outline[disabled],.btn--small.btn--error-outline:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--small.btn--error-outline:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--small.btn--error-outline svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--small.btn--error-outline path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--small.btn--error-outline {
  --button-height: var(--button-height-small);
  --button-font-size: var(--button-font-size-small);
  --button-padding-x: var(--button-padding-x-small);
  background-color: transparent;
  color: var(--error-500);
  border: 1px solid var(--error-500);
}

.btn--small.btn--error-outline:not(:disabled):hover {
    background-color: oklch(from var(--error-500) l c h / 0.1);
  }

/* Success Status - Confirmation actions (SAVE, CONFIRM, YES) */

.btn--success {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--success[disabled],.btn--success:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--success:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--success svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--success path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--success {
  --_background: var(--success-500);
  --_hover-background: var(--success-600);
  --_border-color: var(--success-500);
  --_color: white;
  background-color: var(--_background) !important;
  color: white !important;
  color: var(--_color) !important;
  border-color: var(--_border-color) !important;
}

.btn--success:not(:disabled):hover {
    background-color: var(--_hover-background) !important;
    border-color: var(--_hover-background) !important;
  }

.btn--success-outline {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--success-outline[disabled],.btn--success-outline:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--success-outline:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--success-outline svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--success-outline path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--success-outline {
  background-color: transparent;
  color: var(--success-500);
  border: 1px solid var(--success-500);
}

.btn--success-outline:not(:disabled):hover {
    background-color: oklch(from var(--success-500) l c h / 0.1);
  }

.btn--small.btn--success {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--small.btn--success[disabled],.btn--small.btn--success:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--small.btn--success:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--small.btn--success svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--small.btn--success path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--small.btn--success {
  --button-height: var(--button-height-small);
  --button-font-size: var(--button-font-size-small);
  --button-padding-x: var(--button-padding-x-small);
  --_background: var(--success-500);
  --_hover-background: var(--success-600);
  --_border-color: var(--success-500);
  --_color: white;
  background-color: var(--_background) !important;
  color: white !important;
  color: var(--_color) !important;
  border-color: var(--_border-color) !important;
}

.btn--small.btn--success:not(:disabled):hover {
    background-color: var(--_hover-background) !important;
    border-color: var(--_hover-background) !important;
  }

.btn--small.btn--success-outline {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--small.btn--success-outline[disabled],.btn--small.btn--success-outline:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--small.btn--success-outline:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--small.btn--success-outline svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--small.btn--success-outline path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--small.btn--success-outline {
  --button-height: var(--button-height-small);
  --button-font-size: var(--button-font-size-small);
  --button-padding-x: var(--button-padding-x-small);
  background-color: transparent;
  color: var(--success-500);
  border: 1px solid var(--success-500);
}

.btn--small.btn--success-outline:not(:disabled):hover {
    background-color: oklch(from var(--success-500) l c h / 0.1);
  }

/* Warning Status - Important actions (PUBLISH, PAY, PROCEED) */

.btn--warning {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--warning[disabled],.btn--warning:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--warning:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--warning svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--warning path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--warning {
  --_background: var(--warning-500);
  --_hover-background: var(--warning-600);
  --_border-color: var(--warning-500);
  --_color: white;
  background-color: var(--_background) !important;
  color: white !important;
  color: var(--_color) !important;
  border-color: var(--_border-color) !important;
}

.btn--warning:not(:disabled):hover {
    background-color: var(--_hover-background) !important;
    border-color: var(--_hover-background) !important;
  }

.btn--warning-outline {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--warning-outline[disabled],.btn--warning-outline:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--warning-outline:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--warning-outline svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--warning-outline path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--warning-outline {
  background-color: transparent;
  color: var(--warning-500);
  border: 1px solid var(--warning-500);
}

.btn--warning-outline:not(:disabled):hover {
    background-color: oklch(from var(--warning-500) l c h / 0.1);
  }

.btn--small.btn--warning {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--small.btn--warning[disabled],.btn--small.btn--warning:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--small.btn--warning:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--small.btn--warning svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--small.btn--warning path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--small.btn--warning {
  --button-height: var(--button-height-small);
  --button-font-size: var(--button-font-size-small);
  --button-padding-x: var(--button-padding-x-small);
  --_background: var(--warning-500);
  --_hover-background: var(--warning-600);
  --_border-color: var(--warning-500);
  --_color: white;
  background-color: var(--_background) !important;
  color: white !important;
  color: var(--_color) !important;
  border-color: var(--_border-color) !important;
}

.btn--small.btn--warning:not(:disabled):hover {
    background-color: var(--_hover-background) !important;
    border-color: var(--_hover-background) !important;
  }

.btn--small.btn--warning-outline {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--small.btn--warning-outline[disabled],.btn--small.btn--warning-outline:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--small.btn--warning-outline:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--small.btn--warning-outline svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--small.btn--warning-outline path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--small.btn--warning-outline {
  --button-height: var(--button-height-small);
  --button-font-size: var(--button-font-size-small);
  --button-padding-x: var(--button-padding-x-small);
  background-color: transparent;
  color: var(--warning-500);
  border: 1px solid var(--warning-500);
}

.btn--small.btn--warning-outline:not(:disabled):hover {
    background-color: oklch(from var(--warning-500) l c h / 0.1);
  }

/* Info Status - Neutral actions (LEARN, HELP, MORE) */

.btn--info {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--info[disabled],.btn--info:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--info:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--info svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--info path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--info {
  --_background: var(--info-500);
  --_hover-background: var(--info-600);
  --_border-color: var(--info-500);
  --_color: white;
  background-color: var(--_background) !important;
  color: white !important;
  color: var(--_color) !important;
  border-color: var(--_border-color) !important;
}

.btn--info:not(:disabled):hover {
    background-color: var(--_hover-background) !important;
    border-color: var(--_hover-background) !important;
  }

.btn--info-outline {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--info-outline[disabled],.btn--info-outline:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--info-outline:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--info-outline svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--info-outline path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--info-outline {
  background-color: transparent;
  color: var(--info-500);
  border: 1px solid var(--info-500);
}

.btn--info-outline:not(:disabled):hover {
    background-color: oklch(from var(--info-500) l c h / 0.1);
  }

.btn--small.btn--info {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--small.btn--info[disabled],.btn--small.btn--info:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--small.btn--info:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--small.btn--info svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--small.btn--info path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--small.btn--info {
  --button-height: var(--button-height-small);
  --button-font-size: var(--button-font-size-small);
  --button-padding-x: var(--button-padding-x-small);
  --_background: var(--info-500);
  --_hover-background: var(--info-600);
  --_border-color: var(--info-500);
  --_color: white;
  background-color: var(--_background) !important;
  color: white !important;
  color: var(--_color) !important;
  border-color: var(--_border-color) !important;
}

.btn--small.btn--info:not(:disabled):hover {
    background-color: var(--_hover-background) !important;
    border-color: var(--_hover-background) !important;
  }

.btn--small.btn--info-outline {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--small.btn--info-outline[disabled],.btn--small.btn--info-outline:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--small.btn--info-outline:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--small.btn--info-outline svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--small.btn--info-outline path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--small.btn--info-outline {
  --button-height: var(--button-height-small);
  --button-font-size: var(--button-font-size-small);
  --button-padding-x: var(--button-padding-x-small);
  background-color: transparent;
  color: var(--info-500);
  border: 1px solid var(--info-500);
}

.btn--small.btn--info-outline:not(:disabled):hover {
    background-color: oklch(from var(--info-500) l c h / 0.1);
  }

.btn--outline {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--outline[disabled],.btn--outline:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--outline:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--outline svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--outline path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--outline {
  background-color: transparent;
  color: var(--primary-500);
  border: 1px solid var(--primary-500);
}

.btn--outline:not(:disabled):hover {
    background-color: oklch(from var(--primary-500) l c h / 0.1);
  }

.btn--small.btn--outline {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--small.btn--outline[disabled],.btn--small.btn--outline:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--small.btn--outline:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--small.btn--outline svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--small.btn--outline path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--small.btn--outline {
  --button-height: var(--button-height-small);
  --button-font-size: var(--button-font-size-small);
  --button-padding-x: var(--button-padding-x-small);
  background-color: transparent;
  color: var(--primary-500);
  border: 1px solid var(--primary-500);
}

.btn--small.btn--outline:not(:disabled):hover {
    background-color: oklch(from var(--primary-500) l c h / 0.1);
  }

.btn--normal-outline {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--normal-outline[disabled],.btn--normal-outline:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--normal-outline:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--normal-outline svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--normal-outline path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--normal-outline {
  background-color: transparent;
  color: var(--slate-700);
  border: 1px solid var(--slate-300);
}

.btn--normal-outline:not(:disabled):hover {
    background-color: oklch(from var(--slate-300) l c h / 0.1);
  }

.btn--small.btn--normal-outline {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--small.btn--normal-outline[disabled],.btn--small.btn--normal-outline:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--small.btn--normal-outline:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--small.btn--normal-outline svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--small.btn--normal-outline path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--small.btn--normal-outline {
  --button-height: var(--button-height-small);
  --button-font-size: var(--button-font-size-small);
  --button-padding-x: var(--button-padding-x-small);
  background-color: transparent;
  color: var(--slate-700);
  border: 1px solid var(--slate-300);
}

.btn--small.btn--normal-outline:not(:disabled):hover {
    background-color: oklch(from var(--slate-300) l c h / 0.1);
  }

/* ===================================
   FUNCTION BUTTONS - Neutral background with specific colors
   =================================== */

.btn--filter,
.btn--pdf,
.btn--print,
.btn--back,
.btn--cancel {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--filter:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--pdf:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--print:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--back:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--cancel:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--filter[disabled],.btn--pdf[disabled],.btn--print[disabled],.btn--back[disabled],.btn--cancel[disabled] {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--filter:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--pdf:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--print:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--back:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--cancel:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--filter svg,.btn--pdf svg,.btn--print svg,.btn--back svg,.btn--cancel svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--filter path,.btn--pdf path,.btn--print path,.btn--back path,.btn--cancel path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--filter,
.btn--pdf,
.btn--print,
.btn--back,
.btn--cancel {
  --_background: light-dark(var(--slate-100), var(--slate-800));
  --_hover-background: light-dark(var(--slate-150), var(--slate-700));
  --_border-color: light-dark(var(--slate-200), var(--slate-700));

  background-color: var(--_background);
  border-color: var(--_border-color);
}

.btn--filter:not(:disabled):hover {
    background-color: var(--_hover-background);
    border-color: var(--_hover-background);
  }

.btn--pdf:not(:disabled):hover {
    background-color: var(--_hover-background);
    border-color: var(--_hover-background);
  }

.btn--print:not(:disabled):hover {
    background-color: var(--_hover-background);
    border-color: var(--_hover-background);
  }

.btn--back:not(:disabled):hover {
    background-color: var(--_hover-background);
    border-color: var(--_hover-background);
  }

.btn--cancel:not(:disabled):hover {
    background-color: var(--_hover-background);
    border-color: var(--_hover-background);
  }

/* Contextual colors for function buttons */

.btn--pdf {
  --_color: var(--error-500);
}

.btn--print {
  --_color: var(--info-500);
}

.btn--back {
  --_color: var(--slate-700);
}

.btn--cancel {
  --_color: var(--warning-600);
}

.btn--filter {
  --_color: var(--slate-600);
}

.btn--pdf svg,
.btn--print svg,
.btn--back svg,
.btn--cancel svg,
.btn--filter svg {
  fill: currentColor;
  stroke: currentColor;
  color: var(--_color);
}

.btn--pdf,
.btn--print,
.btn--back,
.btn--cancel,
.btn--filter {
  color: var(--_color);
}

.btn--small-pdf {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--small-pdf[disabled],.btn--small-pdf:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--small-pdf:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--small-pdf svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--small-pdf path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--small-pdf {
  --button-height: var(--button-height-small);
  --button-font-size: var(--button-font-size-small);
  --button-padding-x: var(--button-padding-x-small);
}

/* ===================================
   BUTTON VARIANTS
   =================================== */

.btn--icon-only {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--icon-only[disabled],.btn--icon-only:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--icon-only:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--icon-only svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--icon-only path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--icon-only {
  width: 2.5rem;
  width: var(--button-height);
  padding: 0;
}

.btn--block {
  width: 100%;
}

.btn--small-icon {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--small-icon[disabled],.btn--small-icon:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--small-icon:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--small-icon svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--small-icon path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--small-icon {
  --button-height: var(--button-height-small);
  --button-font-size: var(--button-font-size-small);
  --button-padding-x: var(--button-padding-x-small);
  --button-padding-x: 0.5rem;
}

/* ===================================
   BUTTON GROUPS
   =================================== */

.btn--group,
.btn-group--actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  gap: var(--gap-md);
  gap: 1rem;
  gap: var(--layout-gap);
  align-items: center;
  justify-content: flex-end;
}

.btn-group--small {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  gap: var(--gap-md);
  gap: 1rem;
  gap: var(--layout-gap);
  align-items: center;
}

.btn-group--icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  gap: var(--gap-md);
  gap: 0.5rem;
  gap: var(--gap-xs);
  align-items: center;
}

/* ===================================
   ACTION BUTTONS
   =================================== */

.btn--action {
  position: relative;
  overflow: hidden;
  transition-duration: 50ms;
  background-color: transparent;
  color: var(--primary-500);
  border: 1px solid var(--primary-500);
}

.btn--action:not(:disabled):hover {
    background-color: oklch(from var(--primary-500) l c h / 0.1);
  }

.btn--action-danger {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--action-danger[disabled],.btn--action-danger:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--action-danger:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--action-danger svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--action-danger path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--action-danger {
  --_background: var(--error-500);
  --_hover-background: var(--error-600);
  --_border-color: var(--error-500);
  --_color: white;
  background-color: var(--_background) !important;
  color: white !important;
  color: var(--_color) !important;
  border-color: var(--_border-color) !important;
}

.btn--action-danger:not(:disabled):hover {
    background-color: var(--_hover-background) !important;
    border-color: var(--_hover-background) !important;
  }

/* ===================================
   BUTTON STATES & ANIMATIONS
   =================================== */

.btn:active {
    transition-duration: 10ms;
  }

/* Loading state */

.btn.loading,.btn[data-state="loading"] {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
  }

.btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.5rem;
    right: var(--spacing-xs);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    animation: var(--animation-loading-spin);
  }

.btn[data-state="loading"]::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0.5rem;
    right: var(--spacing-xs);
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    animation: var(--animation-loading-spin);
  }

/* Success state */

.btn.success,.btn[data-state="success"] {
    background-color: var(--color-success-bg);
    color: var(--color-success);
    border-color: var(--color-success);
    animation: bounce 0.6s ease;
    animation: var(--animation-success-bounce);
  }

.btn.success::after {
      content: "✓";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-weight: 400;
      font-weight: var(--font-weight-regular);
    }

.btn[data-state="success"]::after {
      content: "✓";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      font-weight: 400;
      font-weight: var(--font-weight-regular);
    }

/* Error state */

.btn.error,.btn[data-state="error"] {
    background-color: var(--color-error-bg);
    color: var(--color-error);
    border-color: var(--color-error);
  }

/* Disabled state */

.btn:disabled,.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

/* ===================================
   SPECIFIC BUTTONS
   =================================== */

/* Navbar search button */

.navbar__search-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.navbar__search-btn[disabled],.navbar__search-btn:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.navbar__search-btn:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.navbar__search-btn svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.navbar__search-btn path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.navbar__search-btn {

  background-color: transparent !important;
  border: none !important;
  color: var(--slate-700) !important;
}

.navbar__search-btn svg,.navbar__search-btn path {
    fill: none;
    stroke: currentColor;
  }

.navbar__search-btn:not(:disabled):hover {
    background-color: transparent !important;
    color: var(--primary-600) !important;
    transform: none;
  }

.navbar__search-btn:not(:disabled):hover:active {
      transform: none;
      opacity: 0.8;
    }

/* Transparent buttons with purpose-specific colors */

.btn--info-transparent,
.btn--success-transparent,
.btn--warning-transparent,
.btn--error-transparent {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  gap: var(--button-icon-gap);
  font-size: 0.875rem;
  font-size: var(--button-font-size);
  font-weight: 400;
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  height: 2.5rem;
  height: var(--button-height);
  padding: 0 0.75rem;
  padding: 0 var(--button-padding-x);
  margin: 0;
  border-radius: 0.375rem;
  border-radius: var(--button-border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-text-decoration: none !important;
  text-decoration: none !important;
  transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
  transition: all var(--transition-fast) var(--ease-standard);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.btn--info-transparent:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--success-transparent:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--warning-transparent:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--error-transparent:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--info-transparent[disabled],.btn--success-transparent[disabled],.btn--warning-transparent[disabled],.btn--error-transparent[disabled] {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.btn--info-transparent:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--success-transparent:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--warning-transparent:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--error-transparent:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.btn--info-transparent svg,.btn--success-transparent svg,.btn--warning-transparent svg,.btn--error-transparent svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.btn--info-transparent path,.btn--success-transparent path,.btn--warning-transparent path,.btn--error-transparent path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.btn--info-transparent,
.btn--success-transparent,
.btn--warning-transparent,
.btn--error-transparent {
  background-color: transparent;
  border: 1px solid transparent;
}

.btn--info-transparent:not(:disabled):hover {
    background-color: light-dark(
      oklch(from var(--color) l c h / 0.1),
      oklch(from var(--color) l c h / 0.2)
    );
  }

.btn--success-transparent:not(:disabled):hover {
    background-color: light-dark(
      oklch(from var(--color) l c h / 0.1),
      oklch(from var(--color) l c h / 0.2)
    );
  }

.btn--warning-transparent:not(:disabled):hover {
    background-color: light-dark(
      oklch(from var(--color) l c h / 0.1),
      oklch(from var(--color) l c h / 0.2)
    );
  }

.btn--error-transparent:not(:disabled):hover {
    background-color: light-dark(
      oklch(from var(--color) l c h / 0.1),
      oklch(from var(--color) l c h / 0.2)
    );
  }

.btn--info-transparent {
  --color: var(--info-500);
  color: var(--info-500);
  border-color: var(--info-500);
}

.btn--success-transparent {
  --color: var(--success-500);
  color: var(--success-500);
  border-color: var(--success-500);
}

.btn--warning-transparent {
  --color: var(--warning-500);
  color: var(--warning-500);
  border-color: var(--warning-500);
}

.btn--error-transparent {
  --color: var(--error-500);
  color: var(--error-500);
  border-color: var(--error-500);
}

/* ===================================
   BADGE SYSTEM
   =================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  border-radius: 0.25rem;
  white-space: nowrap;
}

.badge--success {
  background-color: var(--success-100);
  color: var(--success-700);
}

.badge--error {
  background-color: var(--error-100);
  color: var(--error-700);
}

.badge--warning {
  background-color: var(--warning-100);
  color: var(--warning-700);
}

.badge--info {
  background-color: var(--info-100);
  color: var(--info-700);
}

/* :where(svg) > * {
    stroke-width: 1.5;
} */

/* svg path > * {
    stroke: var(--icon-color, light-dark(var(--slate-600), var(--slate-400)));
} */

/* .icon {
  min-height: 2.75rem;
  min-width: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
} */

.icon-small {
  width: 0.875rem;
  width: var(--spacing-m);
}

.icon-base {
  width: 1.5rem;
  width: var(--spacing-l);
}

.icon-large {
  width: 2.5rem;
  width: var(--spacing-xxl);
}

.icon-extra-large {
  width: 4rem;
  width: var(--spacing-xxxl);
}

.qr_code--xxl {
  width: calc(2.5rem * 4);
  width: calc(var(--spacing-xxl) * 4);
}

.icon-small--success {
    width: 0.875rem;
    width: var(--spacing-m);
  }

.icon-small--success > * {
      fill: var(--success-400);
    }

.badge-icon-small--success {
    font-size: 0.875rem;
    font-size: var(--font-size-0);
    padding: calc(0.25rem * 0.5) 0.5rem;
    padding: calc(var(--spacing-xxs) * 0.5) var(--spacing-xs);
    border-radius: 0.75rem;
    border-radius: var(--border-radius-large);
    min-width: -moz-max-content;
    min-width: max-content;
    background-color: var(--success-200);
    color: var(--success-900);
  }

.badge--success {
    font-size: 0.75rem;
    font-size: var(--font-size-1);
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    padding: 0.25rem 0.5rem;
    padding: var(--spacing-xxs) var(--spacing-xs);
    border-radius: 0.75rem;
    border-radius: var(--border-radius-large);
    width: -moz-max-content;
    width: max-content;
    background-color: var(--success-200);
    color: var(--success-900);
  }

.icon--success {
    width: 2rem;
    width: var(--spacing-xl);
  }

.icon--success > * {
      fill: var(--success-400);
    }

.badge-icon--success {
    font-size: 0.75rem;
    font-size: var(--font-size-1);
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    padding: calc(0.25rem * 0.5) 0.25rem;
    padding: calc(var(--spacing-xxs) * 0.5) var(--spacing-xxs);
    border-radius: 0.75rem;
    border-radius: var(--border-radius-large);
    max-width: -moz-max-content;
    max-width: max-content;
    background-color: var(--success-200);
    color: var(--success-900);
  }

.icon-small--error {
    width: 0.875rem;
    width: var(--spacing-m);
  }

.icon-small--error > * {
      fill: var(--error-400);
    }

.badge-icon-small--error {
    font-size: 0.875rem;
    font-size: var(--font-size-0);
    padding: calc(0.25rem * 0.5) 0.5rem;
    padding: calc(var(--spacing-xxs) * 0.5) var(--spacing-xs);
    border-radius: 0.75rem;
    border-radius: var(--border-radius-large);
    min-width: -moz-max-content;
    min-width: max-content;
    background-color: var(--error-200);
    color: var(--error-900);
  }

.badge--error {
    font-size: 0.75rem;
    font-size: var(--font-size-1);
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    padding: 0.25rem 0.5rem;
    padding: var(--spacing-xxs) var(--spacing-xs);
    border-radius: 0.75rem;
    border-radius: var(--border-radius-large);
    width: -moz-max-content;
    width: max-content;
    background-color: var(--error-200);
    color: var(--error-900);
  }

.icon--error {
    width: 2rem;
    width: var(--spacing-xl);
  }

.icon--error > * {
      fill: var(--error-400);
    }

.badge-icon--error {
    font-size: 0.75rem;
    font-size: var(--font-size-1);
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    padding: calc(0.25rem * 0.5) 0.25rem;
    padding: calc(var(--spacing-xxs) * 0.5) var(--spacing-xxs);
    border-radius: 0.75rem;
    border-radius: var(--border-radius-large);
    max-width: -moz-max-content;
    max-width: max-content;
    background-color: var(--error-200);
    color: var(--error-900);
  }

.icon-small--warning {
    width: 0.875rem;
    width: var(--spacing-m);
  }

.icon-small--warning > * {
      fill: var(--warning-400);
    }

.badge-icon-small--warning {
    font-size: 0.875rem;
    font-size: var(--font-size-0);
    padding: calc(0.25rem * 0.5) 0.5rem;
    padding: calc(var(--spacing-xxs) * 0.5) var(--spacing-xs);
    border-radius: 0.75rem;
    border-radius: var(--border-radius-large);
    min-width: -moz-max-content;
    min-width: max-content;
    background-color: var(--warning-200);
    color: var(--warning-900);
  }

.badge--warning {
    font-size: 0.75rem;
    font-size: var(--font-size-1);
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    padding: 0.25rem 0.5rem;
    padding: var(--spacing-xxs) var(--spacing-xs);
    border-radius: 0.75rem;
    border-radius: var(--border-radius-large);
    width: -moz-max-content;
    width: max-content;
    background-color: var(--warning-200);
    color: var(--warning-900);
  }

.icon--warning {
    width: 2rem;
    width: var(--spacing-xl);
  }

.icon--warning > * {
      fill: var(--warning-400);
    }

.badge-icon--warning {
    font-size: 0.75rem;
    font-size: var(--font-size-1);
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    padding: calc(0.25rem * 0.5) 0.25rem;
    padding: calc(var(--spacing-xxs) * 0.5) var(--spacing-xxs);
    border-radius: 0.75rem;
    border-radius: var(--border-radius-large);
    max-width: -moz-max-content;
    max-width: max-content;
    background-color: var(--warning-200);
    color: var(--warning-900);
  }

.icon-small--info {
    width: 0.875rem;
    width: var(--spacing-m);
  }

.icon-small--info > * {
      fill: var(--info-400);
    }

.badge-icon-small--info {
    font-size: 0.875rem;
    font-size: var(--font-size-0);
    padding: calc(0.25rem * 0.5) 0.5rem;
    padding: calc(var(--spacing-xxs) * 0.5) var(--spacing-xs);
    border-radius: 0.75rem;
    border-radius: var(--border-radius-large);
    min-width: -moz-max-content;
    min-width: max-content;
    background-color: var(--info-200);
    color: var(--info-900);
  }

.badge--info {
    font-size: 0.75rem;
    font-size: var(--font-size-1);
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    padding: 0.25rem 0.5rem;
    padding: var(--spacing-xxs) var(--spacing-xs);
    border-radius: 0.75rem;
    border-radius: var(--border-radius-large);
    width: -moz-max-content;
    width: max-content;
    background-color: var(--info-200);
    color: var(--info-900);
  }

.icon--info {
    width: 2rem;
    width: var(--spacing-xl);
  }

.icon--info > * {
      fill: var(--info-400);
    }

.badge-icon--info {
    font-size: 0.75rem;
    font-size: var(--font-size-1);
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    padding: calc(0.25rem * 0.5) 0.25rem;
    padding: calc(var(--spacing-xxs) * 0.5) var(--spacing-xxs);
    border-radius: 0.75rem;
    border-radius: var(--border-radius-large);
    max-width: -moz-max-content;
    max-width: max-content;
    background-color: var(--info-200);
    color: var(--info-900);
  }

@keyframes spin_b {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.clr-icon[aria-label="Not started"] {
    color: var(--step-foreground-light);
  }

.clr-icon[aria-label="Current"] {
    color: var(--info-500);
  }

.clr-icon[aria-label="In progress"] {
    color: var(--info-500);
  }

.clr-icon[aria-label="Completed"] {
    color: var(--success-500);
  }

.clr-icon[aria-label="Error"] {
    color: var(--error-500);
  }

@media (prefers-reduced-motion: no-preference) {
  .clr-icon[aria-label="In progress"] {
    animation: spin_b 2s linear infinite;
  }
}

.profile-icon {
  -o-object-fit: cover;
     object-fit: cover;
  width: 1.5rem;
  width: var(--spacing-l);
  height: 1.5rem;
  height: var(--spacing-l);
  border-radius: 0.25rem;
  border-radius: var(--spacing-xxs);
}

.delete-icon {
    width: 1.5em;
    width: var(--table-icon-size, 1rem);
    height: 1.5em;
    height: var(--table-icon-size, 1rem);
    /* cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center; */
    background-color: transparent;
}

.delete-icon svg {
    color: var(--error-500);
  }

.delete-icon svg:focus-visible {
      color: var(--error-700);
    }

.delete-icon svg:hover {
      color: var(--error-700);
    }

/* Componente de Informação - Baseado nos templates Twig */

/* Variáveis específicas para o componente informacao */

:root {
  --informacao-text: light-dark(var(--slate-700), var(--slate-300));
  --informacao-gap: var(--spacing-s, 0.75rem);
  --informacao-radius: var(--border-radius-base, 0.5rem);
  --informacao-padding: var(--spacing-m, 1rem);
    --informacao-bg: light-dark(oklch(from var(--slate-50) l c h / 0.0), oklch(from var(--slate-800) l c h / 0.0));
    --informacao-border: var(--border-color);
    --informacao-title-color: light-dark(var(--slate-600), var(--slate-200));
    --informacao-icon-color: light-dark(var(--slate-600), var(--slate-200));

}

/* Estilos principais do componente informacao */

.informacao {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  gap: var(--informacao-gap);
  /* padding: var(--informacao-padding); */
  background-color: var(--informacao-bg);
  /* border: 1px solid var(--informacao-border); */
  /* border-radius: var(--informacao-radius); */
  color: var(--informacao-text);
  width: 100%;
  box-sizing: border-box;
justify-content: flex-start;}

/* Título do componente */

.informacao__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--spacing-xs);
  margin: 0;
  padding: 0;
}

.informacao__title h3 {
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  font-size: var(--font-size-2);
  font-weight: 600;
  font-weight: var(--font-weight-bold);
  color: var(--informacao-title-color);
}

.informacao__icon {
  width: 0.875rem;
  width: var(--spacing-m);
  height: 0.875rem;
  height: var(--spacing-m);
  color: var(--informacao-icon-color);
}

/* Descrição do componente */

.informacao__description {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  gap: var(--spacing-xs);
  margin: 0;
  padding: 0;
}

.informacao__description p {
  margin: 0;
  padding: 0;
  font-size: 0.75rem;
  font-size: var(--font-size-1);
  line-height: 1.5;
}

/* Texto de erro (para datas vencidas) */

.informacao__description .text-error {
  color: #dc2626;
  color: var(--error-600, #dc2626);
  font-weight: 600;
  font-weight: var(--font-weight-bold);
}

/* Ícones dentro do texto */

.informacao__description svg {
  width: 0.75rem;
  width: var(--spacing-s);
  height: 0.75rem;
  height: var(--spacing-s);
  vertical-align: middle;
  margin-right: 0.25rem;
  margin-right: var(--spacing-xxs);
}

/* Responsividade */

@media (max-width: 768px) {
  .informacao {
    --informacao-padding: var(--spacing-s);
    --informacao-gap: var(--spacing-xs);
  }
  
  .informacao__title h3 {
    font-size: 0.75rem;
    font-size: var(--font-size-1);
  }
  
  .informacao__description p {
    font-size: 0.875rem;
    font-size: var(--font-size-0);
  }
}

/* Variantes de cor */

.informacao--success {
  --informacao-bg: var(--success-50, #ecfdf5);
  --informacao-border: var(--success-200, #bbf7d0);
  --informacao-icon-color: var(--success-500, #10b981);
}

.informacao--error {
  --informacao-bg: var(--error-50, #fef2f2);
  --informacao-border: var(--error-200, #fecaca);
  --informacao-icon-color: var(--error-500, #ef4444);
}

.informacao--warning {
  --informacao-bg: var(--warning-50, #fffbeb);
  --informacao-border: var(--warning-200, #fde68a);
  --informacao-icon-color: var(--warning-500, #f59e0b);
}

.informacao--info {
  --informacao-bg: var(--info-50, #eff6ff);
  --informacao-border: var(--info-200, #bfdbfe);
  --informacao-icon-color: var(--info-500, #3b82f6);
}

/* Estilos para badges específicos usados nos templates */

.badge-btn--error-outlineerror,
.badge-btn--error-outlinesuccess {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  padding: var(--spacing-xxs) var(--spacing-s);
  border-radius: 0.75rem;
  border-radius: var(--border-radius-large);
  font-size: 0.875rem;
  font-size: var(--font-size-0);
  font-weight: 600;
  font-weight: var(--font-weight-bold);
  border: 2px solid;
  background-color: transparent;
  cursor: pointer;
  transition: all 150ms ease-in-out;
  transition: all var(--transition-fast);
}

.badge-btn--error-outlineerror {
  color: var(--error-600);
  border-color: var(--error-600);
}

.badge-btn--error-outlineerror:hover,.badge-btn--error-outlineerror:focus-visible {
    background-color: var(--error-600);
    color: white;
  }

.badge-btn--error-outlinesuccess {
  color: var(--success-600);
  border-color: var(--success-600);
}

.badge-btn--error-outlinesuccess:hover,.badge-btn--error-outlinesuccess:focus-visible {
    background-color: var(--success-600);
    color: white;
  }

/* Badge padrão (para compatibilidade com templates existentes) */

.badge-error,
.badge-success,
.badge-warning,
.badge-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  padding: var(--spacing-xxs) var(--spacing-s);
  border-radius: 0.75rem;
  border-radius: var(--border-radius-large);
  font-size: 0.875rem;
  font-size: var(--font-size-0);
  font-weight: 600;
  font-weight: var(--font-weight-bold);
  color: white;
}

.badge-error {
  background-color: #ef4444;
  background-color: var(--error-500, #ef4444);
}

.badge-success {
  background-color: #10b981;
  background-color: var(--success-500, #10b981);
}

.badge-warning {
  background-color: #f59e0b;
  background-color: var(--warning-500, #f59e0b);
}

.badge-info {
  background-color: #3b82f6;
  background-color: var(--info-500, #3b82f6);
}

/* ============================================================
   TOAST CARD COMPONENT (legacy: alert-card)
   ============================================================ */

/* Grid de Estatísticas */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    grid-gap: 0.75rem;
    gap: 0.75rem;
    margin: 1rem 0;
}

.stat-item {
    text-align: center;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
    background: light-dark(var(--slate-50), var(--slate-850));
    transition: all 0.2s ease;
}

.stat-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.stat-item.stat-critical {
        border-color: light-dark(var(--error-600), var(--error-400));
        background: light-dark(
          oklch(from var(--error-500) l c h / 0.12),
          oklch(from var(--error-500) l c h / 0.24)
        );
    }

.stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-500);
}

.stat-critical .stat-number {
        color: light-dark(var(--error-700), var(--error-300));
    }

.stat-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0.25rem 0 0.125rem;
}

/* ============================================================
   CARTOES DE TOAST INDIVIDUAIS
   ============================================================ */

.toast-card,
.alert-card {
    border-radius: 0.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    margin-bottom: 0.75rem;
    margin-bottom: var(--spacing-s);
    overflow: hidden;
    transition: all 0.2s ease;
    color: var(--color-text);
    background: light-dark(var(--color-surface), var(--slate-900));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-small);
    animation: slideInUp 0.3s ease-out;
}

.toast-card:hover,.alert-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        box-shadow: var(--shadow-medium);
    }

/* Classes de cor para toasts */

.toast-card.toast-error,
.alert-card.alert-error {
    border-color: light-dark(var(--error-600), var(--error-400));
    background: light-dark(
      oklch(from var(--error-500) l c h / 0.08),
      oklch(from var(--error-500) l c h / 0.18)
    );
}

.toast-card.toast-error .toast-card-header,.alert-card.alert-error .toast-card-header,.toast-card.toast-error .alert-card-header,.alert-card.alert-error .alert-card-header {
        border-bottom-color: light-dark(var(--error-600), var(--error-400));
    }

.toast-card.toast-error .toast-card-icon,.alert-card.alert-error .toast-card-icon,.toast-card.toast-error .alert-card-icon,.alert-card.alert-error .alert-card-icon {
        color: light-dark(var(--error-700), var(--error-200));
    }

.toast-card.toast-warning,
.alert-card.alert-warning {
    border-color: light-dark(var(--warning-600), var(--warning-400));
    background: light-dark(
      oklch(from var(--warning-500) l c h / 0.08),
      oklch(from var(--warning-500) l c h / 0.20)
    );
}

.toast-card.toast-warning .toast-card-header,.alert-card.alert-warning .toast-card-header,.toast-card.toast-warning .alert-card-header,.alert-card.alert-warning .alert-card-header {
        border-bottom-color: light-dark(var(--warning-600), var(--warning-400));
    }

.toast-card.toast-warning .toast-card-icon,.alert-card.alert-warning .toast-card-icon,.toast-card.toast-warning .alert-card-icon,.alert-card.alert-warning .alert-card-icon {
        color: light-dark(var(--warning-800), var(--warning-200));
    }

.toast-card.toast-info,
.alert-card.alert-info {
    border-color: light-dark(var(--info-600), var(--info-400));
    background: light-dark(
      oklch(from var(--info-500) l c h / 0.08),
      oklch(from var(--info-500) l c h / 0.18)
    );
}

.toast-card.toast-info .toast-card-header,.alert-card.alert-info .toast-card-header,.toast-card.toast-info .alert-card-header,.alert-card.alert-info .alert-card-header {
        border-bottom-color: light-dark(var(--info-600), var(--info-400));
    }

.toast-card.toast-info .toast-card-icon,.alert-card.alert-info .toast-card-icon,.toast-card.toast-info .alert-card-icon,.alert-card.alert-info .alert-card-icon {
        color: light-dark(var(--info-700), var(--info-200));
    }

.toast-card-header,
.alert-card-header {
    padding: 0.75rem 0.875rem;
    padding: var(--spacing-s) var(--spacing-m);
    border-bottom: 1px solid;
    background: light-dark(var(--slate-50), var(--slate-850));
}

.toast-card-title,
.alert-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-size: var(--font-size-1);
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-heading);
    margin-bottom: 0.25rem;
}

.toast-card-icon,
.alert-card-icon {
    width: 18px;
    height: 18px;
}

.toast-card-date,
.alert-card-date {
    font-size: 0.875rem;
    color: var(--color-text--muted);
}

.toast-card-body,
.alert-card-body {
    padding: 0.75rem 0.875rem;
    padding: var(--spacing-s) var(--spacing-m);
}

.toast-card-details,
.alert-card-details {
    margin-bottom: 0.75rem;
    margin-bottom: var(--spacing-s);
}

.toast-card-meta,
.alert-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
    margin: var(--spacing-xs) 0;
    font-size: 0.75rem;
    font-size: var(--font-size-1);
    color: var(--color-text--muted);
}

.meta-icon {
    width: 14px;
    height: 14px;
}

.toast-card-actions,
.alert-card-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-icon {
    width: 14px;
    height: 14px;
    margin-right: 0.25rem;
}

.toast-actions,
.alert-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--slate-300);
}

/* ============================================================
   RESPONSIVIDADE
   ============================================================ */

@media (max-width: 768px) {
    .toast-card-actions,
    .alert-card-actions {
        flex-direction: column;
    }
    
    .btn--small {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   ANIMAÇÕES
   ============================================================ */

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    from { 
        transform: rotate(0deg); 
    }
    to { 
        transform: rotate(360deg); 
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ===================================
   CARDS COMPONENT - REFACTORED WITH MIXINS
   =================================== */

/* ----------------------------------
      Card Grid Layout
      Modern responsive grid with container queries
      ---------------------------------- */

.cards {
    --_min-width: max(16rem, min(20vw, 20rem));
    display: grid;
    grid-gap: 1.5rem;
    grid-gap: var(--cards-gutter);
    gap: 1.5rem;
    gap: var(--cards-gutter);
    grid-template-columns: repeat(auto-fit, minmax(max(16rem, min(20vw, 20rem)), 1fr));
    grid-template-columns: repeat(auto-fit, minmax(var(--_min-width), 1fr));
    margin-top: 0.875rem;
    margin-bottom: 0.875rem;
    margin-top: var(--card-margin-block);
    margin-bottom: var(--card-margin-block);

    /* Container queries for modern responsive behavior */
    container-type: inline-size;
}

/* Container query: Small containers get single column */

@container (max-width: 400px) {
    .cards {
        grid-template-columns: 1fr;
        gap: 0.875rem;
        gap: var(--spacing-m);
    }
}

/* Container query: Medium containers get 2 columns */

@container (min-width: 401px) and (max-width: 800px) {
    .cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.875rem;
        gap: var(--spacing-m);
    }
}

/* ----------------------------------
    Base Card Styles
---------------------------------- */

.card,
.card-small,
.card-transport {
    border-radius: 0.5rem;
    border-radius: var(--border-radius-medium);
    padding: 0.75rem;
    padding: var(--card-padding);
    background: var(--card-background);
    display: grid;
    grid-template-rows: auto auto 1fr auto auto;
    transition: transform 150ms ease-in-out, box-shadow 150ms ease-in-out, outline 150ms ease-in-out;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), outline var(--transition-fast);
    -webkit-text-decoration: none;
    text-decoration: none;
    will-change: transform, box-shadow;
    outline: 1px solid transparent;
    cursor: pointer;
}

.card > *:not(:last-child),
.card-small > *:not(:last-child),
.card-transport > *:not(:last-child) {
    margin-bottom: 0.5rem;
    margin-bottom: var(--spacing-xs);
}

.card {
    border-left: var(--card-border);
}

.card-small {
    border-bottom: var(--card-border);
}

.card-transport {
    border-top: var(--card-border);
}

/* Grid positioning for optional card elements */

.card__media {
    grid-row: 1;
}

.card__header {
    grid-row: 2;
}

.card__body,
.card__content,
.card__description {
    grid-row: 3;
}

.card__meta {
    grid-row: 4;
}

.card__footer {
    grid-row: 5;
}

/* ----------------------------------
    Card Hover States
---------------------------------- */

.card:hover,
.card:focus-visible,
.card:focus-within,
.card-small:hover,
.card-small:focus-visible,
.card-small:focus-within,
.card-transport:hover,
.card-transport:focus-visible,
.card-transport:focus-within {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    box-shadow: var(--card-hover-shadow);
    transform: translateY(-0.25rem);
    outline-color: var(--slate-100);
}

/* ----------------------------------
    Component Separator
---------------------------------- */

.component-separate {
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    gap: var(--spacing-m);
}

/* ----------------------------------
    Card Header
---------------------------------- */

.card__title--wrapper {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    gap: var(--spacing-m);
    padding-bottom: 0.25rem;
    padding-bottom: var(--spacing-xxs);
    border-bottom: 1px solid var(--border-color);
}

.card__title--wrapper > svg {
    width: 1.5rem;
    width: var(--spacing-l);
    aspect-ratio: 1;
}

.card__title--wrapper > svg > * {
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
    stroke: var(--primary-500);
    fill: none;
}

.card__header {
    display: flex;
    flex: 1;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.875rem;
    gap: var(--spacing-m);
}

.card__title {
    font-size: max(1rem, min(3vw, calc(1rem * 0.95)));
    font-size: max(var(--font-size-3), min(3vw, calc(var(--font-size-3) * 0.95)));
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    flex: 1;
}

.card__status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    gap: var(--spacing-xs);
    white-space: nowrap;
    font-size: 0.875rem;
    font-size: var(--font-size-2);
}

/* ----------------------------------
    Card Content
---------------------------------- */

.card__content,
.card__description {
    font: 400 0.875rem / 1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
    font: var(--font-weight-regular) var(--font-size-2) / 1.4 var(--font-family);
    color: var(--color-text);
}

.card__content > p,
.card__description > p {
    font: inherit;
    line-height: 1.6;
}

.card__content--transport > p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    gap: var(--spacing-s);
    margin:0;
}

/* ----------------------------------
    Card Footer
---------------------------------- */

.card__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    gap: var(--spacing-s);
}

.card__footer p {
        margin: 0;
    }

.card__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.875rem;
    gap: var(--spacing-m);
    margin-top: 0.5rem;
    margin-top: var(--spacing-xs);
}

.card__actions  > a {
        display: inline-flex;
        gap: 0.5rem;
        gap: var(--spacing-xs);
        align-items: center;
        font-size: 0.75rem;
        font-size: var(--font-size-1);
        -webkit-text-decoration: none;
        text-decoration: none;
        color: var(--color-link);
        transition: color 250ms ease-in-out;
        transition: color var(--transition-normal);
    }

.card__actions  > a:hover {
        color: var(--primary-500);
        outline: 1px dotted var(--primary-500);
        outline-offset: 2px;
    }

/* ----------------------------------
    Card Links
---------------------------------- */

.card__link {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--color-link);
    transition: color 250ms ease-in-out;
    transition: color var(--transition-normal);
}

.card__link:hover,.card__link:focus-visible {
        color: var(--primary-500);
        outline: none;
    }

/* ----------------------------------
    SVG and Image Sizes
---------------------------------- */

.card__svg--s,
.card__svg--m,
.card__svg--l,
.card__svg--xl,
.card__svg--xxl {
    width: 0.75rem;
    width: var(--spacing-s);
    min-width: 0.75rem;
    min-width: var(--spacing-s);
    aspect-ratio: 1;
}

.card__svg--s { width: 0.875rem; width: var(--spacing-m); }

.card__svg--m { width: 1.5rem; width: var(--spacing-l); }

.card__svg--l { width: 2rem; width: var(--spacing-xl); }

.card__svg--xl { width: 2.5rem; width: var(--spacing-xxl); }

.card__svg--xxl { width: calc(2.5rem * 1.5); width: calc(var(--spacing-xxl) * 1.5); }

.card__svg--s > *,
.card__svg--m > *,
.card__svg--l > *,
.card__svg--xl > *,
.card__svg--xxl > * {
    stroke: var(--primary-500);
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
    fill: none;
}

.card__img--s,
.card__img--m,
.card__img--l,
.card__img--xl,
.card__img--xxl {
    width: 0.75rem;
    width: var(--spacing-s);
    border-radius: 0.25rem;
    border-radius: var(--border-radius-small);
}

.card__img--m { width: 0.875rem; width: var(--spacing-m); }

.card__img--l { width: 1.5rem; width: var(--spacing-l); }

.card__img--xl { width: 2rem; width: var(--spacing-xl); }

.card__img--xxl { width: 2.5rem; width: var(--spacing-xxl); }

/* ----------------------------------
    Responsive Design
---------------------------------- */

/* Mobile (414px-413px) - iPhone 14/15 */

@media (max-width: 413px) {
    .cards { 
        --_min-width: max(14rem, min(90vw, 18rem));
        gap: 0.875rem;
        gap: var(--spacing-m);
    }
    .card, .card-small, .card-transport { 
        padding: 0.875rem; 
        padding: var(--spacing-m); 
    }
    .card__title { 
        font-size: 0.875rem; 
        font-size: var(--font-size-2); 
    }
    .card__footer { 
        flex-wrap: wrap; 
    }
}

/* Small (414px-769px) - iPhone 12/13 Pro, iPad mini */

@media (min-width: 414px) and (max-width: 768px) {
    .cards {
        --_min-width: max(16rem, min(20vw, 20rem));
        gap: 1.5rem;
        gap: var(--cards-gutter);
    }
}

/* Medium (769px-1023px) - iPad */

@media (min-width: 769px) and (max-width: 1023px) {
    .cards {
        --_min-width: max(16rem, min(18vw, 20rem));
        gap: 1.5rem;
        gap: var(--cards-gutter);
    }
}

/* Large (1024px-1279px) - Desktop */

@media (min-width: 1024px) and (max-width: 1279px) {
    .cards {
        --_min-width: max(16rem, min(16vw, 20rem));
        gap: 1.5rem;
        gap: var(--cards-gutter);
    }
}

/* Extra Large (1280px-1439px) - Large desktop */

@media (min-width: 1280px) and (max-width: 1439px) {
    .cards {
        --_min-width: max(16rem, min(14vw, 20rem));
        gap: 1.5rem;
        gap: var(--cards-gutter);
    }
}

/* Extra Extra Large (1440px+) - 4K+ */

@media (min-width: 1440px) {
    .cards {
        --_min-width: max(16rem, min(12vw, 20rem));
        gap: 1.5rem;
        gap: var(--cards-gutter);
    }
}

/* Small (414px-769px) - iPhone 12/13 Pro, iPad mini */

@media (max-width: 768px) {
    .card__content > p,
    .card__content--transport > p,
    .card__body > p {
        font-size: 0.75rem;
        font-size: var(--font-size-1);
        margin: 0;
    }
    .card__actions { 
        flex-direction: row;
        gap: 0.75rem;
        gap: var(--spacing-s); 
    }
}

/* ===================================
   # CARD COMPONENT - MISSING CLASSES
   =================================== */

.card__body {
    font: 400 0.875rem / 1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
    font: var(--font-weight-regular) var(--font-size-2) / 1.4 var(--font-family);
    color: var(--color-text);
    line-height: 1.6;
}

.card__body > p {
    font: inherit;
    line-height: 1.6;
}

.card__meta {
  font-size: 0.75rem;
  font-size: var(--font-size-1);
  color: var(--color-text--muted);
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  gap: var(--spacing-xs);
}

.card__media {
  margin-bottom: 1rem;
  margin-bottom: var(--spacing-base);
  display: flex;
  justify-content: center;
  align-items: center;
}

.card__image {
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
  border-radius: var(--border-radius-small);
  -o-object-fit: cover;
     object-fit: cover;
}

/* ----------------------------------
    Reduced Motion
---------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .card,
    .card-small,
    .card-transport {
        transition: none;
    }

        .card:hover,.card-small:hover,.card-transport:hover {
            transform: none;
            outline-color: var(--primary-100);
        }
}

.dashboard {
    border: var(--border-none);
    border-radius: 0;
    border-radius: var(--radius-none);
    padding-top: 1rem;
    padding-top: var(--layout-gap);

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;
    justify-items: stretch;
    grid-gap: 1rem;
    grid-gap: var(--layout-gap);
    gap: 1rem;
    gap: var(--layout-gap);
}

.dashboard h3 {
        text-align: center;
        padding: 0;
        grid-column: 1 / -1;
    }

/* ===================================
    FORM ELEMENTS AND FIELD STYLES - REFACTORED WITH MIXINS
    =================================== */

/* Import mixins from tools - already imported in app.pcss */

.input,
input,
select,
textarea,
.form-control input,
.form-control select,
.form-control textarea {
  background-color: var(--input-background);
  color: light-dark(var(--slate-900), var(--slate-50));
  font-size: 0.875rem;
  font-size: var(--input-font-size);
  line-height: 1.5;
  margin: 0;
  padding: 0.5rem 0.5rem;
  padding: var(--input-padding);
  transition: 250ms ease-in-out, border-color 250ms ease-in-out, box-shadow 250ms ease-in-out;
  transition: var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  width: 100%;
  border: 1px solid var(--input-border-color);
  border-radius: 0.25rem;
  border-radius: var(--radius-sm);
  height: 2.5rem;
  height: var(--input-height-default);
  position: relative;
  /* State management via CSS variables */
  border-color: var(--validation-border, var(--input-border-color));
}

.input:not(does-not-exist)::-moz-placeholder {
    color: light-dark(var(--slate-400), var(--slate-500));
    font-style: italic;
    opacity: 1;
    -moz-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
    -moz-transition: opacity var(--transition-normal);
    transition: opacity var(--transition-normal);
  }

.input:not(does-not-exist)::placeholder {
    color: light-dark(var(--slate-400), var(--slate-500));
    font-style: italic;
    opacity: 1;
    transition: opacity 250ms ease-in-out;
    transition: opacity var(--transition-normal);
  }

input:not(.does-not-exist)::-moz-placeholder {
    color: light-dark(var(--slate-400), var(--slate-500));
    font-style: italic;
    opacity: 1;
    -moz-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
    -moz-transition: opacity var(--transition-normal);
    transition: opacity var(--transition-normal);
  }

input:not(.does-not-exist)::placeholder {
    color: light-dark(var(--slate-400), var(--slate-500));
    font-style: italic;
    opacity: 1;
    transition: opacity 250ms ease-in-out;
    transition: opacity var(--transition-normal);
  }

select:not(.does-not-exist)::-moz-placeholder {
    color: light-dark(var(--slate-400), var(--slate-500));
    font-style: italic;
    opacity: 1;
    -moz-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
    -moz-transition: opacity var(--transition-normal);
    transition: opacity var(--transition-normal);
  }

select:not(.does-not-exist)::placeholder {
    color: light-dark(var(--slate-400), var(--slate-500));
    font-style: italic;
    opacity: 1;
    transition: opacity 250ms ease-in-out;
    transition: opacity var(--transition-normal);
  }

textarea:not(.does-not-exist)::-moz-placeholder {
    color: light-dark(var(--slate-400), var(--slate-500));
    font-style: italic;
    opacity: 1;
    -moz-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
    -moz-transition: opacity var(--transition-normal);
    transition: opacity var(--transition-normal);
  }

textarea:not(.does-not-exist)::placeholder {
    color: light-dark(var(--slate-400), var(--slate-500));
    font-style: italic;
    opacity: 1;
    transition: opacity 250ms ease-in-out;
    transition: opacity var(--transition-normal);
  }

.form-control input::-moz-placeholder {
    color: light-dark(var(--slate-400), var(--slate-500));
    font-style: italic;
    opacity: 1;
    -moz-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
    -moz-transition: opacity var(--transition-normal);
    transition: opacity var(--transition-normal);
  }

.form-control input::placeholder {
    color: light-dark(var(--slate-400), var(--slate-500));
    font-style: italic;
    opacity: 1;
    transition: opacity 250ms ease-in-out;
    transition: opacity var(--transition-normal);
  }

.form-control select::-moz-placeholder {
    color: light-dark(var(--slate-400), var(--slate-500));
    font-style: italic;
    opacity: 1;
    -moz-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
    -moz-transition: opacity var(--transition-normal);
    transition: opacity var(--transition-normal);
  }

.form-control select::placeholder {
    color: light-dark(var(--slate-400), var(--slate-500));
    font-style: italic;
    opacity: 1;
    transition: opacity 250ms ease-in-out;
    transition: opacity var(--transition-normal);
  }

.form-control textarea::-moz-placeholder {
    color: light-dark(var(--slate-400), var(--slate-500));
    font-style: italic;
    opacity: 1;
    -moz-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
    -moz-transition: opacity var(--transition-normal);
    transition: opacity var(--transition-normal);
  }

.form-control textarea::placeholder {
    color: light-dark(var(--slate-400), var(--slate-500));
    font-style: italic;
    opacity: 1;
    transition: opacity 250ms ease-in-out;
    transition: opacity var(--transition-normal);
  }

.input:not(does-not-exist):focus,input:not(.does-not-exist):focus,select:not(.does-not-exist):focus,textarea:not(.does-not-exist):focus,.form-control input:focus,.form-control select:focus,.form-control textarea:focus {
    border-color: var(--validation-focus, var(--primary-500));
    /* Progressive enhancement with fallback */
    box-shadow: 0 0 0 2px #0d9488;
    box-shadow: 0 0 0 2px var(--focus-ring-color, rgba(59, 130, 246, 0.2));
    
    /* Enhanced oklch support with fallback */
  }

@supports (color: oklch(0.5 0.2 180)) {

.input:not(does-not-exist):focus,input:not(.does-not-exist):focus,select:not(.does-not-exist):focus,textarea:not(.does-not-exist):focus,.form-control input:focus,.form-control select:focus,.form-control textarea:focus {
      box-shadow: 0 0 0 2px light-dark(
        oklch(from var(--primary-500) l c h / 0.2), 
        oklch(from var(--primary-400) l c h / 0.2)
      );
  }
    }

.input:not(does-not-exist):focus,input:not(.does-not-exist):focus,select:not(.does-not-exist):focus,textarea:not(.does-not-exist):focus,.form-control input:focus,.form-control select:focus,.form-control textarea:focus {
    
    /* Accessibility: Ensure visible focus indicator */
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

/* Enhanced keyboard navigation support */

.input:not(does-not-exist):disabled {
    background-color: light-dark(var(--slate-100), var(--slate-800));
    border-color: light-dark(var(--slate-200), var(--slate-700));
    color: light-dark(var(--slate-500), var(--slate-500));
    cursor: not-allowed;
    opacity: 0.7;
  }

input:not(.does-not-exist):disabled {
    background-color: light-dark(var(--slate-100), var(--slate-800));
    border-color: light-dark(var(--slate-200), var(--slate-700));
    color: light-dark(var(--slate-500), var(--slate-500));
    cursor: not-allowed;
    opacity: 0.7;
  }

select:not(.does-not-exist):disabled {
    background-color: light-dark(var(--slate-100), var(--slate-800));
    border-color: light-dark(var(--slate-200), var(--slate-700));
    color: light-dark(var(--slate-500), var(--slate-500));
    cursor: not-allowed;
    opacity: 0.7;
  }

textarea:not(.does-not-exist):disabled {
    background-color: light-dark(var(--slate-100), var(--slate-800));
    border-color: light-dark(var(--slate-200), var(--slate-700));
    color: light-dark(var(--slate-500), var(--slate-500));
    cursor: not-allowed;
    opacity: 0.7;
  }

.form-control input:disabled {
    background-color: light-dark(var(--slate-100), var(--slate-800));
    border-color: light-dark(var(--slate-200), var(--slate-700));
    color: light-dark(var(--slate-500), var(--slate-500));
    cursor: not-allowed;
    opacity: 0.7;
  }

.form-control select:disabled {
    background-color: light-dark(var(--slate-100), var(--slate-800));
    border-color: light-dark(var(--slate-200), var(--slate-700));
    color: light-dark(var(--slate-500), var(--slate-500));
    cursor: not-allowed;
    opacity: 0.7;
  }

.form-control textarea:disabled {
    background-color: light-dark(var(--slate-100), var(--slate-800));
    border-color: light-dark(var(--slate-200), var(--slate-700));
    color: light-dark(var(--slate-500), var(--slate-500));
    cursor: not-allowed;
    opacity: 0.7;
  }

/* Loading state */

.input[data-state="loading"]:not(does-not-exist),input[data-state="loading"]:not(.does-not-exist),select[data-state="loading"]:not(.does-not-exist),textarea[data-state="loading"]:not(.does-not-exist),.form-control input[data-state="loading"],.form-control select[data-state="loading"],.form-control textarea[data-state="loading"] {
    position: relative;
    padding-right: calc(0.75rem + 1rem + 0.5rem);
    padding-right: calc(var(--input-padding-x) + var(--validation-loading-size) + var(--spacing-xs));
  }

.input[data-state="loading"]:not(does-not-exist)::after {
      content: "";
      position: absolute;
      right: 0.5rem;
      right: var(--gap-xs);
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
      width: var(--validation-loading-size);
      height: 1rem;
      height: var(--validation-loading-size);
      border: 2px solid light-dark(var(--slate-300), var(--slate-600));
      border-top-color: var(--primary-500);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      animation: var(--animation-loading-spin);
    }

input[data-state="loading"]:not(.does-not-exist)::after {
      content: "";
      position: absolute;
      right: 0.5rem;
      right: var(--gap-xs);
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
      width: var(--validation-loading-size);
      height: 1rem;
      height: var(--validation-loading-size);
      border: 2px solid light-dark(var(--slate-300), var(--slate-600));
      border-top-color: var(--primary-500);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      animation: var(--animation-loading-spin);
    }

select[data-state="loading"]:not(.does-not-exist)::after {
      content: "";
      position: absolute;
      right: 0.5rem;
      right: var(--gap-xs);
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
      width: var(--validation-loading-size);
      height: 1rem;
      height: var(--validation-loading-size);
      border: 2px solid light-dark(var(--slate-300), var(--slate-600));
      border-top-color: var(--primary-500);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      animation: var(--animation-loading-spin);
    }

textarea[data-state="loading"]:not(.does-not-exist)::after {
      content: "";
      position: absolute;
      right: 0.5rem;
      right: var(--gap-xs);
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
      width: var(--validation-loading-size);
      height: 1rem;
      height: var(--validation-loading-size);
      border: 2px solid light-dark(var(--slate-300), var(--slate-600));
      border-top-color: var(--primary-500);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      animation: var(--animation-loading-spin);
    }

.form-control input[data-state="loading"]::after {
      content: "";
      position: absolute;
      right: 0.5rem;
      right: var(--gap-xs);
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
      width: var(--validation-loading-size);
      height: 1rem;
      height: var(--validation-loading-size);
      border: 2px solid light-dark(var(--slate-300), var(--slate-600));
      border-top-color: var(--primary-500);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      animation: var(--animation-loading-spin);
    }

.form-control select[data-state="loading"]::after {
      content: "";
      position: absolute;
      right: 0.5rem;
      right: var(--gap-xs);
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
      width: var(--validation-loading-size);
      height: 1rem;
      height: var(--validation-loading-size);
      border: 2px solid light-dark(var(--slate-300), var(--slate-600));
      border-top-color: var(--primary-500);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      animation: var(--animation-loading-spin);
    }

.form-control textarea[data-state="loading"]::after {
      content: "";
      position: absolute;
      right: 0.5rem;
      right: var(--gap-xs);
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
      width: var(--validation-loading-size);
      height: 1rem;
      height: var(--validation-loading-size);
      border: 2px solid light-dark(var(--slate-300), var(--slate-600));
      border-top-color: var(--primary-500);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      animation: var(--animation-loading-spin);
    }

/* Validation states */

.input[data-state="invalid"]:not(does-not-exist),input[data-state="invalid"]:not(.does-not-exist),select[data-state="invalid"]:not(.does-not-exist),textarea[data-state="invalid"]:not(.does-not-exist),.form-control input[data-state="invalid"],.form-control select[data-state="invalid"],.form-control textarea[data-state="invalid"] {
    border-color: rgb(197, 54, 55);
    border-color: var(--validation-error);
  }

.input[data-state="invalid"]:not(does-not-exist):focus,input[data-state="invalid"]:not(.does-not-exist):focus,select[data-state="invalid"]:not(.does-not-exist):focus,textarea[data-state="invalid"]:not(.does-not-exist):focus,.form-control input[data-state="invalid"]:focus,.form-control select[data-state="invalid"]:focus,.form-control textarea[data-state="invalid"]:focus {
      outline-color: rgb(197, 54, 55);
      outline-color: var(--validation-error);
      box-shadow: 0 0 0 3px light-dark(
        oklch(from var(--error-500) l c h / 0.3),
        oklch(from var(--error-400) l c h / 0.3)
      );
    }

.input[data-state="valid"]:not(does-not-exist),input[data-state="valid"]:not(.does-not-exist),select[data-state="valid"]:not(.does-not-exist),textarea[data-state="valid"]:not(.does-not-exist),.form-control input[data-state="valid"],.form-control select[data-state="valid"],.form-control textarea[data-state="valid"] {
    border-color: rgb(5, 137, 62);
    border-color: var(--validation-success);
  }

.input[data-state="valid"]:not(does-not-exist):focus,input[data-state="valid"]:not(.does-not-exist):focus,select[data-state="valid"]:not(.does-not-exist):focus,textarea[data-state="valid"]:not(.does-not-exist):focus,.form-control input[data-state="valid"]:focus,.form-control select[data-state="valid"]:focus,.form-control textarea[data-state="valid"]:focus {
      outline-color: rgb(5, 137, 62);
      outline-color: var(--validation-success);
    }

.input[data-state="warning"]:not(does-not-exist),input[data-state="warning"]:not(.does-not-exist),select[data-state="warning"]:not(.does-not-exist),textarea[data-state="warning"]:not(.does-not-exist),.form-control input[data-state="warning"],.form-control select[data-state="warning"],.form-control textarea[data-state="warning"] {
    border-color: rgb(148, 105, 0);
    border-color: color(display-p3 0.57061 0.41036 0);
    border-color: var(--validation-warning);
  }

.input[data-state="warning"]:not(does-not-exist):focus,input[data-state="warning"]:not(.does-not-exist):focus,select[data-state="warning"]:not(.does-not-exist):focus,textarea[data-state="warning"]:not(.does-not-exist):focus,.form-control input[data-state="warning"]:focus,.form-control select[data-state="warning"]:focus,.form-control textarea[data-state="warning"]:focus {
      outline-color: rgb(148, 105, 0);
      outline-color: color(display-p3 0.57061 0.41036 0);
      outline-color: var(--validation-warning);
    }

.input[data-state="info"]:not(does-not-exist),input[data-state="info"]:not(.does-not-exist),select[data-state="info"]:not(.does-not-exist),textarea[data-state="info"]:not(.does-not-exist),.form-control input[data-state="info"],.form-control select[data-state="info"],.form-control textarea[data-state="info"] {
    border-color: rgb(0, 126, 154);
    border-color: color(display-p3 0 0.4978 0.63794);
    border-color: var(--validation-info);
  }

.input[data-state="info"]:not(does-not-exist):focus,input[data-state="info"]:not(.does-not-exist):focus,select[data-state="info"]:not(.does-not-exist):focus,textarea[data-state="info"]:not(.does-not-exist):focus,.form-control input[data-state="info"]:focus,.form-control select[data-state="info"]:focus,.form-control textarea[data-state="info"]:focus {
      outline-color: rgb(0, 126, 154);
      outline-color: color(display-p3 0 0.4978 0.63794);
      outline-color: var(--validation-info);
    }

/* Enhanced validation icons with accessibility support */

.input[data-state="invalid"]:not(does-not-exist)::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3e%3cpath d='M12 9v4'/%3e%3ccircle cx='12' cy='17' r='1'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-error);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: shake 0.5s ease-in-out;
    animation: var(--animation-error-shake);
    /* Accessibility support */
    --validation-icon-label: "Error";
  }

input[data-state="invalid"]:not(.does-not-exist)::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3e%3cpath d='M12 9v4'/%3e%3ccircle cx='12' cy='17' r='1'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-error);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: shake 0.5s ease-in-out;
    animation: var(--animation-error-shake);
    /* Accessibility support */
    --validation-icon-label: "Error";
  }

select[data-state="invalid"]:not(.does-not-exist)::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3e%3cpath d='M12 9v4'/%3e%3ccircle cx='12' cy='17' r='1'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-error);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: shake 0.5s ease-in-out;
    animation: var(--animation-error-shake);
    /* Accessibility support */
    --validation-icon-label: "Error";
  }

textarea[data-state="invalid"]:not(.does-not-exist)::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3e%3cpath d='M12 9v4'/%3e%3ccircle cx='12' cy='17' r='1'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-error);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: shake 0.5s ease-in-out;
    animation: var(--animation-error-shake);
    /* Accessibility support */
    --validation-icon-label: "Error";
  }

.form-control input[data-state="invalid"]::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3e%3cpath d='M12 9v4'/%3e%3ccircle cx='12' cy='17' r='1'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-error);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: shake 0.5s ease-in-out;
    animation: var(--animation-error-shake);
    /* Accessibility support */
    --validation-icon-label: "Error";
  }

.form-control select[data-state="invalid"]::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3e%3cpath d='M12 9v4'/%3e%3ccircle cx='12' cy='17' r='1'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-error);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: shake 0.5s ease-in-out;
    animation: var(--animation-error-shake);
    /* Accessibility support */
    --validation-icon-label: "Error";
  }

.form-control textarea[data-state="invalid"]::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3e%3cpath d='M12 9v4'/%3e%3ccircle cx='12' cy='17' r='1'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-error);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: shake 0.5s ease-in-out;
    animation: var(--animation-error-shake);
    /* Accessibility support */
    --validation-icon-label: "Error";
  }

.input[data-state="warning"]:not(does-not-exist)::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3e%3cline x1='12' x2='12' y1='9' y2='13'/%3e%3ccircle cx='12' cy='17' r='1'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-warning);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: shake 0.5s ease-in-out;
    animation: var(--animation-error-shake);
    /* Accessibility support */
    --validation-icon-label: "Warning";
  }

input[data-state="warning"]:not(.does-not-exist)::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3e%3cline x1='12' x2='12' y1='9' y2='13'/%3e%3ccircle cx='12' cy='17' r='1'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-warning);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: shake 0.5s ease-in-out;
    animation: var(--animation-error-shake);
    /* Accessibility support */
    --validation-icon-label: "Warning";
  }

select[data-state="warning"]:not(.does-not-exist)::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3e%3cline x1='12' x2='12' y1='9' y2='13'/%3e%3ccircle cx='12' cy='17' r='1'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-warning);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: shake 0.5s ease-in-out;
    animation: var(--animation-error-shake);
    /* Accessibility support */
    --validation-icon-label: "Warning";
  }

textarea[data-state="warning"]:not(.does-not-exist)::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3e%3cline x1='12' x2='12' y1='9' y2='13'/%3e%3ccircle cx='12' cy='17' r='1'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-warning);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: shake 0.5s ease-in-out;
    animation: var(--animation-error-shake);
    /* Accessibility support */
    --validation-icon-label: "Warning";
  }

.form-control input[data-state="warning"]::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3e%3cline x1='12' x2='12' y1='9' y2='13'/%3e%3ccircle cx='12' cy='17' r='1'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-warning);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: shake 0.5s ease-in-out;
    animation: var(--animation-error-shake);
    /* Accessibility support */
    --validation-icon-label: "Warning";
  }

.form-control select[data-state="warning"]::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3e%3cline x1='12' x2='12' y1='9' y2='13'/%3e%3ccircle cx='12' cy='17' r='1'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-warning);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: shake 0.5s ease-in-out;
    animation: var(--animation-error-shake);
    /* Accessibility support */
    --validation-icon-label: "Warning";
  }

.form-control textarea[data-state="warning"]::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3e%3cline x1='12' x2='12' y1='9' y2='13'/%3e%3ccircle cx='12' cy='17' r='1'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-warning);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: shake 0.5s ease-in-out;
    animation: var(--animation-error-shake);
    /* Accessibility support */
    --validation-icon-label: "Warning";
  }

.input[data-state="valid"]:not(does-not-exist)::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 6 9 17l-5-5'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-success);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: bounce 0.6s ease;
    animation: var(--animation-success-bounce);
    /* Accessibility support */
    --validation-icon-label: "Valid";
  }

input[data-state="valid"]:not(.does-not-exist)::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 6 9 17l-5-5'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-success);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: bounce 0.6s ease;
    animation: var(--animation-success-bounce);
    /* Accessibility support */
    --validation-icon-label: "Valid";
  }

select[data-state="valid"]:not(.does-not-exist)::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 6 9 17l-5-5'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-success);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: bounce 0.6s ease;
    animation: var(--animation-success-bounce);
    /* Accessibility support */
    --validation-icon-label: "Valid";
  }

textarea[data-state="valid"]:not(.does-not-exist)::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 6 9 17l-5-5'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-success);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: bounce 0.6s ease;
    animation: var(--animation-success-bounce);
    /* Accessibility support */
    --validation-icon-label: "Valid";
  }

.form-control input[data-state="valid"]::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 6 9 17l-5-5'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-success);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: bounce 0.6s ease;
    animation: var(--animation-success-bounce);
    /* Accessibility support */
    --validation-icon-label: "Valid";
  }

.form-control select[data-state="valid"]::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 6 9 17l-5-5'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-success);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: bounce 0.6s ease;
    animation: var(--animation-success-bounce);
    /* Accessibility support */
    --validation-icon-label: "Valid";
  }

.form-control textarea[data-state="valid"]::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 6 9 17l-5-5'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-success);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: bounce 0.6s ease;
    animation: var(--animation-success-bounce);
    /* Accessibility support */
    --validation-icon-label: "Valid";
  }

.input[data-state="info"]:not(does-not-exist)::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cpath d='M12 16v-4'/%3e%3cpath d='M12 8h.01'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-info);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Accessibility support */
    --validation-icon-label: "Info";
  }

input[data-state="info"]:not(.does-not-exist)::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cpath d='M12 16v-4'/%3e%3cpath d='M12 8h.01'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-info);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Accessibility support */
    --validation-icon-label: "Info";
  }

select[data-state="info"]:not(.does-not-exist)::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cpath d='M12 16v-4'/%3e%3cpath d='M12 8h.01'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-info);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Accessibility support */
    --validation-icon-label: "Info";
  }

textarea[data-state="info"]:not(.does-not-exist)::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cpath d='M12 16v-4'/%3e%3cpath d='M12 8h.01'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-info);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Accessibility support */
    --validation-icon-label: "Info";
  }

.form-control input[data-state="info"]::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cpath d='M12 16v-4'/%3e%3cpath d='M12 8h.01'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-info);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Accessibility support */
    --validation-icon-label: "Info";
  }

.form-control select[data-state="info"]::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cpath d='M12 16v-4'/%3e%3cpath d='M12 8h.01'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-info);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Accessibility support */
    --validation-icon-label: "Info";
  }

.form-control textarea[data-state="info"]::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cpath d='M12 16v-4'/%3e%3cpath d='M12 8h.01'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-info);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Accessibility support */
    --validation-icon-label: "Info";
  }

.input:not(does-not-exist):has( + .validation-message) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

input:not(.does-not-exist):has( + .validation-message) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

select:not(.does-not-exist):has( + .validation-message) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

textarea:not(.does-not-exist):has( + .validation-message) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

.form-control input:has( + .validation-message) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

.form-control select:has( + .validation-message) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

.form-control textarea:has( + .validation-message) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

/* Enhanced autocomplete support */

input[autocomplete="email"],
input[autocomplete="username"],
input[autocomplete="name"],
input[autocomplete="given-name"],
input[autocomplete="family-name"],
input[autocomplete="tel"],
input[autocomplete="url"],
input[autocomplete="postal-code"],
input[autocomplete="address-level1"],
input[autocomplete="address-level2"],
input[autocomplete="street-address"] {
  /* Enhanced autocomplete styling for better UX */
  transition:
    250ms ease-in-out, border-color 250ms ease-in-out, box-shadow 250ms ease-in-out, background-color 250ms ease-in-out;
  transition:
    var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), background-color var(--transition-normal);
}

/* Form control wrapper - Enhanced accessibility */

/* Skip link support for screen readers */

.form-control::before {
    content: "";
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

/* Enhanced focus management */

.form-control:has(input:focus) label {
      outline: 2px solid var(--primary-500);
      outline-offset: 2px;
      border-radius: 2px;
    }

/* -----------------------------------------------
  TEXTAREA STYLES - REFACTORED
  ----------------------------------------------- */

textarea {
  background-color: var(--input-background);
  color: light-dark(var(--slate-900), var(--slate-50));
  font-size: 0.875rem;
  font-size: var(--input-font-size);
  line-height: 1.5;
  margin: 0;
  padding: 0.5rem 0.5rem;
  padding: var(--input-padding);
  transition: 250ms ease-in-out, border-color 250ms ease-in-out, box-shadow 250ms ease-in-out;
  transition: var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  width: 100%;
  border: 1px solid var(--input-border-color);
  border-radius: 0.25rem;
  border-radius: var(--radius-sm);
  height: 2.5rem;
  height: var(--input-height-default);
  position: relative;
  /* State management via CSS variables */
  border-color: var(--validation-border, var(--input-border-color));
}

textarea::-moz-placeholder {
    color: light-dark(var(--slate-400), var(--slate-500));
    font-style: italic;
    opacity: 1;
    -moz-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
    -moz-transition: opacity var(--transition-normal);
    transition: opacity var(--transition-normal);
  }

textarea::placeholder {
    color: light-dark(var(--slate-400), var(--slate-500));
    font-style: italic;
    opacity: 1;
    transition: opacity 250ms ease-in-out;
    transition: opacity var(--transition-normal);
  }

textarea:focus {
    border-color: var(--validation-focus, var(--primary-500));
    /* Progressive enhancement with fallback */
    box-shadow: 0 0 0 2px #0d9488;
    box-shadow: 0 0 0 2px var(--focus-ring-color, rgba(59, 130, 246, 0.2));
    
    /* Enhanced oklch support with fallback */
  }

@supports (color: oklch(0.5 0.2 180)) {

textarea:focus {
      box-shadow: 0 0 0 2px light-dark(
        oklch(from var(--primary-500) l c h / 0.2), 
        oklch(from var(--primary-400) l c h / 0.2)
      );
  }
    }

textarea:focus {
    
    /* Accessibility: Ensure visible focus indicator */
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

/* Enhanced keyboard navigation support */

textarea:disabled {
    background-color: light-dark(var(--slate-100), var(--slate-800));
    border-color: light-dark(var(--slate-200), var(--slate-700));
    color: light-dark(var(--slate-500), var(--slate-500));
    cursor: not-allowed;
    opacity: 0.7;
  }

/* Loading state */

textarea[data-state="loading"] {
    position: relative;
    padding-right: calc(0.75rem + 1rem + 0.5rem);
    padding-right: calc(var(--input-padding-x) + var(--validation-loading-size) + var(--spacing-xs));
  }

textarea[data-state="loading"]::after {
      content: "";
      position: absolute;
      right: 0.5rem;
      right: var(--gap-xs);
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
      width: var(--validation-loading-size);
      height: 1rem;
      height: var(--validation-loading-size);
      border: 2px solid light-dark(var(--slate-300), var(--slate-600));
      border-top-color: var(--primary-500);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      animation: var(--animation-loading-spin);
    }

/* Validation states */

textarea[data-state="invalid"] {
    border-color: rgb(197, 54, 55);
    border-color: var(--validation-error);
  }

textarea[data-state="invalid"]:focus {
      outline-color: rgb(197, 54, 55);
      outline-color: var(--validation-error);
      box-shadow: 0 0 0 3px light-dark(
        oklch(from var(--error-500) l c h / 0.3),
        oklch(from var(--error-400) l c h / 0.3)
      );
    }

textarea[data-state="valid"] {
    border-color: rgb(5, 137, 62);
    border-color: var(--validation-success);
  }

textarea[data-state="valid"]:focus {
      outline-color: rgb(5, 137, 62);
      outline-color: var(--validation-success);
    }

textarea[data-state="warning"] {
    border-color: rgb(148, 105, 0);
    border-color: color(display-p3 0.57061 0.41036 0);
    border-color: var(--validation-warning);
  }

textarea[data-state="warning"]:focus {
      outline-color: rgb(148, 105, 0);
      outline-color: color(display-p3 0.57061 0.41036 0);
      outline-color: var(--validation-warning);
    }

textarea[data-state="info"] {
    border-color: rgb(0, 126, 154);
    border-color: color(display-p3 0 0.4978 0.63794);
    border-color: var(--validation-info);
  }

textarea[data-state="info"]:focus {
      outline-color: rgb(0, 126, 154);
      outline-color: color(display-p3 0 0.4978 0.63794);
      outline-color: var(--validation-info);
    }

/* Enhanced validation icons with accessibility support */

textarea[data-state="invalid"]::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3e%3cpath d='M12 9v4'/%3e%3ccircle cx='12' cy='17' r='1'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-error);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: shake 0.5s ease-in-out;
    animation: var(--animation-error-shake);
    /* Accessibility support */
    --validation-icon-label: "Error";
  }

textarea[data-state="warning"]::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3e%3cline x1='12' x2='12' y1='9' y2='13'/%3e%3ccircle cx='12' cy='17' r='1'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-warning);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: shake 0.5s ease-in-out;
    animation: var(--animation-error-shake);
    /* Accessibility support */
    --validation-icon-label: "Warning";
  }

textarea[data-state="valid"]::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 6 9 17l-5-5'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-success);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: bounce 0.6s ease;
    animation: var(--animation-success-bounce);
    /* Accessibility support */
    --validation-icon-label: "Valid";
  }

textarea[data-state="info"]::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    width: var(--validation-icon-size);
    height: 1.125rem;
    height: var(--validation-icon-size);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cpath d='M12 16v-4'/%3e%3cpath d='M12 8h.01'/%3e%3c/svg%3e");
    background-image: var(--validation-icon-info);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Accessibility support */
    --validation-icon-label: "Info";
  }

textarea:has( + .validation-message) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

textarea {
  height: auto;
  min-height: calc(2.5rem * 2);
  min-height: calc(var(--input-height-default) * 2);
  resize: vertical;
}

textarea[data-state="loading"] {
    padding-right: calc(
      0.75rem + 1rem +
        0.5rem
    );
    padding-right: calc(
      var(--input-padding-x) + var(--validation-loading-size) +
        var(--spacing-xs)
    );
  }

/* -----------------------------------------------
  CHECKBOX AND RADIO STYLES - REFACTORED
  ----------------------------------------------- */

input[type="checkbox"],
input[type="radio"] {
  width: 1.5rem;
  width: var(--input-checkbox-size);
  height: 1.5rem;
  height: var(--input-checkbox-size);
  padding: 0;
  margin-left: 0.625rem;
  margin-right: 0.625rem;
  margin-left: var(--spacing-x);
  margin-right: var(--spacing-x);
  border: var(--input-border);
  cursor: pointer;
  transition: 250ms ease-in-out;
  transition: var(--transition-normal);
}

input[type="checkbox"]:checked {
    background-color: var(--success-500);
    border-color: var(--success-500);
  }

input[type="radio"]:checked {
    background-color: var(--success-500);
    border-color: var(--success-500);
  }

input[type="checkbox"]:focus,input[type="radio"]:focus {
    box-shadow: 0 0 0 3px
      light-dark(
        oklch(from var(--primary-500) l c h / 0.3),
        oklch(from var(--primary-400) l c h / 0.3)
      );
  }

input[type="checkbox"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

input[type="radio"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

input[type="checkbox"]:disabled  + label {
      opacity: 0.8;
      cursor: not-allowed;
    }

input[type="radio"]:disabled  + label {
      opacity: 0.8;
      cursor: not-allowed;
    }

input[data-state="invalid"][type="checkbox"],input[data-state="invalid"][type="radio"] {
    border-color: rgb(197, 54, 55);
    border-color: var(--validation-error);
  }

input[data-state="invalid"][type="checkbox"]:checked {
      background-color: rgb(197, 54, 55);
      background-color: var(--validation-error);
      border-color: rgb(197, 54, 55);
      border-color: var(--validation-error);
    }

input[data-state="invalid"][type="radio"]:checked {
      background-color: rgb(197, 54, 55);
      background-color: var(--validation-error);
      border-color: rgb(197, 54, 55);
      border-color: var(--validation-error);
    }

input[data-state="valid"][type="checkbox"],input[data-state="valid"][type="radio"] {
    border-color: rgb(5, 137, 62);
    border-color: var(--validation-success);
  }

input[data-state="valid"][type="checkbox"]:checked {
      background-color: rgb(5, 137, 62);
      background-color: var(--validation-success);
      border-color: rgb(5, 137, 62);
      border-color: var(--validation-success);
    }

input[data-state="valid"][type="radio"]:checked {
      background-color: rgb(5, 137, 62);
      background-color: var(--validation-success);
      border-color: rgb(5, 137, 62);
      border-color: var(--validation-success);
    }

/* Radio specific styles */

input[type="radio"] {
  border-radius: 50%;
}

input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  }

/* Checkbox specific styles */

input[type="checkbox"] {
  border-radius: 0.25rem;
  border-radius: var(--input-border-radius);
}

input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }

/* ===================================
   UNIFIED VALIDATION SYSTEM - REFACTORED
   =================================== */

/* Base validation styles for all inputs - handles native HTML5 validation override */

/* Native HTML5 validation takes precedence over data-state attributes */

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):invalid:not(:-moz-placeholder) {
    border-color: rgb(197, 54, 55);
    border-color: var(--validation-error);
  }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):invalid:not(:placeholder-shown) {
    border-color: rgb(197, 54, 55);
    border-color: var(--validation-error);
  }

select:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):invalid:not(:-moz-placeholder) {
    border-color: rgb(197, 54, 55);
    border-color: var(--validation-error);
  }

select:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):invalid:not(:placeholder-shown) {
    border-color: rgb(197, 54, 55);
    border-color: var(--validation-error);
  }

textarea:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):invalid:not(:-moz-placeholder) {
    border-color: rgb(197, 54, 55);
    border-color: var(--validation-error);
  }

textarea:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):invalid:not(:placeholder-shown) {
    border-color: rgb(197, 54, 55);
    border-color: var(--validation-error);
  }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):valid:not(:-moz-placeholder) {
    border-color: rgb(5, 137, 62);
    border-color: var(--validation-success);
  }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):valid:not(:placeholder-shown) {
    border-color: rgb(5, 137, 62);
    border-color: var(--validation-success);
  }

select:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):valid:not(:-moz-placeholder) {
    border-color: rgb(5, 137, 62);
    border-color: var(--validation-success);
  }

select:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):valid:not(:placeholder-shown) {
    border-color: rgb(5, 137, 62);
    border-color: var(--validation-success);
  }

textarea:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):valid:not(:-moz-placeholder) {
    border-color: rgb(5, 137, 62);
    border-color: var(--validation-success);
  }

textarea:not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):not(.does-not-exist):valid:not(:placeholder-shown) {
    border-color: rgb(5, 137, 62);
    border-color: var(--validation-success);
  }

/* ===================================
   FORM CONTROL AND LAYOUT STYLES - REFACTORED
  =================================== */

/* Form control wrapper - Unified validation system */

.form-control {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  gap: var(--input-gap);
  position: relative;
  margin-bottom: 1rem;
  margin-bottom: var(--spacing-base);

  /* Consolidated validation states */
}

.form-control[data-state="invalid"] label {
      color: rgb(197, 54, 55);
      color: var(--validation-error);
    }

.form-control[data-state="invalid"] input,.form-control[data-state="invalid"] select,.form-control[data-state="invalid"] textarea {
      border-color: rgb(197, 54, 55);
      border-color: var(--validation-error);
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
      box-shadow: 0 0 0 2px var(--validation-error-bg, rgba(239, 68, 68, 0.1));

      /* Progressive enhancement with oklch fallback */
    }

@supports (color: oklch(0.5 0.2 180)) {

.form-control[data-state="invalid"] input,.form-control[data-state="invalid"] select,.form-control[data-state="invalid"] textarea {
        box-shadow: 0 0 0 2px
          light-dark(
            oklch(from var(--error-500) l c h / 0.1),
            oklch(from var(--error-400) l c h / 0.1)
          );
    }
      }

.form-control[data-state="valid"] label {
      color: rgb(5, 137, 62);
      color: var(--validation-success);
      font-weight: 600;
    }

.form-control[data-state="valid"] input,.form-control[data-state="valid"] select,.form-control[data-state="valid"] textarea {
      border-color: rgb(5, 137, 62);
      border-color: var(--validation-success);
      background-color: rgba(16, 185, 129, 0.05);
      background-color: var(--validation-success-bg, rgba(16, 185, 129, 0.05));
    }

.form-control[data-state="warning"] label {
      color: rgb(148, 105, 0);
      color: color(display-p3 0.57061 0.41036 0);
      color: var(--validation-warning);
    }

.form-control[data-state="warning"] input,.form-control[data-state="warning"] select,.form-control[data-state="warning"] textarea {
      border-color: rgb(148, 105, 0);
      border-color: color(display-p3 0.57061 0.41036 0);
      border-color: var(--validation-warning);
    }

.form-control[data-state="info"] label {
      color: rgb(0, 126, 154);
      color: color(display-p3 0 0.4978 0.63794);
      color: var(--validation-info);
    }

.form-control[data-state="info"] input,.form-control[data-state="info"] select,.form-control[data-state="info"] textarea {
      border-color: rgb(0, 126, 154);
      border-color: color(display-p3 0 0.4978 0.63794);
      border-color: var(--validation-info);
    }

/* Focus state - label styling */

.form-control:has(input:focus) label {
      color: var(--primary-500);
      font-weight: 600;
    }

.form-control > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    gap: var(--spacing-base);
  }

.form-check {
  flex-direction: row;
  align-items: flex-end;
  padding-bottom: 0.5rem;
}

.radiobox,
.checkbox {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 1rem;
  gap: var(--spacing-base);
  margin-bottom: 0.25rem;
  margin-bottom: var(--spacing-xxs);
  cursor: pointer;
  transition: 250ms ease-in-out;
  transition: var(--transition-normal);
  padding: 0.5rem 0.75rem;
  padding: var(--spacing-xs) var(--spacing-s);
}

.radiobox:hover,.checkbox:hover {
    background-color: light-dark(var(--slate-50), var(--slate-800));
    border-color: var(--primary-500);
  }

.radiobox:focus-within {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 0 2px var(--primary-500-bg, rgba(59, 130, 246, 0.1));
  }

.checkbox:focus-within {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 0 2px var(--primary-500-bg, rgba(59, 130, 246, 0.1));
  }

.radiobox[data-state="invalid"],.checkbox[data-state="invalid"] {
    border-color: rgb(197, 54, 55);
    border-color: var(--validation-error);
  }

.radiobox[data-state="valid"],.checkbox[data-state="valid"] {
    border-color: rgb(5, 137, 62);
    border-color: var(--validation-success);
  }

.checkbox {
  padding: 0.5rem 0.75rem;
  padding: var(--spacing-xs) var(--spacing-s);
  /* border-radius: var(--border-radius-sm);
  background-color: var(--input-background);
  border: var(--input-border); */
}

.checkbox:hover {
    background-color: light-dark(var(--slate-50), var(--slate-800));
    border-color: var(--primary-500);
  }

.checkbox:focus-within {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 0 2px var(--primary-500-bg, rgba(59, 130, 246, 0.1));
  }

.checkbox[data-state="invalid"] {
    border-color: rgb(197, 54, 55);
    border-color: var(--validation-error);
  }

.checkbox[data-state="valid"] {
    border-color: rgb(5, 137, 62);
    border-color: var(--validation-success);
  }

.checkbox-control,
.radio-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  margin-bottom: var(--input-margin-block);
}

/* Radio and Checkbox Item Styles */

.radio-item,
.checkbox-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.radio-item input[type="radio"],
.checkbox-item input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

.radio-item label,
.checkbox-item label {
  margin: 0;
  cursor: pointer;
  font-size: 0.875rem;
  font-size: var(--input-font-size);
  color: light-dark(var(--slate-900), var(--slate-50));
}

.h-checkbox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1rem;
  gap: var(--spacing-base);
  padding-top: 1.5rem;
}

/* Labels */

.label,
label:not(.login-container__label):not(form[name="registration_form"] label),
.form-control label {
  color: light-dark(var(--slate-900), var(--slate-50));
  font-size: 0.875rem;
  font-size: var(--input-font-size);
  font-weight: 700;
  line-height: 1.5;
}

.form-help {
  color: light-dark(var(--slate-600), var(--slate-400));
  font-size: 0.75rem;
  font-size: var(--input-font-size-small);
  margin-top: 0.25rem;
}

/* -----------------------------------------------
  ERROR STYLES - LEGACY SUPPORT - REFACTORED
  ----------------------------------------------- */

.field-error,
.input-error,
.form-control.has-error {
  border-color: var(--error-400);
}

.field-error:not(.does-not-exist):focus,.input-error:not(.does-not-exist):focus,.form-control.has-error:focus {
    box-shadow: 0 0 0 3px
      light-dark(
        oklch(from var(--error-500) l c h / 0.3),
        oklch(from var(--error-400) l c h / 0.3)
      );
    outline: 2px solid rgb(197, 54, 55);
    outline: 2px solid var(--validation-error);
    outline-offset: 2px;
  }

.form-error,
.is-invalid,
.error-message {
  color: rgb(197, 54, 55);
  color: var(--validation-error);
  font-size: 0.75rem;
  font-size: var(--input-font-size-small);
  font-weight: 500;
}

.error-message {
  display: flex;
  gap: 0.75rem;
  gap: var(--spacing-s);
  align-items: flex-start;
  padding: 0.75rem;
  padding: var(--spacing-s);
  border: 1px solid currentColor;
  border-radius: 0.25rem;
  border-radius: var(--border-radius-small);
  background: color-mix(in oklab, var(--validation-error-bg) 70%, transparent);
}

.error-message__icon {
  flex-shrink: 0;
}

.error-message__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  gap: var(--spacing-xs);
}

.error-message__title {
  margin: 0;
  font-size: 1rem;
  font-size: var(--font-size-3);
  color: var(--color-text-heading);
}

.error-message__description {
  margin: 0;
}

.error-message__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  gap: var(--spacing-xs);
}

/* ===================================
  ENHANCED VALIDATION MESSAGE SYSTEM - REFACTORED
  =================================== */

.validation-message,
.form-control .validation-message {
  margin: 0;
  padding: 0.375rem 0.75rem;
  padding: var(--validation-message-gap) var(--spacing-s);
  font-size: 0.75rem;
  font-size: var(--input-font-size-small);
  line-height: 1.4;
  border-top: none;
  position: relative;
}

.validation-success.validation-message:not(.does-not-exist),.form-control .validation-message.validation-success {
    color: rgb(5, 137, 62);
    color: var(--validation-success);
  }

.validation-error.validation-message:not(.does-not-exist),.form-control .validation-message.validation-error {
    color: rgb(197, 54, 55);
    color: var(--validation-error);
  }

.validation-warning.validation-message:not(.does-not-exist),.form-control .validation-message.validation-warning {
    color: rgb(148, 105, 0);
    color: color(display-p3 0.57061 0.41036 0);
    color: var(--validation-warning);
  }

.validation-info.validation-message:not(.does-not-exist),.form-control .validation-message.validation-info {
    color: rgb(0, 126, 154);
    color: color(display-p3 0 0.4978 0.63794);
    color: var(--validation-info);
  }

/* ===================================
  FORM GROUP ENHANCEMENTS - CONSOLIDATED
  =================================== */

.form-group {
  position: relative;
  margin-bottom: 1rem;
  margin-bottom: var(--spacing-base);

  /* Consolidated validation states with accessibility */
}

.form-group[data-state="valid"] .form-label {
      color: rgb(5, 137, 62);
      color: var(--validation-success);
      font-weight: 600;
    }

.form-group[data-state="invalid"] .form-label {
      color: rgb(197, 54, 55);
      color: var(--validation-error);
    }

.form-group[data-state="invalid"] input,.form-group[data-state="invalid"] select,.form-group[data-state="invalid"] textarea {
      border-color: rgb(197, 54, 55);
      border-color: var(--validation-error);
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
      box-shadow: 0 0 0 2px var(--validation-error-bg, rgba(239, 68, 68, 0.1));

      /* Progressive enhancement */
    }

@supports (color: oklch(0.5 0.2 180)) {

.form-group[data-state="invalid"] input,.form-group[data-state="invalid"] select,.form-group[data-state="invalid"] textarea {
        box-shadow: 0 0 0 2px
          light-dark(
            oklch(from var(--error-500) l c h / 0.1),
            oklch(from var(--error-400) l c h / 0.1)
          );
    }
      }

.form-group[data-state="warning"] .form-label {
      color: rgb(148, 105, 0);
      color: color(display-p3 0.57061 0.41036 0);
      color: var(--validation-warning);
    }

.form-group[data-state="warning"] input,.form-group[data-state="warning"] select,.form-group[data-state="warning"] textarea {
      border-color: rgb(148, 105, 0);
      border-color: color(display-p3 0.57061 0.41036 0);
      border-color: var(--validation-warning);
    }

.form-group[data-state="info"] .form-label {
      color: rgb(0, 126, 154);
      color: color(display-p3 0 0.4978 0.63794);
      color: var(--validation-info);
    }

.form-group[data-state="info"] input,.form-group[data-state="info"] select,.form-group[data-state="info"] textarea {
      border-color: rgb(0, 126, 154);
      border-color: color(display-p3 0 0.4978 0.63794);
      border-color: var(--validation-info);
    }

/* ===================================
  FORM LABEL - MOBILE-FIRST BREAKPOINTS
  =================================== */

.form-label,
.grid__field .form-label {
  display: block;
  margin-bottom: 0.375rem;
  margin-bottom: var(--validation-message-gap);
  font-weight: 500;
  color: light-dark(var(--slate-700), var(--slate-300));
  transition: all 250ms ease-in-out;
  transition: all var(--transition-normal);
  cursor: pointer;
}

/* ===================================
  UPLOAD BUTTON STYLES - ENHANCED
  =================================== */

.upload-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background-color: var(--primary-600);
  color: white;
  border: none;
  border-radius: 0;
  border-radius: var(--border-radius-none);
  font-size: 0.875rem;
  font-size: var(--input-font-size);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;

  /* State-based styling */
}

.upload-button[data-state="invalid"] {
    background-color: rgb(197, 54, 55);
    background-color: var(--validation-error);
  }

.upload-button[data-state="invalid"]:hover {
      background-color: var(--error-600);
    }

.upload-button[data-state="valid"] {
    background-color: rgb(5, 137, 62);
    background-color: var(--validation-success);
  }

.upload-button[data-state="valid"]:hover {
      background-color: var(--success-600);
    }

.upload-button[data-state="warning"] {
    background-color: rgb(148, 105, 0);
    background-color: color(display-p3 0.57061 0.41036 0);
    background-color: var(--validation-warning);
  }

.upload-button[data-state="warning"]:hover {
      background-color: var(--warning-600);
    }

.upload-button[data-state="info"] {
    background-color: rgb(0, 126, 154);
    background-color: color(display-p3 0 0.4978 0.63794);
    background-color: var(--validation-info);
  }

.upload-button[data-state="info"]:hover {
      background-color: var(--info-600);
    }

.upload-button:disabled {
    background-color: var(--gray-300);
    color: var(--gray-500);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

.upload-button:disabled:hover {
      background-color: var(--gray-300);
      transform: none;
      box-shadow: none;
    }

.upload-button .upload-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
  }

.upload-button .upload-text {
    white-space: nowrap;
  }

.upload-button.is-loading {
    pointer-events: none;
    opacity: 0.7;
    position: relative;
  }

.upload-button.is-loading::after {
      content: "";
      position: absolute;
      right: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      width: 1rem;
      height: 1rem;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: white;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      animation: var(--animation-loading-spin);
    }

/* Mobile-First Breakpoints for Upload Button */

@media (max-width: 768px) {
  .upload-button {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-size: var(--font-size-2);
    gap: 0.375rem;
  }

    .upload-button .upload-icon {
      width: 1rem;
      height: 1rem;
    }

    .upload-button .upload-text {
      font-size: 0.875rem;
      font-size: var(--input-font-size);
    }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .upload-button {
    padding: 0.5625rem 1.125rem;
    font-size: 0.875rem;
    font-size: var(--font-size-2);
    gap: 0.4375rem;
  }

    .upload-button .upload-icon {
      width: 1.125rem;
      height: 1.125rem;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .upload-button {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-size: var(--font-size-2);
    gap: 0.5rem;
  }

    .upload-button .upload-icon {
      width: 1.25rem;
      height: 1.25rem;
    }
}

@media (min-width: 1280px) and (max-width: 1439px) {
  .upload-button {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-size: var(--font-size-2);
    gap: 0.5rem;
  }
}

@media (min-width: 1440px) {
  .upload-button {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-size: var(--font-size-2);
    gap: 0.625rem;
  }

    .upload-button .upload-icon {
      width: 1.375rem;
      height: 1.375rem;
    }
}

/* ===================================
  RANGE INPUT STYLES
  =================================== */

input[type="range"] {
  height: 1.5rem;
  height: var(--input-checkbox-size);
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
            appearance: none;
    height: 1.5rem;
    height: var(--input-checkbox-size);
    width: 1.5rem;
    width: var(--input-checkbox-size);
    background-color: var(--primary-500);
    border-radius: 50%;
    cursor: pointer;
    margin-top: -0.5rem;
    -webkit-transition: background-color 250ms ease-in-out;
    transition: background-color 250ms ease-in-out;
    -webkit-transition: background-color var(--transition-normal);
    transition: background-color var(--transition-normal);
  }

input[type="range"]::-moz-range-thumb {
    height: 1.5rem;
    height: var(--input-checkbox-size);
    width: 1.5rem;
    width: var(--input-checkbox-size);
    background-color: var(--primary-500);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    -moz-transition: background-color 250ms ease-in-out;
    transition: background-color 250ms ease-in-out;
    -moz-transition: background-color var(--transition-normal);
    transition: background-color var(--transition-normal);
  }

input[type="range"]::-webkit-slider-runnable-track {
    height: 0.25rem;
    background-color: light-dark(var(--slate-200), var(--slate-700));
    border-radius: 9999px;
  }

input[type="range"]::-moz-range-track {
    height: 0.25rem;
    background-color: light-dark(var(--slate-200), var(--slate-700));
    border-radius: 9999px;
  }

/* Validation states for range */

input[type="range"][data-state="invalid"]::-webkit-slider-thumb {
    background-color: rgb(197, 54, 55);
    background-color: var(--validation-error);
  }

input[type="range"][data-state="invalid"]::-moz-range-thumb {
    background-color: rgb(197, 54, 55);
    background-color: var(--validation-error);
  }

input[type="range"][data-state="valid"]::-webkit-slider-thumb {
    background-color: rgb(5, 137, 62);
    background-color: var(--validation-success);
  }

input[type="range"][data-state="valid"]::-moz-range-thumb {
    background-color: rgb(5, 137, 62);
    background-color: var(--validation-success);
  }

/* ===================================
  DATE/TIME INPUT STYLES
  =================================== */

input[type="datetime-local"],
input[type="date"],
input[type="time"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--input-background);
  color: light-dark(var(--slate-900), var(--slate-50));
  font-size: 0.875rem;
  font-size: var(--input-font-size);
  line-height: 1.25;
  margin: 0;
  padding: 0.5rem 0.5rem;
  padding: var(--input-padding);
  transition: 250ms ease-in-out;
  transition: var(--transition-normal);
  width: 100%;
  border: 1px solid var(--input-border-color);
  border-radius: 0;
  border-radius: var(--border-radius-none);
  height: -moz-fit-content;
  height: fit-content;
}

input[data-state="invalid"][type="datetime-local"],input[data-state="invalid"][type="date"],input[data-state="invalid"][type="time"] {
    border-color: rgb(197, 54, 55);
    border-color: var(--validation-error);
  }

input[data-state="invalid"][type="datetime-local"]:focus,input[data-state="invalid"][type="date"]:focus,input[data-state="invalid"][type="time"]:focus {
      outline-color: rgb(197, 54, 55);
      outline-color: var(--validation-error);
      box-shadow: 0 0 0 3px
        light-dark(
          oklch(from var(--error-500) l c h / 0.3),
          oklch(from var(--error-400) l c h / 0.3)
        );
    }

input[data-state="valid"][type="datetime-local"],input[data-state="valid"][type="date"],input[data-state="valid"][type="time"] {
    border-color: rgb(5, 137, 62);
    border-color: var(--validation-success);
  }

input[data-state="valid"][type="datetime-local"]:focus,input[data-state="valid"][type="date"]:focus,input[data-state="valid"][type="time"]:focus {
      outline-color: rgb(5, 137, 62);
      outline-color: var(--validation-success);
    }

/* ===================================
  SELECT STYLES - ENHANCED
  =================================== */

select {
  padding-right: calc(0.75rem + 2rem);
  padding-right: calc(var(--input-padding-x) + 2rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

select[multiple] {
    background-image: none;
    height: auto;
    padding: 0.5rem;
    padding: var(--input-padding-y);
  }

select[multiple] option {
      padding: 0.5rem 0.75rem;
      padding: var(--input-padding-y) var(--input-padding-x);
    }

select[multiple] option:checked {
        background-color: var(--primary-700);
        color: white;
      }

select[data-state="invalid"] {
    border-color: rgb(197, 54, 55);
    border-color: var(--validation-error);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23ef4444' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  }

select[data-state="invalid"]:focus {
      outline-color: rgb(197, 54, 55);
      outline-color: var(--validation-error);
      box-shadow: 0 0 0 3px
        light-dark(
          oklch(from var(--error-500) l c h / 0.3),
          oklch(from var(--error-400) l c h / 0.3)
        );
    }

select[data-state="valid"] {
    border-color: rgb(5, 137, 62);
    border-color: var(--validation-success);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2210b981' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  }

select[data-state="valid"]:focus {
      outline-color: rgb(5, 137, 62);
      outline-color: var(--validation-success);
    }

.pagination {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  gap: var(--spacing-base);
  margin-top: 1.5rem;
  margin-top: var(--spacing-l);
  align-items: center;
}

.pagination__results {
  color: light-dark(var(--slate-600), var(--slate-400));
  font-size: 0.875rem;
  font-size: var(--font-size-2);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--spacing-xs);
}

.pagination__nav {
  display: flex;
  justify-content: center;
  width: 100%;
}

.pagination__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.5rem;
  gap: var(--spacing-xs);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.pagination__item {
  margin: 0;
}

.pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(2.5rem - 0.5rem);
  min-width: calc(var(--spacing-xxl) - var(--spacing-xs));
  height: calc(2.5rem - 0.5rem);
  height: calc(var(--spacing-xxl) - var(--spacing-xs));
  padding: 0 calc(0.75rem - 0.25rem);
  padding: 0 calc(var(--spacing-s) - var(--spacing-xxs));
  color: light-dark(var(--slate-700), var(--slate-400));
  background-color: light-dark(var(--slate-50), var(--slate-800));
  -webkit-text-decoration: none;
  text-decoration: none;
  transition: all 150ms ease-in-out;
  transition: all var(--transition-fast);
  border-radius: 0.25rem;
  border-radius: var(--border-radius-small);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-weight: 500;
  font-size: calc(0.875rem - 0.125rem);
  font-size: calc(var(--font-size-2) - 0.125rem);
}

.pagination__link:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
  }

.pagination__link:hover:not(.pagination__link--disabled):not(.pagination__link--current) {
    color: var(--primary-700);
    background-color: light-dark(var(--slate-100), var(--slate-700));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-small);
  }

--current.pagination__link {
    color: white;
    background-color: var(--primary-600);
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    box-shadow: var(--shadow-medium);
  }

.pagination__item--active .pagination__link {
  color: light-dark(var(--slate-100), var(--slate-200));
  background-color: light-dark(var(--primary-600), var(--primary-700));
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  box-shadow: var(--shadow-medium);
}

.pagination__item--active --disabled.pagination__link {
    color: light-dark(var(--slate-500), var(--slate-500));
    background-color: transparent;
    pointer-events: none;
    opacity: 0.6;
  }

.pagination__item--active --prev.pagination__link,.pagination__item--active --next.pagination__link {
    padding: 0 calc(0.75rem - 0.25rem);
    padding: 0 calc(var(--spacing-s) - var(--spacing-xxs));
  }

.pagination__item--active --prev.pagination__link:hover:not(.pagination__link--disabled),.pagination__item--active --next.pagination__link:hover:not(.pagination__link--disabled) {
      color: var(--primary-700);
      background-color: light-dark(var(--slate-100), var(--slate-700));
    }

/* Responsive enhancements for larger screens */

@media (min-width: 769px) {
  .pagination {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .pagination__list {
    gap: 0.75rem;
    gap: var(--spacing-s);
  }

  .pagination__link {
    min-width: calc(2.5rem - 0.5rem);
    min-width: calc(var(--spacing-xxl) - var(--spacing-xs));
    height: calc(2.5rem - 0.5rem);
    height: calc(var(--spacing-xxl) - var(--spacing-xs));
  }
}

/* ===================================
   TOAST MESSAGES COMPONENT - MOBILE-FIRST BREAKPOINTS
   =================================== */

.toast-container {
    position: fixed;
    top: calc(2.5rem * 1.35);
    top: var(--navbar-header-height);
    right: 0;
    margin: 1rem;
    margin: var(--spacing-base);
    z-index: 15;
    z-index: var(--z-index-toast);
}

.toast {
    --_bg-color: var(--color-surface-secondary);
    --_color: var(--color-text);
    --_border-color: var(--color-border);
    --_close-color: var(--_color);
    min-width: clamp(250px, 10rem + 13.333vw, 22rem);
    min-width: clamp(var(--toast-min-width), 10rem + 13.333vw, 22rem);
    padding: 1rem;
    padding: var(--toast-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    gap: var(--spacing-s);
    line-height: 1.35;
    color: var(--_color);
    background-color: var(--_bg-color);
    border-left: 4px solid var(--_border-color);
    border-radius: 0.5rem;
    border-radius: var(--toast-border-radius);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    box-shadow: var(--shadow-extra-large);
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
    margin-bottom: 1rem;
}

.toast .toast__content {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        gap: var(--spacing-xs);
    }

.toast .toast__close {
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        gap: var(--button-icon-gap);
        font-size: 0.875rem;
        font-size: var(--button-font-size);
        font-weight: 400;
        font-weight: var(--font-weight-regular);
        line-height: 1.2;
        height: 2.5rem;
        height: var(--button-height);
        padding: 0 0.75rem;
        padding: 0 var(--button-padding-x);
        margin: 0;
        border-radius: 0.375rem;
        border-radius: var(--button-border-radius);
        border: 1px solid transparent;
        cursor: pointer;
        -webkit-text-decoration: none !important;
        text-decoration: none !important;
        transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
        transition: all var(--transition-fast) var(--ease-standard);
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
    }

.toast .toast__close:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.toast .toast__close[disabled] {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.toast .toast__close:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.toast .toast__close svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.toast .toast__close path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.toast .toast__close {
        border: none;
        color: var(--_close-color);
        font-size: 0.875rem;
        font-size: var(--font-size-2);
        cursor: pointer;
        width: 1.5rem;
        width: var(--toast-close-button-size);
        height: 1.5rem;
        height: var(--toast-close-button-size);
        padding: 0;
        background: transparent;
    }

.toast .toast__close::before { content: "×"; }

@media (max-width: 768px) {

.toast {
        min-width: max(12rem, min(90vw, 16rem));
        padding: 1rem;
        padding: var(--spacing-base);
        font-size: 0.75rem;
        font-size: var(--font-size-1);
}
    }

/* ===================================
   TOAST VARIANTS - USANDO CLASSES DO PROJETO
   =================================== */

/* Toast Success - Usando classes do projeto */

.toast-success {
    --_bg-color: var(--toast-success-bg);
    --_color: var(--toast-success-text);
    --_border-color: var(--toast-success-border);
    --_close-color: var(--toast-success-text);
}

.toast-success .toast__close:not(:disabled):hover {
            background-color: oklch(from var(--success-500) l c h / 0.14);
            color: var(--toast-success-text);
        }

/* Toast Info - Usando classes do projeto */

.toast-info,
.toast-notice {
    --_bg-color: var(--toast-info-bg);
    --_color: var(--toast-info-text);
    --_border-color: var(--toast-info-border);
    --_close-color: var(--toast-info-text);
}

.toast-info .toast__close:not(:disabled):hover {
            background-color: oklch(from var(--info-500) l c h / 0.14);
            color: var(--toast-info-text);
        }

.toast-notice .toast__close:not(:disabled):hover {
            background-color: oklch(from var(--info-500) l c h / 0.14);
            color: var(--toast-info-text);
        }

/* Toast Error - Usando classes do projeto */

.toast-error,
.toast-danger {
    --_bg-color: var(--toast-error-bg);
    --_color: var(--toast-error-text);
    --_border-color: var(--toast-error-border);
    --_close-color: var(--toast-error-text);
}

.toast-error .toast__close:not(:disabled):hover {
            background-color: oklch(from var(--error-500) l c h / 0.14);
            color: var(--toast-error-text);
        }

.toast-danger .toast__close:not(:disabled):hover {
            background-color: oklch(from var(--error-500) l c h / 0.14);
            color: var(--toast-error-text);
        }

/* Toast Warning - Usando classes do projeto */

.toast-warning {
    --_bg-color: var(--toast-warning-bg);
    --_color: var(--toast-warning-text);
    --_border-color: var(--toast-warning-border);
    --_close-color: var(--toast-warning-text);
}

.toast-warning .toast__close:not(:disabled):hover {
            background-color: oklch(from var(--warning-500) l c h / 0.14);
            color: var(--toast-warning-text);
        }

/* ===================================
   TOAST UTILITIES - CLASSES DO PROJETO
   =================================== */

/* Fixed positioning utilities */

.fixed {
    position: fixed;
}

.top-l {
    top: 2rem;
    top: var(--spacing-xl);
}

.right-l {
    right: 2rem;
    right: var(--spacing-xl);
}

.z-index-toast {
    z-index: 15;
    z-index: var(--z-index-toast);
}

/* Flexbox utilities */

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.gap-s {
    gap: 0.75rem;
    gap: var(--spacing-s);
}

/* Margin utilities */

.mb-xl {
    margin-bottom: 2.5rem;
    margin-bottom: var(--spacing-xxl);
}

/* ===================================
   TOAST ANIMATIONS - CLASSES DO PROJETO
   =================================== */

.fade-in {
    animation: fadeIn 250ms ease-in-out;
    animation: var(--animation-fade-in);
}

/* ===================================
   TOAST RESPONSIVE - CLASES DO PROJETO
   =================================== */

@media (max-width: 768px) {
    .toast-container {
        top: 1rem;
        top: var(--spacing-base);
        right: 1rem;
        right: var(--spacing-base);
        left: 1rem;
        left: var(--spacing-base);
    }
    
    .toast {
        min-width: 100%;
        max-width: 100%;
    }
}

/* Mixin definition */

.multi-steps--h {
    list-style: none;
    display: flex;
    width: 100%;
    counter-reset: stepNum;
}

.multi-steps--h  > li {
        counter-increment: stepNum;
        text-align: center;
        flex: 1;
        position: relative;
        color: var(--slate-800);
        font-size: 0.875rem;
        font-size: var(--font-size-2);
    }

.multi-steps--h > li:before {
            content: "✔";
            display: block;
            margin: 0 auto 4px;
            background-color: var(--step-background);
            width: 1.5rem;
            width: var(--spacing-l);
            height: 1.5rem;
            height: var(--spacing-l);
            line-height: 1.5rem;
            line-height: var(--spacing-l);
            text-align: center;
            font-weight: 600;
            font-weight: var(--font-weight-bold);
            border: 1px solid var(--success-500);
            border-radius: 50%;
            color: var(--success-500);
        }

.multi-steps--h > li:after {
            content: "";
            height: 2px;
            width: 100%;
            background-color: var(--step-background);
            position: absolute;
            top: 12px;
            left: 50%;
            z-index: -1;
        }

.multi-steps--h > li:last-child:after {
            display: none;
        }

.multi-steps--h > li.is-active:before {
		content: counter(stepNum);
		font-family: inherit;
		font-weight: 400;
		font-weight: var(--font-weight-regular);
	}

.multi-steps--h > li.is-active:after {
		background-color: var(--step-background);
	}

.multi-steps--h > li.is-active:before {
                border-color: var(--success-500);
            }

.multi-steps--h > li.is-active  ~ li {
                color: light-dark(var(--slate-700), var(--slate-300)); /* Improved contrast for accessibility */
            }

.multi-steps--h > li.is-active ~ li:before {
		content: counter(stepNum);
		font-family: inherit;
		font-weight: 400;
		font-weight: var(--font-weight-regular);
	}

.multi-steps--h > li.is-active ~ li:after {
		background-color: var(--step-background);
	}

.multi-steps--h > li.is-active ~ li:before {
                    background-color: var(--step-background);
                    border-color: var(--color-text--muted);
                    color: var(--step-foreground-light);
                }

.tracking-timeline-horizontal {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-x: auto;
    justify-content: space-between;
}

.tracking-timeline-step {
    flex: 1;
    min-width: 120px;
    position: relative;
    padding: 1rem 0.75rem;
    padding: var(--spacing-base) var(--spacing-s);
    text-align: center;
}

.tracking-timeline-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(1.5rem + 0.75rem);
    top: calc(var(--spacing-l) + var(--spacing-s));
    right: -50%;
    width: 100%;
    height: 2px;
    background-color: var(--step-background);
    z-index: -1;
}

.tracking-timeline-step-header {
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    font-size: 0.875rem;
    font-size: var(--font-size-2);
    color: var(--step-foreground);
    margin-bottom: 0.5rem;
    margin-bottom: var(--spacing-xs);
}

.tracking-timeline-step .clr-icon {
    display: inline-block;
    width: 1.5rem;
    width: var(--spacing-l);
    height: 1.5rem;
    height: var(--spacing-l);
    background-color: var(--background);
    border-radius: 50%;
    margin-bottom: 0.75rem;
    margin-bottom: var(--spacing-s);
    border: 1px solid var(--info-500);
}

.tracking-timeline-step.disabled .clr-icon {
    background-color: var(--slate-100);
    border-color: var(--slate-100);
}

.tracking-timeline-step-body {
    font-size: 0.875rem;
    font-size: var(--font-size-2);
    line-height: 1.25;
}

.tracking-timeline-step-title {
    display: block;
    font-size: 1rem;
    font-size: var(--font-size-3);
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.5rem;
    margin-bottom: var(--spacing-xs);
    line-height: 1;
}

.tracking-timeline-step-description {
    color: var(--step-text--muted);
    font-size: 0.875rem;
    font-size: var(--font-size-2);
    font-weight: 400;
    font-weight: var(--font-weight-regular);
}

@media (prefers-reduced-motion: no-preference) {
    .tracking-timeline-step .fa-spin,
    .tracking-timeline-step .clr-icon[aria-label="In progress"] {
        animation: spin_b 5s ease-in-out infinite;
    }
}

.timeline-progress-container {
    width: 100%;
    max-width: 95%;
    margin: 1rem auto;
    margin: var(--spacing-base) auto;
    padding: 0 1rem;
    padding: 0 var(--spacing-base);
}

.timeline-progress {
    height: 0.25rem;
    background-color: light-dark(var(--slate-400), var(--slate-600));
    border-radius: 0.25rem;
    border-radius: var(--border-radius-extra-small);
    position: relative;
    margin: 1rem 0;
    margin: var(--spacing-base) 0;
}

.timeline-progress .progress-bar {
    height: 100%;
    background-color: var(--success-400);
    border-radius: 0.25rem;
    border-radius: var(--border-radius-extra-small);
    position: relative;
    transition: width 0.5s ease-in-out;
}

.timeline-progress .progress-marker {
    width: 0.5rem;
    height: 0.5rem;
    background-color: var(--success-400);
    border: 1px solid var(--slate-50);
    border-radius: 50%;
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-small);
}

.vehicle {
    width: 1.5rem;
    width: var(--spacing-l);
    height: 1.5rem;
    height: var(--spacing-l);
    position: absolute;
    right: -12px;
    top: calc(-1 * 1.5rem - 0.5rem);
    top: calc(-1 * var(--spacing-l) - var(--spacing-xs));
}

.timeline-progress-labels {
     display: flex;
     justify-content: space-between;
     font-size: 1rem;
     font-size: var(--font-size-3);
     color: var(--font-color-body);
 }

.progress-current {
     font-weight: 600;
     font-weight: var(--font-weight-bold);
     color: light-dark(var(--slate-700), var(--slate-300)); /* Improved contrast for accessibility */
 }

.vehicle {
     width: 1.75rem;
     height: 1.75rem;
     position: absolute;
     right: -12px;
     top: -188%;
 }

.em-servico--title {
 	align-items: flex-end;
     gap: 1rem;
 }

@media (max-width: 768px) {
    .tracking-timeline-horizontal {
        flex-direction: column;
    }
    .timeline-progress-container {
        padding: 0 0.75rem;
        padding: 0 var(--spacing-s);
    }
    .tracking-timeline-step {
        text-align: left;
        padding-left: calc(1.5rem + 0.75rem);
        padding-left: calc(var(--spacing-l) + var(--spacing-s));
    }

    .tracking-timeline-step:not(:last-child)::after {
        top: calc(1.5rem + 0.5rem);
        top: calc(var(--spacing-l) + var(--spacing-xs));
        left: calc(1.5rem / 2);
        left: calc(var(--spacing-l) / 2);
        width: 2px;
        height: calc(100% - 1rem);
        height: calc(100% - var(--spacing-base));
    }

    .tracking-timeline-step .clr-icon {
        position: absolute;
        left: 0.5rem;
        left: var(--spacing-xs);
        top: 1rem;
        top: var(--spacing-base);
    }
}

@keyframes spin_b {
    0% { transform: rotate(0deg); opacity: 0.5; }
    50% { transform: rotate(180deg); opacity: 1; }
    100% { transform: rotate(360deg); opacity: 0.5; }
}

@keyframes drive {
    0% { transform: translateX(0) rotate(0deg); opacity: 1; }
    25% { transform: translateX(20px) rotate(-5deg); }
    75% { transform: translateX(40px) rotate(5deg); }
    90% { transform: translateX(60px) rotate(0deg); opacity: 1; }
    95% { transform: translateX(60px) rotate(-5deg); opacity: 0.5; }
    100% { transform: translateX(70px) rotate(0deg); opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
    .vehicle {
        animation: drive 3s ease-in-out infinite;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .tracking-timeline-step .fa-spin,
    .tracking-timeline-step .clr-icon[aria-label="In progress"] {
        animation: spin_b 5s ease-in-out infinite;
    }
}

.fa-spin {
	display: inline-block;
	width: 24px;
	height: 24px;
	background-color: var(--background);
	border-radius: 50%;
	margin-bottom: 10px;
}

.timeline-container {
    --layout-timeline-max-width: 900px;
    max-width: 900px;
    max-width: var(--layout-timeline-max-width);
    margin-left: auto;
    margin-right: auto;
}

.timeline {
    line-height: 1.5rem;
    line-height: var(--line-height-3);
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.timeline-item {
    padding-left: 2rem;
    padding-left: var(--spacing-xl);
    position: relative;
}

.timeline-item:last-child {
        padding-bottom: 0;
    }

.timeline-item:last-child .timeline-marker:after {
            content: none;
        }

.timeline-item:not(.period):hover .timeline-marker:before,.timeline-item:not(.period):focus-within .timeline-marker:before {
        background: transparent;
        border: var(--border-width-medium) solid var(--step-background);
    }

.timeline-info {
    font-size: 0.875rem;
    font-size: var(--font-size-2);
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.025em;
    letter-spacing: var(--letter-spacing-tight);
    margin-bottom: 0.5rem;
    margin-bottom: var(--spacing-xs);
    color: var(--step-text--muted);
    text-transform: uppercase;
    white-space: nowrap;
}

.timeline-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.timeline-marker:before {
        background: var(--accent-surface);
        border: 2px solid transparent;
        border-radius: 100%;
        content: "";
        display: block;
        height: 1.15rem;
        width: 1.15rem;
        position: absolute;
        top: 3px;
        left: -8px;
        transition: background 150ms ease-in-out, border 150ms ease-in-out;
        transition: background var(--transition-fast), border var(--transition-fast);
    }

.timeline-marker:after {
        content: "";
        width: 3px;
        background: var(--step-background);
        display: block;
        position: absolute;
        top: 1.5rem;
        top: var(--spacing-l);
        bottom: 0;
        left: 0px;
    }

.timeline-content {
    padding-bottom: 2rem;
    padding-bottom: var(--spacing-xl);
    color: var(--step-foreground);
}

.timeline-content p:last-child {
        margin-bottom: 0;
        font-size: 0.875rem;
        font-size: var(--font-size-2);
        font-weight: 400;
        font-weight: var(--font-weight-regular);
        margin-bottom: 0.25rem;
        line-height: 1.5;
    }

.period {
    padding: 0;
}

.period .timeline-info {
        display: none;
    }

.period .timeline-marker:before {
            background: transparent;
            content: "";
            width: 9px;
            height: auto;
            border: none;
            border-radius: 0;
            top: 0;
            left: -3px;
            bottom: 1.5rem;
            bottom: var(--spacing-l);
            position: absolute;
        }

.period .timeline-marker:after {
            content: "";
            height: 1.5rem;
            height: var(--spacing-l);
            top: auto;
        }

.period .timeline-content {
        padding: 2rem 0 2.5rem;
        padding: var(--spacing-xl) 0 var(--spacing-xxl);
    }

.timeline-title,
.period .timeline-title {
    display: block;
    font-size: 1.125rem;
    font-size: var(--font-size-4);
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.5rem;
    line-height: 1;
}

.marker-outline .timeline-marker:before {
        background: transparent;
        border-color: var(--slate-500);
    }

.marker-outline .timeline-item:hover .timeline-marker:before {
        background: var(--slate-500);
    }

/* ===================================
   MODAL SYSTEM - UNIFIED STYLES
   Mobile-First with Progressive Enhancement
   =================================== */

/* ===================================
   ANIMATIONS
   =================================== */

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

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

@keyframes modal-slide-in {
  from {
    opacity: 0;
    transform: translateY(-2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modal-slide-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-2rem);
  }
}

/* ===================================
   BASE MODAL CONTAINER
   =================================== */

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 12;
  z-index: var(--z-index-modal);
  background: rgba(0, 0, 0, 0.5);
  background: var(--modal-overlay-background);
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 1rem;
  padding: var(--spacing-base);

  /* Animation states */
}

--opening.modal {
    display: flex;
    animation: modal-fade-in 250ms ease-in-out forwards;
    animation: modal-fade-in var(--transition-normal) forwards;
  }

--open.modal {
    display: flex;
    animation: none;
  }

--closing.modal {
    animation: modal-fade-out 250ms ease-in-out forwards;
    animation: modal-fade-out var(--transition-normal) forwards;
  }

/* Modal Content - Main Container */

.modal .modal__content {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: auto;
    background-color: var(--modal-background);
    border-radius: 0.25rem;
    border-radius: var(--modal-border-radius);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    box-shadow: var(--modal-shadow);
    color: var(--modal-text-color);
    animation: modal-slide-in 250ms ease-in-out forwards;
    animation: modal-slide-in var(--transition-normal) forwards;
    display: flex;
    flex-direction: column;

    /* Size Variants */
  }

.modal --sm.modal__content {
      max-width: 350px;
    }

.modal --lg.modal__content {
      max-width: 800px;
    }

.modal --xl.modal__content {
      max-width: 1000px;
    }

.modal --fullscreen.modal__content {
      width: 95%;
      height: 95%;
      max-width: none;
      max-height: none;
    }

.modal .modal__content {

    max-width: 500px;
    margin: 1rem auto;
    margin: var(--spacing-base) auto;
  }

/* ===================================
       MODAL HEADER
       =================================== */

.modal .modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    gap: var(--spacing-base);
    padding: 1rem;
    padding: var(--spacing-base);
    background-color: var(--modal-background);
    border-bottom: var(--modal-header-border);
    flex-shrink: 0;
  }

.modal .modal__header .modal__title {
      margin: 0;
      font-size: var(--font-size-heading-6);
      font-weight: 600;
      font-weight: var(--font-weight-bold);
      color: var(--modal-title-color);
      line-height: 1.4;
      flex: 1;
    }

.modal .modal__header .close {
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      width: 2rem;
      height: 2rem;
      color: var(--modal-close-color);
      cursor: pointer;
      font-size: 1rem;
      font-size: var(--font-size-3);
      padding: 0.25rem;
      padding: var(--spacing-xxs);
      transition: all 150ms ease-in-out;
      transition: all var(--transition-fast);
      flex-shrink: 0;
      border-radius: 0.25rem;
      border-radius: var(--border-radius-small);
    }

.modal .modal__header .close:hover {
        background-color: var(--modal-close-hover-bg);
        color: var(--modal-close-hover-color);
      }

.modal .modal__header .close:focus {
        outline: 2px solid #0d9488;
        outline: 2px solid var(--focus-color);
        outline-offset: 2px;
      }

.modal .modal__header .close::before {
        content: "×";
      }

.modal .modal__header .close[aria-label="Fechar modal"]::before {
        content: "×";
      }

/* ===================================
       NEW CLOSE BUTTON FORMAT
       =================================== */

.modal .close--modal {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--slate-700);
    font-size: 1.125rem;
    font-size: var(--font-size-4);
    cursor: pointer;
    padding: 0.25rem;
    padding: var(--spacing-xxs);
    transition: all 150ms ease-in-out;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    border-radius: 0.25rem;
    border-radius: var(--border-radius-small);
  }

.modal .close--modal:hover {
      background-color: var(--modal-close-hover-bg);
      color: var(--slate-800);
    }

.modal .close--modal:focus {
      outline: 2px solid #0d9488;
      outline: 2px solid var(--focus-color);
      outline-offset: 2px;
    }

.modal .close--modal::before {
      content: "×";
    }

.modal .close--modal[aria-label="Fechar modal"]::before {
      content: "×";
    }

/* ===================================
       MODAL BODY
       =================================== */

.modal .modal-body,.modal .modal__body {
    padding: 1rem;
    padding: var(--spacing-base);
    flex: 1;
    overflow-y: auto;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    align-items: center;

    /* SVG icon in modal body - top centered */
  }

.modal .modal-body > svg:first-child {
      width: 3.5rem;
      height: 3.5rem;
      margin: 0 auto 1.5rem;
      margin: 0 auto var(--spacing-l);
      display: block;
      flex-shrink: 0;
      align-self: center;
      color: var(--error-500);
    }

.modal .modal__body > svg:first-child {
      width: 3.5rem;
      height: 3.5rem;
      margin: 0 auto 1.5rem;
      margin: 0 auto var(--spacing-l);
      display: block;
      flex-shrink: 0;
      align-self: center;
      color: var(--error-500);
    }

.modal .modal-body > .modal__icon,.modal .modal__body > .modal__icon,.modal .modal-body > img.icon-large,.modal .modal__body > img.icon-large {
      width: 3.5rem;
      height: 3.5rem;
      margin: 0 auto 1.5rem;
      margin: 0 auto var(--spacing-l);
      display: block;
      flex-shrink: 0;
      align-self: center;
      color: var(--error-500);
    }

/* Typography inside body */

.modal .modal-body p,.modal .modal__body p {
      margin-bottom: 1rem;
      margin-bottom: var(--spacing-base);
    }

.modal .modal-body p:last-child {
        margin-bottom: 0;
      }

.modal .modal__body p:last-child {
        margin-bottom: 0;
      }

.modal .modal-body img,.modal .modal__body img {
      max-width: 100%;
      height: auto;
      display: block;
    }

/* Alert integration */

.modal .modal-body .alert,.modal .modal__body .alert {
      margin-bottom: 1rem;
      margin-bottom: var(--spacing-base);
    }

/* Form integration */

.modal .modal-body form,.modal .modal__body form {
      margin: 0;
    }

.modal .modal-body form .form-group,.modal .modal__body form .form-group {
        margin-bottom: 1.5rem;
        margin-bottom: var(--spacing-l);
      }

.modal .modal-body form .form-group:last-child {
          margin-bottom: 0;
        }

.modal .modal__body form .form-group:last-child {
          margin-bottom: 0;
        }

/* ===================================
       MODAL FOOTER
       =================================== */

.modal .modal__footer,.modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    gap: var(--spacing-s);
    padding: 1rem;
    padding: var(--spacing-base);
    background-color: var(--modal-background);
    border-top: var(--modal-header-border);
    flex-shrink: 0;
    flex-wrap: wrap;

    /* Button styling in footer - apply button-small sizing */
  }

.modal .modal__footer button,.modal .modal-footer button {
      --button-height: var(--button-height-small);
      --button-font-size: var(--button-font-size-small);
      --button-padding-x: var(--button-padding-x-small);
    }

.modal .modal__footer form,.modal .modal-footer form {
      margin: 0;
      display: flex;
      gap: 0.75rem;
      gap: var(--spacing-s);
      align-items: center;
    }

/* ===================================
   LEGACY SUPPORT - deleteModal
   Maps old structure to new system
   =================================== */

#deleteModal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 12;
  z-index: var(--z-index-modal);
  background: rgba(0, 0, 0, 0.5);
  background: var(--modal-overlay-background);
  align-items: center;
  justify-content: center;
  padding: 1rem;
  padding: var(--spacing-base);
}

#deleteModal .modal {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
    margin: auto;
    background-color: var(--modal-background);
    border-radius: 0.25rem;
    border-radius: var(--modal-border-radius);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    box-shadow: var(--modal-shadow);
    color: var(--modal-text-color);
  }

@media (max-width: 768px) {

#deleteModal .modal {
      max-width: 95%;
  }
    }

@media (min-width: 769px) {

#deleteModal .modal {
      max-width: 600px;
  }
    }

@media (min-width: 1024px) {

#deleteModal .modal {
      max-width: 650px;
  }
    }

#deleteModal .modal .modal__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      gap: var(--spacing-base);
      padding: 1rem;
      padding: var(--spacing-base);
      background-color: var(--modal-background);
      border-bottom: var(--modal-header-border);
    }

@media (min-width: 769px) {

#deleteModal .modal .modal__header {
        padding: 1.5rem;
        padding: var(--spacing-l);
    }
      }

#deleteModal .modal .modal__header .modal__title {
        margin: 0;
        font-size: var(--font-size-heading-6);
        font-weight: 600;
        font-weight: var(--font-weight-bold);
        color: var(--modal-title-color);
      }

@media (max-width: 768px) {

#deleteModal .modal .modal__header .modal__title {
          font-size: 1.25rem;
          font-size: var(--font-size-5);
      }
        }

#deleteModal .modal .modal__header .close {
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        width: 2rem;
        height: 2rem;
        color: var(--modal-close-color);
        cursor: pointer;
        font-size: 1rem;
        font-size: var(--font-size-3);
        padding: 0.25rem;
        padding: var(--spacing-xxs);
        transition: all 150ms ease-in-out;
        transition: all var(--transition-fast);
        border-radius: 0.25rem;
        border-radius: var(--border-radius-small);
      }

#deleteModal .modal .modal__header .close:hover {
          color: var(--modal-close-hover-color);
        }

#deleteModal .modal .modal__header .close::before {
          content: "×";
        }

#deleteModal .modal .modal-body {
      padding: 1rem;
      padding: var(--spacing-base);
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

@media (min-width: 769px) {

#deleteModal .modal .modal-body {
        padding: 1.5rem;
        padding: var(--spacing-l);
    }
      }

#deleteModal .modal .modal-body img {
        max-width: 100%;
        height: auto;
      }

/* SVG icons (base64 in img tag) - centered and medium-sized */

#deleteModal .modal .modal-body img.icon-large {
        width: 3.5rem;
        height: 3.5rem;
        margin: 0 auto 1.5rem;
        margin: 0 auto var(--spacing-l);
        display: block;
        flex-shrink: 0;
        align-self: center;
      }

#deleteModal .modal .modal-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0.75rem;
      gap: var(--spacing-s);
      padding: 1rem;
      padding: var(--spacing-base);
      background-color: var(--modal-background);
      border-top: var(--modal-header-border);
      flex-shrink: 0;
      flex-wrap: wrap;
    }

@media (min-width: 769px) {

#deleteModal .modal .modal-footer {
        padding: 1rem;
        padding: var(--spacing-base);
        gap: 0.75rem;
        gap: var(--spacing-s);
    }
      }

@media (max-width: 768px) {

#deleteModal .modal .modal-footer {
        flex-direction: column-reverse;
        justify-content: flex-end;
    }
      }

/* Button styling in footer - apply button-small sizing */

#deleteModal .modal .modal-footer button {
        --button-height: var(--button-height-small);
        --button-font-size: var(--button-font-size-small);
        --button-padding-x: var(--button-padding-x-small);
      }

#deleteModal .modal .modal-footer form {
        margin: 0;
        display: flex;
        gap: 0.75rem;
        gap: var(--spacing-s);
        align-items: center;
      }

@media (max-width: 768px) {

#deleteModal .modal .modal-footer form {
          flex-direction: column-reverse;
          width: 100%;
      }

          #deleteModal .modal .modal-footer form button {
            width: 100%;
          }
        }

/* ===================================
   SEARCH MODAL VARIANT
   =================================== */

.search-modal {
  display: none;
  position: fixed;
  z-index: 12;
  z-index: var(--z-index-modal);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  align-items: flex-start;
  justify-content: center;
  padding-top: 2.5rem;
  padding-top: var(--spacing-xxl);
}

.search-modal.show,--open.search-modal {
    display: flex;
  }

.search-modal .search-modal-content {
    position: relative;
    width: 90%;
    max-width: 992px;
    max-width: var(--layout-narrow-max-width);
    background-color: var(--color-surface);
    padding: 2.5rem 1rem 1rem;
    padding: var(--spacing-xxl) var(--spacing-base) var(--spacing-base);
    border: 1px solid var(--border-color);
    border-radius: 0;
    border-radius: var(--border-radius-none);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    box-shadow: var(--shadow-medium);
    color: var(--color-text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
    font-family: var(--font-family);
  }

.search-modal .search-modal-content h2 {
      font-size: 2rem;
      font-size: var(--font-size-display-2);
      color: var(--color-text-heading);
      margin-bottom: 1rem;
      margin-bottom: var(--spacing-base);
    }

.search-modal .search-modal-content form {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      gap: var(--spacing-s);
      margin: 0;
    }

.search-modal .search-modal-content form input[type="search"] {
        height: 3rem;
        height: var(--input-height);
        border: 1px solid var(--input-border-color);
        background-color: var(--input-surface);
        color: var(--color-text);
        font-size: 1rem;
        font-size: var(--font-size-3);
        border-radius: 0.25rem;
        border-radius: var(--border-radius-small);
        padding: 0.5rem 0.5rem;
        padding: var(--input-padding);
      }

.search-modal .search-modal-content form input[type="search"]::-moz-placeholder {
          color: var(--color-text-placeholder);
        }

.search-modal .search-modal-content form input[type="search"]::placeholder {
          color: var(--color-text-placeholder);
        }

.search-modal .search-modal-content form input[type="search"]:focus {
          outline: none;
          border-color: #0d9488;
          border-color: var(--focus-color);
          box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
          box-shadow: 0 0 0 3px rgba(var(--focus-color-rgb), 0.1);
        }

.search-modal .search-modal-content form button[type="submit"] {
        --_background: var(--slate-700);
        --_color: white;
        --_hover: var(--slate-800);

        padding: 0.875rem 1.5rem;

        padding: var(--button-padding-small);
        background-color: var(--_background);
        color: white;
        color: var(--_color);
        font-size: 0.875rem;
        font-size: var(--button-font-size);
        font-weight: 600;
        font-weight: var(--font-weight-bold);
        border: 1px solid var(--_background);
        border-radius: 0.25rem;
        border-radius: var(--border-radius-small);
        cursor: pointer;
        text-align: center;
        transition: background-color 150ms ease-in-out;
        transition: background-color var(--transition-fast);
        margin: 0;
      }

.search-modal .search-modal-content form button[type="submit"]:hover {
          background-color: var(--_hover);
          border-color: var(--_hover);
        }

.search-modal .search-modal-content form button[type="submit"]:focus {
          outline: none;
          box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2);
          box-shadow: 0 0 0 3px rgba(var(--focus-color-rgb), 0.2);
        }

.search-modal .close-button {
    position: absolute;
    top: 1rem;
    top: var(--spacing-base);
    right: 1rem;
    right: var(--spacing-base);
    font-size: 1.25rem;
    font-size: var(--font-size-5);
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    color: var(--color-text--muted);
    cursor: pointer;
    transition: color 150ms ease-in-out;
    transition: color var(--transition-fast);
    padding: 0 0.75rem;
    padding: 0 var(--spacing-s);
    background: transparent;
    border: none;
    line-height: 1;
  }

.search-modal .close-button:hover {
      color: var(--color-link-hover);
    }

.search-modal .close-button::before {
      content: "×";
    }

/* ===================================
   ACCESSIBILITY & FOCUS STATES
   =================================== */

/* Ensure focus visible */

.modal :focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

/* Disable scroll when modal is open */

body.modal-open {
    overflow: hidden;
  }

dialog {
  border: 1px solid var(--border-color);
  border-radius: 0.25rem;
  border-radius: var(--border-radius-small);
  display: none;
  left: 50%;
  margin: 0;
  max-height: 80vh;
  max-width: 80vw;
  min-width: 20vw;
  padding: 1rem;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

dialog[open] {
    display: flex;
    flex-direction: column;
  }

dialog::before {
    content: "";
    background: var(--slate-100);
    height: 100vmax;
    left: 50%;
    opacity: 0.33;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100vmax;
    z-index: -1;
  }

dialog::after {
    content: "";
    background: var(--slate-800);
     border-radius: 0;
     border-radius: var(--border-radius-none);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
  }

dialog > * {
      max-height: 80vh;
      overflow: auto;
    }

dialog > h1,dialog > h2,dialog > h3,dialog > h4,dialog > h5,dialog > h6 {
      border-bottom: 1px solid var(--border-color);
      border-radius: var(--border-radius) var(--border-radius) 0 0;
      color: var(--slate-100);
      font-size: 1.125rem;
      margin: -1rem -1rem 1rem -1rem;
      padding: 0.5rem 1rem;
    }

/* ========================================
   COMPREHENSIVE ACCORDION COMPONENT (BEM)
   ======================================= */

/* ========================================
   BASE ACCORDION STYLES WITH FALLBACKS
   ======================================= */

/* Vertical accordion container */

.accordion-vertical {
  margin: 2rem 0;
  margin: var(--spacing-xl, 1.5rem) 0;
  border-radius: 0.5rem;
  border-radius: var(--border-radius-medium, 0.5rem);
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  box-shadow: var(--shadow-medium, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
  background: #ffffff;
  background: var(--card-background, #ffffff);
  border: 1px solid #e5e7eb;
  border: 1px solid var(--border-color, #e5e7eb);
  width: 100%;
  max-width: 100%;
}

/* Accordion item */

.accordion-item {
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  transition: background-color 150ms ease-in-out;
  transition: background-color var(--transition-fast, 0.2s ease);
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-item:hover {
  background: #f3f4f6;
  background: var(--accent-surface-light, #f3f4f6);
}

/* Accordion header */

.accordion-header {
  width: 100%;
  padding: 1.5rem 2rem;
  padding: var(--spacing-l, 1rem) var(--spacing-xl, 1.5rem);
  background: #ffffff;
  background: var(--card-background, #ffffff);
  border: none;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.125rem;
  font-size: var(--font-size-4, 1rem);
  font-weight: 600;
  font-weight: var(--font-weight-bold, 600);
  color: #111827;
  color: var(--color-text-heading, #111827);
  transition: all 150ms ease-in-out;
  transition: all var(--transition-fast, 0.2s ease);
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.accordion-header:hover {
  background: #f3f4f6;
  background: var(--accent-surface-light, #f3f4f6);
  color: #111827;
  color: var(--color-text-heading, #111827);
}

.accordion-header:focus-visible {
  outline: 2px solid #0d9488;
  outline: 2px solid var(--focus-color, #3b82f6);
  outline-offset: 2px;
  border-radius: 0.25rem;
  border-radius: var(--border-radius-small, 0.25rem);
}

/* Accordion icon - removed to avoid conflicts with ux_icon */

.accordion-header .accordion-icon {
  transition: transform 150ms ease-in-out;
  transition: transform var(--transition-fast, 0.2s ease);
  color: #6b7280;
  color: var(--color-text--muted, #6b7280);
  flex-shrink: 0;
  margin-left: 1rem;
  margin-left: var(--spacing-base, 0.5rem);
  line-height: 1;
}

.accordion-header.active .accordion-icon {
  transform: rotate(180deg);
}

/* Accordion content - IMPROVED ANIMATION */

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 250ms ease-in-out ease-in-out, opacity 250ms ease-in-out ease-in-out, padding 250ms ease-in-out ease-in-out;
  transition:
    max-height var(--transition-normal, 0.3s) ease-in-out, opacity var(--transition-normal, 0.3s) ease-in-out, padding var(--transition-normal, 0.3s) ease-in-out;
  background: #ffffff;
  background: var(--card-background, #ffffff);
  opacity: 0;
}

.accordion-content.active {
  max-height: none;
  opacity: 1;
}

.accordion-content > * {
  padding: 0 2rem 2rem
    2rem;
  padding: 0 var(--spacing-xl, 1.5rem) var(--spacing-xl, 1.5rem)
    var(--spacing-xl, 1.5rem);
  margin: 0;
}

/* ========================================
   ACCORDION VARIANTS
   ======================================= */

/* Borderless accordion */

.accordion-vertical--borderless {
  border: none;
  box-shadow: none;
  background: transparent;
}

.accordion-vertical--borderless .accordion-item {
  border-bottom: 1px solid var(--border-color-light);
}

.accordion-vertical--borderless .accordion-header {
  background: transparent;
}

.accordion-vertical--borderless .accordion-header:hover {
  background: var(--accent-surface-light);
}

/* Shadowless accordion */

.accordion-vertical--shadowless {
  box-shadow: none;
  border: 1px solid var(--border-color);
}

/* Rounded accordion */

.accordion-vertical--rounded {
  border-radius: 0.75rem;
  border-radius: var(--border-radius-large);
}

.accordion-vertical--rounded .accordion-item:first-child .accordion-header {
  border-radius: 0.75rem 0.75rem 0 0;
  border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
}

.accordion-vertical--rounded .accordion-item:last-child .accordion-header {
  border-radius: 0 0 0.75rem 0.75rem;
  border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
}

/* ========================================
   ACCORDION SIZES
   ======================================= */

/* Small accordion */

.accordion-vertical--small {
  border-radius: 0.25rem;
  border-radius: var(--border-radius-small);
}

.accordion-vertical--small .accordion-header {
  padding: 1rem 1.5rem;
  padding: var(--spacing-base) var(--spacing-l);
  font-size: 1rem;
  font-size: var(--font-size-3);
}

.accordion-vertical--small .accordion-content > * {
  padding: 0 1.5rem 1rem 1.5rem;
  padding: 0 var(--spacing-l) var(--spacing-base) var(--spacing-l);
}

/* Large accordion */

.accordion-vertical--large {
  border-radius: 0.75rem;
  border-radius: var(--border-radius-large);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  box-shadow: var(--shadow-large);
}

.accordion-vertical--large .accordion-header {
  padding: 2rem 2.5rem;
  padding: var(--spacing-xl) var(--spacing-xxl);
  font-size: 1.25rem;
  font-size: var(--font-size-5);
}

.accordion-vertical--large .accordion-content > * {
  padding: 0 2.5rem 2rem 2.5rem;
  padding: 0 var(--spacing-xxl) var(--spacing-xl) var(--spacing-xxl);
}

/* ========================================
   ACCORDION STATES
   ======================================= */

/* Active state */

.accordion-vertical--active .accordion-item.active {
  background: var(--accent-surface-light);
}

/* Disabled state */

.accordion-vertical--disabled .accordion-header {
  cursor: not-allowed;
  opacity: 0.6;
  color: var(--color-text--muted);
}

.accordion-vertical--disabled .accordion-header:hover {
  background: var(--card-background);
  color: var(--color-text--muted);
}

/* Error state */

.accordion-vertical--error .accordion-header {
  border-left: 4px solid rgb(197, 54, 55);
  border-left: 4px solid var(--validation-error);
}

.accordion-vertical--error .accordion-item.active {
  background: var(--validation-error-bg);
}

/* Success state */

.accordion-vertical--success .accordion-header {
  border-left: 4px solid rgb(5, 137, 62);
  border-left: 4px solid var(--validation-success);
}

.accordion-vertical--success .accordion-item.active {
  background: var(--validation-success-bg);
}

/* Warning state */

.accordion-vertical--warning .accordion-header {
  border-left: 4px solid rgb(148, 105, 0);
  border-left: 4px solid color(display-p3 0.57061 0.41036 0);
  border-left: 4px solid var(--validation-warning);
}

.accordion-vertical--warning .accordion-item.active {
  background: var(--validation-warning-bg);
}

/* Info state */

.accordion-vertical--info .accordion-header {
  border-left: 4px solid rgb(0, 126, 154);
  border-left: 4px solid color(display-p3 0 0.4978 0.63794);
  border-left: 4px solid var(--validation-info);
}

.accordion-vertical--info .accordion-item.active {
  background: var(--validation-info-bg);
}

/* ========================================
   HORIZONTAL ACCORDION
   ======================================= */

.accordion-horizontal {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.5rem;
  border-radius: var(--border-radius-medium, 0.5rem);
  overflow: hidden;
  background: #ffffff;
  background: var(--card-background, #ffffff);
}

.accordion-horizontal .accordion-item {
  border-bottom: 1px solid #e5e7eb;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  flex: 1;
  min-width: 0;
}

.accordion-horizontal .accordion-item:last-child {
  border-bottom: none;
}

.accordion-horizontal .accordion-header {
  padding: 1rem 1.5rem;
  padding: var(--spacing-base, 0.5rem) var(--spacing-l, 1rem);
  font-size: 1rem;
  font-size: var(--font-size-3, 0.875rem);
  justify-content: center;
  text-align: center;
  min-height: 60px;
}

.accordion-horizontal .accordion-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  background: var(--card-background, #ffffff);
  z-index: 10;
  padding: 2rem;
  padding: var(--spacing-xl, 1.5rem);
  overflow-y: auto;
}

.accordion-horizontal .accordion-content.active {
  max-height: none;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================= */

/* Mobile (≤768px) - Compact padding and larger touch target */

@media (max-width: 768px) {
  .accordion-vertical {
    margin: 1rem 0;
    margin: var(--spacing-base, 0.5rem) 0;
    border-radius: 0.5rem;
    border-radius: var(--border-radius-medium, 0.5rem);
  }

  .accordion-header {
    padding: 1.5rem calc(2rem * 1.5);
    padding: var(--spacing-l, 1rem) calc(var(--spacing-xl, 1.5rem) * 1.5);
    font-size: 1.125rem;
    font-size: var(--font-size-4, 1rem);
    justify-content: flex-start; /* Icon Left, Text expand */
  }

  .accordion-header::after {
    margin-left: auto;
  }

  .accordion-content > * {
    padding: 0 calc(2rem * 1.5) 1.5rem
      calc(2rem * 1.5);
    padding: 0 calc(var(--spacing-xl, 1.5rem) * 1.5) var(--spacing-l, 1rem)
      calc(var(--spacing-xl, 1.5rem) * 1.5);
  }

  .accordion-content {
    max-height: 0; /* Ensure starts closed */
  }

  .accordion-content.active {
    max-height: none; /* IMPROVED: Use 'none' instead of fixed height */
  }

  /* Horizontal accordion on mobile */
  .accordion-horizontal {
    flex-direction: column;
  }

  .accordion-horizontal .accordion-header {
    padding: 1rem 1rem;
    padding: var(--spacing-base, 0.5rem) var(--spacing-base, 0.5rem);
    font-size: 1rem;
    font-size: var(--font-size-3, 0.875rem);
  }
}

/* Tablet and Small Desktop (769px to 1023px) - Balanced layout */

@media (min-width: 769px) and (max-width: 1023px) {
  .accordion-vertical {
    border-radius: 0.5rem;
    border-radius: var(--border-radius-medium, 0.5rem);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    box-shadow: var(--shadow-medium, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
  }

  .accordion-header {
    padding: 2rem calc(2rem * 1.5);
    padding: var(--spacing-xl, 1.5rem) calc(var(--spacing-xl, 1.5rem) * 1.5);
    font-size: 1.25rem;
    font-size: var(--font-size-5, 1.125rem);
  }

  .accordion-content > * {
    padding: 0 calc(2rem * 1.5) 2rem
      calc(2rem * 1.5);
    padding: 0 calc(var(--spacing-xl, 1.5rem) * 1.5) var(--spacing-xl, 1.5rem)
      calc(var(--spacing-xl, 1.5rem) * 1.5);
  }
}

/* Large Desktop (1024px+) - Generous spacing */

@media (min-width: 1024px) {
  .accordion-vertical {
    max-width: 800px; /* Prevent too wide on very large screens */
    margin: 2.5rem auto;
    margin: var(--spacing-xxl, 2rem) auto;
  }

  .accordion-header {
    padding: 2rem calc(2rem * 2);
    padding: var(--spacing-xl, 1.5rem) calc(var(--spacing-xl, 1.5rem) * 2);
    font-size: 1.25rem;
    font-size: var(--font-size-5, 1.125rem);
  }

  .accordion-content > * {
    padding: 0 calc(2rem * 2) 2rem
      calc(2rem * 2);
    padding: 0 calc(var(--spacing-xl, 1.5rem) * 2) var(--spacing-xl, 1.5rem)
      calc(var(--spacing-xl, 1.5rem) * 2);
  }
}

/* Extra Extra Large (1440px+) - 4K+ */

@media (min-width: 1440px) {
  .accordion-vertical {
    max-width: 1000px;
    margin: 4rem auto;
    margin: var(--spacing-xxxl, 3rem) auto;
  }

  .accordion-header {
    padding: 2.5rem calc(2.5rem * 2);
    padding: var(--spacing-xxl, 2rem) calc(var(--spacing-xxl, 2rem) * 2);
    font-size: 1.5rem;
    font-size: var(--font-size-6, 1.25rem);
  }

  .accordion-content > * {
    padding: 0 calc(2.5rem * 2) 2.5rem
      calc(2.5rem * 2);
    padding: 0 calc(var(--spacing-xxl, 2rem) * 2) var(--spacing-xxl, 2rem)
      calc(var(--spacing-xxl, 2rem) * 2);
  }
}

/* Landscape mobile - Adjust for horizontal space */

@media (max-width: 768px) and (orientation: landscape) {
  .accordion-vertical {
    max-height: 300px;
    overflow-y: auto;
  }

  .accordion-content.active {
    max-height: none; /* IMPROVED: Use 'none' instead of fixed height */
  }

  .accordion-header {
    padding: 1rem 1rem;
    padding: var(--spacing-base, 0.5rem) var(--spacing-base, 0.5rem);
    font-size: 1rem;
    font-size: var(--font-size-3, 0.875rem);
  }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================= */

/* Keyboard navigation */

.accordion-header:focus {
  outline: 2px solid #0d9488;
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
  border-radius: 0.25rem;
  border-radius: var(--border-radius-small);
}

/* Screen reader only text */

.accordion-header .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* High contrast mode support */

@media (prefers-contrast: high) {
  .accordion-vertical {
    border: 2px solid #e5e7eb;
    border: 2px solid var(--border-color, #e5e7eb);
  }

  .accordion-item {
    border-bottom: 2px solid #e5e7eb;
    border-bottom: 2px solid var(--border-color, #e5e7eb);
  }

  .accordion-header {
    border: 2px solid transparent;
  }

  .accordion-header:hover {
    border-color: #f3f4f6;
    border-color: var(--accent-surface, #f3f4f6);
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .accordion-header,
  .accordion-content {
    transition: none;
  }

  .accordion-header::after {
    transition: none;
  }
}

/* Dark mode support */

@media (prefers-color-scheme: dark) {
  .accordion-vertical {
    background: var(--color-surface);
    border-color: var(--border-color-dark);
  }

  .accordion-item {
    border-bottom-color: var(--border-color-dark);
  }

  .accordion-header {
    background: var(--color-surface);
    color: var(--color-text-heading);
  }

  .accordion-header:hover {
    background: #374151;
    background: var(--accent-surface-dark, #374151);
    color: var(--color-text-heading);
  }

  .accordion-content {
    background: #1f2937;
    background: var(--card-background-dark, #1f2937);
  }
}

/* ========================================
   PRINT STYLES
   ======================================= */

@media print {
  .accordion-vertical {
    border: 1px solid #e5e7eb;
    border: 1px solid var(--border-color, #e5e7eb);
    box-shadow: none;
  }

  .accordion-header {
    background: #ffffff;
    background: var(--card-background, #ffffff);
    border: 1px solid #e5e7eb;
    border: 1px solid var(--border-color, #e5e7eb);
  }

  .accordion-content {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    border: 1px solid #e5e7eb;
    border: 1px solid var(--border-color, #e5e7eb);
    margin: 1rem 0;
    margin: var(--spacing-base, 0.5rem) 0;
  }

  .accordion-header::after {
    display: none;
  }
}

/* ========================================
   ANIMATION UTILITIES - IMPROVED
   ======================================= */

/* Smooth accordion animation */

.accordion-vertical--smooth .accordion-content {
  transition:
    max-height 250ms ease-in-out ease-in-out, opacity 250ms ease-in-out ease-in-out;
  transition:
    max-height var(--transition-slow, 0.5s) ease-in-out, opacity var(--transition-slow, 0.5s) ease-in-out;
}

.accordion-vertical--smooth .accordion-header::after {
  transition: transform 250ms ease-in-out ease-in-out;
  transition: transform var(--transition-slow, 0.5s) ease-in-out;
}

/* Bounce animation for active state */

.accordion-vertical--bounce .accordion-header.active {
  animation: bounce 0.5s ease-in-out; /* Fallback animation */
}

/* Fade animation for content */

.accordion-vertical--fade .accordion-content {
  opacity: 0;
  transition: opacity 250ms ease-in-out ease-in-out;
  transition: opacity var(--transition-normal, 0.3s) ease-in-out;
}

.accordion-vertical--fade .accordion-content.active {
  opacity: 1;
}

/* Fallback bounce animation */

@keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    transform: translate3d(0, -8px, 0);
  }
  70% {
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

/* ===================================
    SEARCH-BOX COMPONENT - BEM Methodology
    Componente de busca responsivo seguindo BEM estrita
    =================================== */

/* Bloco principal */

.search-box {
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    gap: var(--layout-gap);
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    margin-bottom: var(--spacing-xl);
    background-color: var(--color-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-small);
    padding: 1rem;
    padding: var(--spacing-base);
}

/* Elemento formulário - Layout otimizado */

.search-box__form {
    display: flex;
    flex: 1;
    min-width: 280px;
    max-width: 800px;
    gap: 0.75rem;
    gap: var(--spacing-s);
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

/* Container interno para melhor distribuição */

.search-box__form-items {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    gap: var(--spacing-s);
    flex-wrap: wrap;
    width: 100%;
}

/* Responsividade desktop - tudo em linha */

@media (min-width: 769px) {
    .search-box {
        flex-direction: row;
        padding: 1.5rem;
        padding: var(--spacing-l);
    }

    .search-box__form {
        flex-wrap: nowrap;
        max-width: 600px;
    }

    .search-box__form-items {
        flex-wrap: nowrap;
        width: auto;
    }

    .search-box__icons {
        flex-shrink: 0;
    }
}

/* Responsividade mobile - empilhado verticalmente */

@media (max-width: 768px) {
    .search-box {
        flex-direction: column;
        padding: 1rem;
        padding: var(--spacing-base);
    }

    .search-box__form {
        width: 100%;
    }

    .search-box__form-items {
        width: 100%;
        justify-content: center;
    }

    .search-box__icons {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .search-box__input,
    .search-box__input--small,
    .search-box__select,
    .search-box__button {
        width: 100%;
        max-width: none;
    }
}

/* Elemento input */

.search-box__input {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
    padding: 0.5rem 0.5rem;
    padding: var(--input-padding);
    background-color: var(--input-background);
    color: var(--color-text);
    border: 1px solid var(--input-border-color);
    border-bottom: 1px solid var(--primary-500);
    border-radius: 0;
    border-radius: var(--border-radius-none);
    font-size: 0.875rem;
    font-size: var(--input-font-size);
    transition: all 0.3s ease-in-out;
    transition: var(--input-transition);
    line-height: 1.5;
}

/* Variante de input largo para campo de pesquisa principal */

.search-box__input--wide {
    min-width: 300px;
    max-width: 400px;
}

@media (max-width: 768px) {
    .search-box__input--wide {
        width: 100%;
        min-width: 0;
        min-width: initial;
        max-width: none;
    }
}

.search-box__input:focus {
    border-color: var(--primary-500);
    outline: 1px solid var(--primary-500);
    outline-offset: 2px;
}

.search-box__input::-moz-placeholder {
    color: var(--color-text-placeholder);
    font-style: italic;
}

.search-box__input::placeholder {
    color: var(--color-text-placeholder);
    font-style: italic;
}

/* Variante compacta (ex: filtros por data) */

.search-box__input--small {
    min-width: 140px;
    max-width: 170px;
    padding: 0.5rem 0.5rem;
    padding: var(--input-padding);
    background-color: var(--input-background);
    color: var(--color-text);
    border: 1px solid var(--input-border-color);
    border-bottom: 1px solid var(--primary-500);
    border-radius: 0;
    border-radius: var(--border-radius-none);
    font-size: 0.875rem;
    font-size: var(--input-font-size);
    transition: all 0.3s ease-in-out;
    transition: var(--input-transition);
    line-height: 1.5;
    flex-shrink: 0;
}

.search-box__input--small:focus {
    border-color: var(--primary-500);
    outline: 1px solid var(--primary-500);
    outline-offset: 2px;
}

/* Elemento select */

.search-box__select {
    min-width: 120px;
    /* max-width: 180px; */
    padding: 0.5rem 0.5rem;
    padding: var(--input-padding);
    background-color: var(--input-background);
    color: var(--color-text);
    border: 1px solid var(--input-border-color);
    border-bottom: 1px solid var(--primary-500);
    border-radius: 0;
    border-radius: var(--border-radius-none);
    font-size: 0.875rem;
    font-size: var(--input-font-size);
    transition: all 0.3s ease-in-out;
    transition: var(--input-transition);
    cursor: pointer;
    flex-shrink: 0;
}

.search-box__select:focus {
    border-color: var(--primary-500);
    outline: 1px solid var(--primary-500);
    outline-offset: 2px;
}

.search-box__select option {
    background-color: var(--color-surface);
    color: var(--color-text);
}

.search-box__select.is-placeholder {
  color: var(--color-text-placeholder);
  font-style: italic;
}

.search-box__select.is-placeholder option[value=""] {
  color: var(--color-text-placeholder);
  font-style: italic;
}

/* Botões com tamanho fixo */

.search-box__button {
    min-width: 120px;
    max-width: 150px;
    height: 2.5rem;
    height: var(--button-height, 40px);
    padding: 0 0.875rem;
    padding: 0 var(--spacing-m);
    background-color: var(--color-primary);
    color: var(--color-primary-contrast);
    border: none;
    border-radius: 0;
    border-radius: var(--border-radius-none);
    font-size: 0.875rem;
    font-size: var(--input-font-size);
    font-weight: 500;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    transition: var(--input-transition);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    gap: var(--spacing-xs);
}

.search-box__button:hover {
    background-color: var(--color-primary-hover);
}

.search-box__button:focus {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

.search-box__button--secondary {
    background-color: var(--color-secondary);
    color: var(--color-secondary-contrast);
}

.search-box__button--secondary:hover {
    background-color: var(--color-secondary-hover);
}

/* Elemento ícones */

.search-box__icons {
    display: flex;
    gap: 0.75rem;
    gap: var(--spacing-s);
    align-items: center;
    flex-wrap: wrap;
}

.search-box__icon-button {
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 0;
    border-radius: var(--border-radius-none);
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    transition: var(--input-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.search-box__icon-button:hover {
    background-color: var(--color-surface-hover);
    border-color: var(--color-primary);
}

.search-box__icon-button:focus {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

/* Estados de foco para acessibilidade */

.search-box *:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

/* Suporte a movimento reduzido */

@media (prefers-reduced-motion: reduce) {
    .search-box *,
    .search-box *::before,
    .search-box *::after {
        animation-duration: 0.01ms;
        transition-duration: 0.01ms;
    }
}

/* Breakpoint small (769px+) */

@media (min-width: 769px) {
    .search-box__form {
        flex-wrap: nowrap;
    }

    .search-box__input {
        min-width: 200px;
        max-width: 300px;
    }

    .search-box__select {
        min-width: 120px;
        max-width: 160px;
    }

    .search-box__button {
        min-width: 100px;
        max-width: 120px;
    }
}

/* Breakpoint large (1024px+) */

@media (min-width: 1024px) {
    .search-box__form {
        max-width: 700px;
    }

    .search-box__input {
        min-width: 250px;
        max-width: 350px;
    }

    .search-box__button {
        min-width: 110px;
        max-width: 130px;
    }
}

/* Breakpoint extra large (1280px+) */

@media (min-width: 1280px) {
    .search-box {
        margin-bottom: calc(1rem * 3);
        margin-bottom: calc(var(--layout-gap) * 3);
        padding: 1.5rem;
        padding: var(--spacing-l);
        gap: 2rem;
        gap: var(--spacing-xl);
    }

    .search-box__form {
        max-width: 800px;
    }

    .search-box__input {
        max-width: 400px;
    }

    .search-box__button {
        min-width: 120px;
        max-width: 140px;
    }
}

/* Responsividade para tablets (entre 769px e 1023px) */

@media (min-width: 769px) and (max-width: 1023px) {
    .search-box__form {
        max-width: 500px;
    }

    .search-box__input {
        min-width: 180px;
        max-width: 250px;
    }

    .search-box__select {
        min-width: 100px;
        max-width: 140px;
    }

    .search-box__button {
        min-width: 90px;
        max-width: 110px;
    }
}

/* Melhorias para telas muito pequenas (abaixo de 414px) */

@media (max-width: 414px) {
    .search-box__form-items {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box__input,
    .search-box__input--small,
    .search-box__select,
    .search-box__button {
        width: 100%;
        max-width: none;
    }

    .search-box__icons {
        justify-content: center;
        width: 100%;
    }

    .search-box__icon-button {
        flex: 1;
        max-width: 60px;
    }
}

/* ELEMENTS */

/* ===================================
   NAVBAR DESIGN SYSTEM FRAMEWORK
   ===================================
   Comprehensive navbar system with mobile-first responsive design
   Features:
   - Sticky navigation with shadow
   - Mobile hamburger menu
   - Desktop horizontal menu with submenus
   - User profile section with initials/icon
   - Search modal integration
   - UNIFORM font sizing across all breakpoints
   - Dark/light mode support
   - Accessibility features (focus states, skip links)
   =================================== */

.header-navigation {
  background: var(--navbar-background);
  height: calc(2.5rem * 1.35);
  height: var(--navbar-header-height);
  position: sticky;
  top: 0;
  z-index: 10;
  z-index: var(--z-index-header);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  box-shadow: var(--shadow-large);
  border-bottom: 2px solid light-dark(var(--primary-400), var(--primary-400));
}

/* Mobile-First Responsive Height System */

.header-navigation {
  height: calc(2.5rem * 1.35);
  height: var(--navbar-header-height);
}

.navbar-container {
  max-width: min(100vw - 2rem, 1900px);
  max-width: var(--layout-content-max-width);
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 1rem;

  padding: 0 var(--layout-padding-inline);
}

.navbar__logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo {
  display: block;
}

.nav__img {
  height: calc((2.5rem * 1.35) * 0.7);
  height: calc(calc(2.5rem * 1.35) * 0.7);
  height: calc(var(--navbar-header-height) * 0.7);
  width: auto;
  filter: brightness(1) invert(0) contrast(1);
}

@media (prefers-color-scheme: dark) {
  .nav__img {
    filter: brightness(0) invert(1) contrast(0.75);
  }
}

.navbar__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  gap: var(--spacing-base);

}

.navbar__actions .button-small {
    margin-right: 1rem;
    border: 1px solid transparent;
    background-color: transparent;
  }

.navbar__actions button[type="button"],.navbar__actions .navbar__search-btn,.navbar__actions .navbar__notification-btn {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    gap: var(--button-icon-gap);
    font-size: 0.875rem;
    font-size: var(--button-font-size);
    font-weight: 400;
    font-weight: var(--font-weight-regular);
    line-height: 1.2;
    height: 2.5rem;
    height: var(--button-height);
    padding: 0 0.75rem;
    padding: 0 var(--button-padding-x);
    margin: 0;
    border-radius: 0.375rem;
    border-radius: var(--button-border-radius);
    border: 1px solid transparent;
    cursor: pointer;
    -webkit-text-decoration: none !important;
    text-decoration: none !important;
    transition: all 150ms ease-in-out cubic-bezier(0.16, 1, 0.3, 1);
    transition: all var(--transition-fast) var(--ease-standard);
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }

.navbar__actions button[type="button"]:disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.navbar__actions .navbar__search-btn:not(does-not-exist):disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.navbar__actions .navbar__notification-btn:not(does-not-exist):disabled {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.navbar__actions button[type="button"][disabled],.navbar__actions .navbar__search-btn[disabled]:not(does-not-exist),.navbar__actions .navbar__notification-btn[disabled]:not(does-not-exist) {
    background-color: var(--slate-200);
    border-color: var(--slate-200);
    color: var(--slate-500);
    cursor: not-allowed;
    opacity: 0.7;
  }

.navbar__actions button[type="button"]:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.navbar__actions .navbar__search-btn:not(does-not-exist):focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.navbar__actions .navbar__notification-btn:not(does-not-exist):focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.navbar__actions button[type="button"] svg,.navbar__actions .navbar__search-btn:not(does-not-exist) svg,.navbar__actions .navbar__notification-btn:not(does-not-exist) svg {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: currentColor;
  }

.navbar__actions button[type="button"] path,.navbar__actions .navbar__search-btn:not(does-not-exist) path,.navbar__actions .navbar__notification-btn:not(does-not-exist) path {
    stroke: currentColor;
    stroke-width: 1;
    stroke-width: var(--stroke-width-base);
  }

.navbar__actions button[type="button"],.navbar__actions .navbar__search-btn,.navbar__actions .navbar__notification-btn {
    background: transparent;
    border: none;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.25rem;
    padding: var(--spacing-xxs);
    border-radius: 0.25rem;
    border-radius: var(--border-radius-small);
  }

.navbar__actions button[type="button"] svg,.navbar__actions .navbar__search-btn:not(does-not-exist) svg,.navbar__actions .navbar__notification-btn:not(does-not-exist) svg {
      width: 1.25rem;
      height: 1.25rem;
        color: var(--slate-400);
      transition: fill 150ms ease-in-out;
      transition: fill var(--transition-fast);
    }

.navbar__actions button[type="button"]:hover,.navbar__actions .navbar__search-btn:not(does-not-exist):hover,.navbar__actions .navbar__notification-btn:not(does-not-exist):hover {
      background-color: var(--slate-100);
    }

.navbar__actions button[type="button"]:hover svg,.navbar__actions .navbar__search-btn:not(does-not-exist):hover svg,.navbar__actions .navbar__notification-btn:not(does-not-exist):hover svg,.navbar__actions button[type="button"]:hover path,.navbar__actions .navbar__search-btn:not(does-not-exist):hover path,.navbar__actions .navbar__notification-btn:not(does-not-exist):hover path {
        color: var(--primary-400);
      }

.navbar__actions button[type="button"]:focus,.navbar__actions .navbar__search-btn:not(does-not-exist):focus,.navbar__actions .navbar__notification-btn:not(does-not-exist):focus {
      outline: 2px solid #0d9488;
      outline: 2px solid var(--focus-color);
      outline-offset: 2px;
    }

@media (prefers-color-scheme: dark) {
      .navbar__actions button[type="button"]:hover,.navbar__actions .navbar__search-btn:not(does-not-exist):hover,.navbar__actions .navbar__notification-btn:not(does-not-exist):hover {
        background-color: var(--slate-800);
      }
    }

a.button.navbar__search-btn,
  .navbar__search-btn {
    background: transparent;
    border: none;
    width: auto;
    height: auto;
    padding: 0;
    cursor: pointer;
  }

a.button.navbar__search-btn svg,.navbar__search-btn:not(.does-not-exist):not(does-not-exist) svg {
      width: 1.25rem;
      height: 1.25rem;
      fill: none;
      stroke: var(--slate-500);
      transition: stroke 150ms ease-in-out;
      transition: stroke var(--transition-fast);
    }

a.button.navbar__search-btn:hover,.navbar__search-btn:not(.does-not-exist):not(does-not-exist):hover {
      background: transparent;
    }

a.button.navbar__search-btn:hover svg,.navbar__search-btn:not(.does-not-exist):not(does-not-exist):hover svg {
        stroke: var(--primary-400);
      }

a.button.navbar__search-btn:focus,.navbar__search-btn:not(.does-not-exist):not(does-not-exist):focus {
      outline: 2px solid #0d9488;
      outline: 2px solid var(--focus-color);
      outline-offset: 2px;
      background: transparent;
    }

.navbar__toggle {
  display: none;
  cursor: pointer;
  background: none;
  border: none;
}

.navbar__toggle svg {
  width: 1.5rem;
  width: var(--navbar-toggle-icon-size);
  height: 1.5rem;
  height: var(--navbar-toggle-icon-size);
  fill: var(--color-text);
  transition: fill 250ms ease-in-out;
  transition: fill var(--transition-normal);
}

.navbar__toggle:hover svg {
  fill: var(--primary-400);
}

.navbar__user svg {
  width: 1rem;
  width: var(--spacing-base);
  height: 1rem;
  height: var(--spacing-base);
}

.nav__close {
  display: none;
}

.appmenu {
  display: flex;
  gap: 1rem;
  gap: var(--spacing-base);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  font-size: var(--navbar-font-size);
}

.appmenu .menu-item > a {
  font-size: 0.875rem;
  font-size: var(--navbar-font-size);
}

@media (max-width: 768px) {
  .appmenu .menu-item > a {
    font-size: 1.125rem;
    font-size: var(--font-size-4);
  }
}

.menu-item {
  position: relative;
  /* font-variant: small-caps; */
}

.menu-item > a {
  color: var(--navbar-link-color);
  -webkit-text-decoration: none;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  padding: var(--spacing-xs) var(--spacing-s);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 150ms ease-in-out;
  transition: color var(--transition-fast);
}

.menu-item > a:hover {
  color: var(--navbar-link-hover-color);
}

.menu-item svg {
  margin-right: 0.25rem;
  margin-right: var(--spacing-xxs);
  vertical-align: middle;
  width: 0.875rem;
  width: var(--spacing-m);
  height: 0.875rem;
  height: var(--spacing-m);
  fill: var(--slate-400);
}

.sub_menu_1,
.sub_menu_2 {
  list-style: none;
  pointer-events: none;
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
  background: var(--navbar-submenu-background);
  min-width: -moz-max-content;
  min-width: max-content;
  border-radius: 0;
  border-radius: var(--navbar-submenu-border-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  box-shadow: var(--shadow-large);
  z-index: 11;
  z-index: var(--z-index-dropdown);

  opacity: 0;
  transform: translateY(10px);
  transition: opacity 250ms ease-in-out, visibility 250ms ease-in-out, transform 250ms ease-in-out;
  transition: opacity var(--transition-normal), visibility var(--transition-normal), transform var(--transition-normal);
}

/* Third level submenu with higher z-index */

.sub_menu_3 {
  list-style: none;
  pointer-events: none;
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
  background: var(--navbar-submenu-background);
  min-width: -moz-max-content;
  min-width: max-content;
  border-radius: 0;
  border-radius: var(--navbar-submenu-border-radius);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  box-shadow: var(--shadow-large);
  z-index: calc(11 + 1);
  z-index: calc(var(--z-index-dropdown) + 1);

  opacity: 0;
  transform: translateY(10px);
  transition: opacity 250ms ease-in-out, visibility 250ms ease-in-out, transform 250ms ease-in-out;
  transition: opacity var(--transition-normal), visibility var(--transition-normal), transform var(--transition-normal);
}

.menu-item:hover > .sub_menu_1,
.menu-item:focus-within > .sub_menu_1,
.menu-item:hover > .sub_menu_2,
.menu-item:focus-within > .sub_menu_2,
.menu-item:hover > .sub_menu_3,
.menu-item:focus-within > .sub_menu_3 {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  display: block;
}

.menu-item > .sub_menu_1 {
  top: 100%;
  left: 0;
}

.sub_menu_2 .menu-item > .sub_menu_3 {
  top: 0;
  left: 100%;
}

.sub_menu_1 .menu-item > a,
.sub_menu_2 .menu-item > a,
.sub_menu_3 .menu-item > a {
  padding: 0.5rem 1rem;
  color: light-dark(var(--slate-800), var(--slate-200));
  transition: color 150ms ease-in-out;
  transition: color var(--transition-fast);
}

.sub_menu_1 .menu-item > a:hover,
.sub_menu_2 .menu-item > a:hover,
.sub_menu_3 .menu-item > a:hover {
  color: var(--navbar-link-hover-color);
}

.sub_menu_1 .menu-item:not(:last-child) > a,
.sub_menu_2 .menu-item:not(:last-child) > a,
.sub_menu_3 .menu-item:not(:last-child) > a {
  border-bottom: 1px dotted var(--border-color);
}

.menu-item:hover .sub_menu_1,
.menu-item:focus-within .sub_menu_1,
.menu-item:hover .sub_menu_3,
.menu-item:focus-within .sub_menu_3 {
  display: block;
}

.menu-item > a::after {
  color: var(--navbar-content-color);
  content: "\25B6";
  font-size: 0.5rem;
  margin-left: 0.75rem;
  margin-left: var(--spacing-s);
  display: inline-block;
  transition: transform 250ms ease-in-out;
  transition: transform var(--transition-normal);
}

.menu-item:hover > a::after,
.menu-item:focus-within > a::after {
  transform: rotate(90deg);
}

.menu-item:not(:has(ul)) > a::after {
  display: none;
}

.navbar__user {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.navbar__user span {
  font-size: 0.75rem;
  font-size: var(--font-size-1);
}

.navbar__user a {
  padding-left: 1rem;
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  -webkit-text-decoration: none;
  text-decoration: none;
  border-left: var(--border-default);
  transition: color 150ms ease-in-out;
  transition: color var(--transition-fast);
}

.navbar__user a:hover {
  color: var(--slate-300);
}

.navbar__user svg {
  width: 1rem;
  width: var(--spacing-base);
}

.appmenu .menu-item > a svg > * {
  stroke: var(--slate-400);
  fill: none;
}

.navbar__toggle {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.navbar__user {
  display: none;
}

.navbar__logo {
  width: 100%;
}

.appmenu {
  display: none;
  position: fixed;
  top: calc(2.5rem * 1.35);
  top: var(--navbar-header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--navbar-background);
  overflow-y: auto;
  padding: 1rem;
  padding: var(--spacing-base);
  flex-direction: column;
}

.appmenu.open {
  display: block;
  animation: slideDown 250ms ease-in-out;
  animation: slideDown var(--transition-normal);
}

.appmenu .menu-item {
  padding: 0.75rem 0.75rem 0 0.75rem;
  padding: var(--spacing-s) var(--spacing-s) 0 var(--spacing-s);
  position: relative;
  margin: 0;
}

.appmenu .menu-item > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100vw;
}

.appmenu .menu-item > a span {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-start;
}

.appmenu .menu-item > a svg {
  margin-right: 1rem;
  margin-right: var(--spacing-base);
}

.appmenu .menu-item > a::after {
  content: "\25B6";
  font-size: 0.75rem;
  font-size: var(--font-size-1);
  color: var(--navbar-content-color);
  padding-left: 0.75rem;
  margin-left: auto;
  transition: transform 250ms ease-in-out;
  transition: transform var(--transition-normal);
}

.appmenu .menu-item:hover > a::after,
.appmenu .menu-item:focus-within > a::after,
.appmenu .menu-item > a[aria-expanded="true"]::after {
  transform: rotate(90deg);
}

.sub_menu_1,
.sub_menu_2,
.sub_menu_3 {
  position: static;
  background: var(--navbar-submenu-background);
  box-shadow: none;
  display: none;
}

.sub_menu_1.open,
.sub_menu_2.open,
.sub_menu_3.open {
  display: block;
}

.navbar__toggle.open .nav__burger {
  display: none;
}

.navbar__toggle.open .nav__close {
  display: block;
}

@media (min-width: 769px) {
  .navbar__toggle {
    display: none;
  }

  .navbar__user {
    display: flex;
  }

  .navbar__logo {
    width: auto;
  }

  .appmenu {
    display: flex;
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    background: transparent;
    overflow-y: visible;
    padding: 0;
    flex-direction: row;
    gap: 1rem;
    gap: var(--spacing-base);
  }

  .appmenu.open {
    display: flex;
    animation: none;
  }

  .appmenu .menu-item {
    padding: 0;
    position: relative;
  }

  .appmenu .menu-item > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: none;
  }

  .appmenu .menu-item > a span {
    display: block;
    width: auto;
  }

  .appmenu .menu-item > a svg {
    margin-right: 0.25rem;
    margin-right: var(--spacing-xxs);
  }


  .appmenu .menu-item:hover > a::after,
  .appmenu .menu-item:focus-within > a::after,
  .appmenu .menu-item > a[aria-expanded="true"]::after {
    transform: rotate(90deg);
  }

  .sub_menu_1,
  .sub_menu_2,
  .sub_menu_3 {
    position: absolute;
    background: var(--navbar-submenu-background);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-shadow: var(--shadow-large);
    display: none;
    z-index: 11;
    z-index: var(--z-index-dropdown);
  }

  .navbar__toggle.open .nav__burger {
    display: block;
  }

  .navbar__toggle.open .nav__close {
    display: none;
  }
}

/* @media (max-width: 768px) {
 
.menu-item {
  font-variant: small-caps;
}
} */

@keyframes slideDown {
  from {
    transform: translatey(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.sortable span svg,.asc span svg,.desc span svg {
      height:.75rem;
    }

.table-wrap {
  overflow-x: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  text-indent: 0;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  margin-top: var(--spacing-l);
  margin-bottom: var(--spacing-l);
  font-size: 0.875rem;
  font-size: var(--table-font-size);
  line-height: 1.25;
}

table thead {
    background-color: var(--table-header-bg);
    color: var(--table-header-text);
    border-bottom: 2px solid var(--table-header-border);
  }

/* Base (Extra Small - 414px) - iPhone 14/15 - padrão */

/* Mobile styles handled by responsive classes below */

th,
td {
  padding: 0.75rem 0.875rem;
  padding: var(--table-padding);
  text-align: left;
  border: none;
}

.sortable {
  font-weight: 600;
  font-weight: var(--font-weight-bold);
  /* color: var(--color-text) !important; */
  -webkit-text-decoration: none;
  text-decoration: none;
}

.float-end {
    float: right;
}

.sorted a {
  font-weight: 600;
  font-weight: var(--font-weight-bold);
  color: var(--color-text--muted);
}

tbody tr {
    border-bottom: var(--table-border);
  }

tbody tr:last-of-type {
      border: 0;
    }

tbody tr:nth-child(even) {
    background-color: var(--table-even-row-bg);
  }

/* Small (414px) - iPhone 12/13 Pro */

@media (min-width: 414px) {
  table {
    font-size: 0.875rem;
    font-size: var(--table-font-size);
  }
}

/* Medium (769px) - iPad */

@media (min-width: 769px) {
  table {
    font-size: 0.875rem;
    font-size: var(--table-font-size);
  }
}

/* Large (1024px) - Desktop */

@media (min-width: 1024px) {
  table {
    font-size: 0.875rem;
    font-size: var(--table-font-size);
  }
}

/* Extra Large (1280px) - Large desktop */

@media (min-width: 1280px) {
  table {
    font-size: 0.875rem;
    font-size: var(--table-font-size);
  }
}

/* Extra Extra Large (1440px) - 4K+ */

@media (min-width: 1440px) {
  table {
    font-size: 0.875rem;
    font-size: var(--table-font-size);
  }
}

tbody tr:hover {
  background-color: var(--table-hover-bg);
  color: var(--table-hover-color);
  transition: all 150ms ease-in-out;
  transition: all var(--transition-fast);
}

tbody tr.table-row--descontinuado,
tbody tr.table-row--descontinuado:nth-child(even) {
  background-color: var(--error-50);
}

tbody tr.table-row--descontinuado:hover {
  background-color: var(--error-100);
  color: inherit;
}

.hl-produto-table tbody tr.table-row--descontinuado > td,
.hl-produto-table tbody tr.table-row--descontinuado:nth-child(even) > td {
  background-color: var(--error-50);
}

.hl-produto-table tbody tr.table-row--descontinuado:hover > td {
  background-color: var(--error-100);
  color: inherit;
}

tbody tr:hover td a .table-icon svg g path {
      stroke: var(--table-hover-color);
    }

td a .table-icon:hover svg g path {
      stroke: var(--table-hover-icon-color);
    }

tfoot {
  border-top: 2px solid var(--table-border-color);
}

td[data-label="Estado"] {
  text-align: center;
}

td[data-label="Ações"] {
  display: flex;
  text-align: center;
}

td[data-label="Ações"]  > * {
    padding-right: 1rem;
  }

td[data-label="Ações"]  > :last-child {
    padding-right: 0;
  }

td[data-label="#"] {
  width: 2.5rem;
}

tr:nth-child(even) {
  background-color: var(--table-even-row-bg);
}

.table-icon {
  width: 1.5em;
  width: var(--table-icon-size, 1.5rem);
  height: 1.5em;
  height: var(--table-icon-size, 1.5rem);
  cursor: pointer;
  transition: all 150ms ease-in-out;
  transition: all var(--transition-fast);
  padding: 0.125rem;
  padding: var(--spacing-xxxs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.table-icon svg {
    width: 100%;
    height: 100%;
  }

.table-icon svg g path {
      stroke: var(--color-text);
      transition: stroke 150ms ease-in-out;
      transition: stroke var(--transition-fast);
    }

.table-icon:hover svg g path {
        stroke: var(--table-hover-icon-color);
      }

.table-icon:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

.icon-delete {
  width: 1.5em;
  width: var(--table-icon-size, 1rem);
  height: 1.5em;
  height: var(--table-icon-size, 1rem);
  cursor: pointer;
  transition: all 150ms ease-in-out;
  transition: all var(--transition-fast);
  padding: 0.125rem;
  padding: var(--spacing-xxxs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
   border-radius: 0;
   border-radius: var(--border-radius-none);
}

.icon-delete svg,.icon-delete i {
    width: 100%;
    height: 100%;
    color: var(--color-error-500);
    transition: color 150ms ease-in-out;
    transition: color var(--transition-fast);
  }

.icon-delete:hover {
    background: var(--color-error-50);
  }

.icon-delete:hover svg,.icon-delete:hover i {
      color: var(--color-error-700);
    }

.icon-delete:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
  }

td[data-label="Seguro"] {
  text-align: center;
}

table a svg.table-icon:hover g path {
  stroke: var(--icon-color-hover);
}

.hl-produto-estado {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hl-produto-estado--ativo {
  color: var(--color-success);
}

.hl-produto-estado--descontinuado {
  color: var(--color-error);
}

.hl-produto-estado__icon {
  color: inherit;
}

.hl-produto-estado__icon svg,.hl-produto-estado__icon path,.hl-produto-estado__icon g,.hl-produto-estado__icon rect,.hl-produto-estado__icon circle {
    fill: currentColor;
    stroke: currentColor;
  }

.hl-produto-table .hl-produto-estado--descontinuado .hl-produto-estado__icon {
  color: var(--color-error);
}

.hl-produto-table .hl-produto-estado--descontinuado .hl-produto-estado__icon svg *,
.hl-produto-table .hl-produto-estado--descontinuado .hl-produto-estado__icon svg g path {
  fill: currentColor;
  stroke: currentColor;
}

/* ===================================
   SEARCH & FILTER SYSTEM - Responsive Layout
   ===================================
   =================================== */

/* 
.search-box {
  width: 100%;
  position: relative;
  z-index: var(--z-index-search);

  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-gap);
  align-items: center;
  justify-content: space-between;

  margin-bottom: var(--spacing-xl);
   border-radius: var(--border-radius-none);

  @media (min-width: 769px) and (max-width: 1199px) {
    padding: var(--spacing-l);
    gap: var(--spacing-base);
    margin-bottom: var(--spacing-xxl);
  }


  .form-inline {
    display: flex;
    min-width: 280px;
    flex: 1;
    max-width: 600px;
    gap: var(--spacing-s);
    align-items: center;
    justify-content: flex-start;

    @media (max-width: 768px) {
      flex-wrap: wrap;
      justify-content: center;
      min-width: 100%;
      gap: var(--spacing-xs);
    }
  }

  .search-icons {
    display: flex;
    flex-shrink: 0;
    gap: var(--spacing-s);
    align-items: center;

    @media (max-width: 768px) {
      width: 100%;
      justify-content: center;
      margin-top: var(--spacing-s);
      gap: var(--spacing-xs);
      flex-wrap: wrap;
    }
  }

  form > * {
    margin: 0;
  }
} 
*/

/* ===================================
   FORM COMPONENTS - Filter Only
   =================================== */

/* Note: #searchInput styles moved to components/_search-box.pcss */

.filter-container {
  align-items: center;
  gap: 1rem;
  gap: var(--layout-gap);
}

.filter-container .filter-form {
    display: grid;
    grid-gap: 1rem;
    grid-gap: var(--layout-gap);
    gap: 1rem;
    gap: var(--layout-gap);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    align-items: center;
  }

.filter-container .filter-search {
    display: grid;
    grid-template-columns: minmax(200px, 100%) auto;
    justify-content: end;
    align-items: center;
    grid-gap: 1rem;
    grid-gap: var(--layout-gap);
    gap: 1rem;
    gap: var(--layout-gap);
  }

.filter-container .filter-search  > div {
      display: flex;
      align-items: center;
      gap: 1rem;
      gap: var(--layout-gap);
    }

.filter-container .filter-search input {
    max-width: 280px;
    padding: 0.5rem 0.5rem 0.5rem 2.25rem;
  }

.filter-container .filter-group input,.filter-container .filter-group select {
    padding: 0.5rem 0.5rem;
    padding: var(--spacing-xs) var(--spacing-xs);
  }

/* Mobile table layout - stacked cards */

@media (max-width: 768px) {
  table {
    border-collapse: separate;
    border-spacing: 0 16px;
  }

  table tbody,
  table thead {
    display: grid;
    grid-auto-flow: row dense;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-column-gap: 2rem;
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }

  table tr {
    border: 1px solid var(--border-color);
     border-radius: 0;
     border-radius: var(--border-radius-none);
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-base);
  }

  table td {
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding: 0.5rem 0.75rem 0 0.75rem;
    padding: var(--table-padding-mobile);
  }

  table thead {
    display: none;
  }

  table td:before {
    content: attr(data-label);
    display: grid;
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    font-size: 0.75rem;
    font-size: var(--font-size-1);
    color: var(--color-text--muted);
    margin-right: 1rem;
    margin-right: var(--spacing-base);
    /* margin-block-end: var(--spacing-xxs); */
  }

  tr:hover td:before {
    color: var(--table-hover-muted-color);
  }

  td[data-label="Ações"] {
    display: inline-block;
    min-width: 100%;
    text-align: right;
  }

    td[data-label="Ações"]::before {
      display: none;
    }

    td[data-label="Ações"] a {
      padding-right: 2rem;
    }
      td[data-label="Ações"] a  > svg {
        height: 1.25rem;
      }

  td[data-label="Seguro"],
  td[data-label="Estado"] {
    text-align: left;
  }

  td[data-label="#"] {
    width: 100%;
  }
}

/* Small (414px) - iPhone 12/13 Pro */

@media (min-width: 414px) {
  /* search-box styles moved to components/_search-box.pcss */
}

/* Medium (769px) - iPad */

@media (min-width: 769px) {
  table {
    border-collapse: collapse;
  }

  table tbody,
  table thead {
    display: table-row-group;
    grid-template-columns: none;
    -moz-column-gap: 0;
         column-gap: 0;
  }

  table tr {
    border: none;
    border-bottom: var(--table-border);
    margin-bottom: 0;
    border-radius: 0;
  }

  table td {
    display: table-cell;
    grid-template-columns: none;
    padding: 0.75rem 0.875rem;
    padding: var(--table-padding);
  }

  table thead {
    display: table-header-group;
  }

  table td:before {
    display: none;
  }

  td[data-label="Ações"] {
    display: flex;
    text-align: center;
  }

    td[data-label="Ações"]  > * {
      padding-right: 1rem;
    }

    td[data-label="Ações"]  > :last-child {
      padding-right: 0;
    }

    td[data-label="Ações"]::before {
      display: none;
    }

  td[data-label="Seguro"],
  td[data-label="Estado"] {
    text-align: center;
  }

  td[data-label="#"] {
    width: 2.5rem;
  }
}

/* Large (1024px) - Desktop */

@media (min-width: 1024px) {
  .filter-container .filter-form {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/* Extra Large (1280px) - Large desktop */

@media (min-width: 1280px) {
  .table-wrap {
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
  }
}

/* Extra Extra Large (1440px) - 4K+ */

@media (min-width: 1440px) {
  .filter-container .filter-form {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
}

/* a[href^="mailto:"], */

a[href^="tel:"],
a[href^="sms:"],
a[href^="file:"],
a[rel~="external"],
a[rel~="bookmark"],
a[download] {
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  background-position: 0rem 50%;
  display: inline-block;
  -moz-print-color-adjust: exact;
  -ms-print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  padding-left: 1.25rem;
}

/* a[href^="mailto:"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M1,5 39,5 39,35 1,35 1,5 20,22 39,5' stroke='%23232323' stroke-width='3' fill='none' /></svg>");
} */

a[href^="tel:"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='none' stroke='%23232323' stroke-width='3'><path d='M8,1 34,1 34,39 8,39Z M12,5 30,5 30,30 12,30Z' /><circle cx='21' cy='34' r='2' /></g></svg>");
}

a[href^="sms:"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M2,2 38,2 38,28 22,28 12,38 12,28 2,28Z' fill='none' stroke='%23232323' stroke-width='3'/></svg>");
}

a[href^="file:"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M5,2 28,2 35,9 35,38 5,38Z M28,2 28,9 35,9' fill='none' stroke='%23232323' stroke-width='3'/></svg>");
}

a[download] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M5,2 28,2 35,9 35,38 5,38Z M28,2 28,9 35,9 M20,10 20,30 M11,21 20,30 29,21' fill='none' stroke='%23232323' stroke-width='3'/></svg>");
}

a[rel~="external"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M28,4 39,4 39,15 M39,4 23,20 M28,9 7,9 7,34 35,34 35,15' fill='none' stroke='%23232323' stroke-width='3'/></svg>");
}

a[rel~="bookmark"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M5,2 35,2 35,38 20,25 5,38Z' fill='none' stroke='%23232323' stroke-width='3'/></svg>");
}

/* input images */

/* input[type="date"], */

/* input[type="datetime-local"], */

input[type="email"],
input[type="month"],
/* input[type="number"], */
input[type="password"],
input[type="search"],
input[type="tel"],
/* input[type="time"], */
input[type="url"],
input[type="week"] {
  padding-left: 2.25rem;
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  background-position: 0.5rem 50%;
}

/* input[type="date"], */

/* input[type="datetime-local"], */

input[type="month"],
input[type="week"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><rect x='1' y='5' width='37' height='7' fill='%23e8e8e8' /><path d='M1,5 37,5 37,37 1,37 Z M1,13 37,13 37,21 1,21 1,29 37,29 M7,5 7,37 13,37 13,5 19,5 19,37 25,37 25,5 31,5 31,37' stroke='%23ccc' stroke-width='3' fill='none' /></svg>");
}

input[type="email"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M1,5 39,5 39,35 1,35 1,5 20,22 39,5' stroke='%23848e9f' stroke-width='3' fill='none' /></svg>");
}

/* input[type="time"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='19' fill='none' stroke='%23ccc' stroke-width='3' /><path d='M21,20 8.5,20' stroke='%23ccc' stroke-width='3' /><path d='M20,21 20,5' stroke='%23ccc' stroke-width='3' /></svg>");
} */

input[type="search"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M36,36 20,20' stroke='currentColor' stroke-width='3' /><circle cx='15' cy='15' r='14' fill='none' stroke='currentColor' stroke-width='3' /></svg>");
}

input[type="password"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='15' r='10' fill='none' stroke='%23848e9f' stroke-width='3' /><path fill='white' stroke='%23848e9f' stroke-width='3' d='M5,19 35,19 35,39 5,39Z M20,25 20,30' /></svg>");
}

input[type="tel"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='none' stroke='%23848e9f' stroke-width='3'><path d='M8,1 34,1 34,39 8,39Z M12,5 30,5 30,30 12,30Z' /><circle cx='21' cy='34' r='2' /></g></svg>");
}

input[type="url"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='none' stroke='%23848e9f' stroke-width='3'><circle cx='20' cy='20' r='19'  /><path d='M2,20 38,20 M20,2 C7,2 7,38 20,38 33,38 33,2 20,2 20,2 20,38 20,38' /></g></svg>");
}

/* input[type="number"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M26,4 21,36 M15,4 10,36 M4,15 36,15 M2,26 34,26' fill='none' stroke='%23ccc' stroke-width='3' /></svg>");
} */

/* input[type="date"], */

/* input[type="datetime-local"], */

input[type="month"],
input[type="week"],
input[type="email"],
input[type="time"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="url"]
/* input[type="number"]  */
{
  -moz-print-color-adjust: exact;
  -ms-print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.vich-image-small {
	width: 2rem * 2;
	width: var(--spacing-xl) * 2;
	height: auto;
}

.vich-image-medium {
	width: calc(2rem * 1.75);
	width: calc(var(--spacing-xl) * 1.75);
	height: auto;
}

.vich-image {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 1rem;
	gap: var(--spacing-base);
	padding: 1.5rem;
	padding: var(--spacing-l);
	max-width: calc(2rem * 12);
	max-width: calc(var(--spacing-xl) * 12);
	flex-wrap: wrap;
}

.vich-image  > div {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 1rem;
		gap: var(--spacing-base);
	}

/* Custom styles for the file input button with icon */

.upload-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    gap: var(--spacing-xs);
    padding: 0.875rem 1.5rem;
    padding: var(--button-padding-small);
    font-size: 0.75rem;
    font-size: var(--font-size-1);
    color: var(--slate-700);
    cursor: pointer;
    transition: all 150ms ease-in-out;
    transition: all var(--transition-fast);
    max-width: -moz-fit-content;
    max-width: fit-content;
}

.upload-button:hover {
    background-color: var(--link-color);
    color: var(--link-color);
    border-color: var(--link-color);
}

.upload-button span {
    font-size: 0.75rem;
    font-size: var(--font-size-1);
}

.upload-button svg {
    width: 1rem;
    width: var(--spacing-base);
    height: 1rem;
    height: var(--spacing-base);
    fill: currentColor;
}

.upload-button:focus-within {
    outline: none;
    border-color: var(--primary-800);
    box-shadow: 0 0 0 3px var(--primary-200);
}

.delete-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	gap: var(--spacing-xs);
	font-size: calc(0.875rem - 0.1rem);
	font-size: calc(var(--font-size-2) - 0.1rem);
	/* color: #555; */
}

.delete-option input[type="checkbox"] {
	cursor: pointer;
}

.image-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* border-radius: var(--border-radius-small); */
	border: 1px solid var(--border-color); 
}

.image-preview img {
	max-width: 100%;
	height: auto;
	transition: transform 150ms ease-in-out;
	transition: transform var(--transition-fast);
}

.image-preview img:hover {
	transform: scale(1.05);
}

.download-link {
	color: var(--primary-500);
	-webkit-text-decoration: none;
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 600;
	font-weight: var(--font-weight-bold);
	transition: color 150ms ease-in-out;
	transition: color var(--transition-fast);
}

.download-link:hover {
	color: var(--primary-700);
}

/* ----------------------------------
    Info Box Component
---------------------------------- */

.info-box {
	display: grid;
	grid-template-columns: minmax(200px, 1fr) minmax(400px, 4fr); /* Adjusted for better balance */
	grid-gap: 1.5rem;
	grid-gap: var(--spacing-l);
	gap: 1.5rem;
	gap: var(--spacing-l);
	background: var(--card-background);
	border-radius: 0.5rem;
	border-radius: var(--border-radius-medium); /* Consistent radius */
	overflow: hidden;
	transition: box-shadow 150ms ease-in-out ease;
	transition: box-shadow var(--transition-fast) ease; /* Smooth transition */
	margin-bottom: 0.875rem;
	margin-bottom: var(--spacing-m);
}

.info-box:hover {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	box-shadow: var(--shadow-large);
}

.info-box__left_panel {
	background: linear-gradient(180deg, var(--accent-surface) 0%, var(--accent-surface-dark) 100%);
	padding: 1.5rem;
	padding: var(--spacing-l);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center; /* Centered content */
	gap: 0.875rem;
	gap: var(--spacing-m); /* Consistent gap */
	min-height: 100%;
	border-right: 1px solid var(--border-color); /* Visual separation */
}

.info-box__left_panel:hover {
	background: linear-gradient(180deg, var(--accent-surface-dark) 0%, var(--accent-surface) 100%);
}

.info-box__left_panel > img {
	width: 100%;
	max-width: 150px; /* Prevent overflow */
	aspect-ratio: 1/1; /* Square images */
	-o-object-fit: cover;
	   object-fit: cover;
	border-radius: 0.5rem;
	border-radius: var(--border-radius-medium);
	mix-blend-mode: normal; /* Changed from darken */
}

.info-box__date {
	font-size: max(1.5rem, min(2vw, 1.25rem));
	font-size: max(var(--font-size-6), min(2vw, var(--font-size-5))); /* Scalable */
	font-weight: 600;
	font-weight: var(--font-weight-bold);
	color: var(--slate-100);
	line-height: 1.3;
	text-align: center;
}

.info-box__time {
	font-size: max(1.125rem, min(1.8vw, 1rem));
	font-size: max(var(--font-size-4), min(1.8vw, var(--font-size-3)));
	color: var(--slate-100); /* Higher contrast */
	text-align: center;
}

.info-box__status {
	display: inline-flex;
	gap: 0.75rem;
	gap: var(--spacing-s);
	margin-top: 0.875rem;
	margin-top: var(--spacing-m);
	padding: 0.75rem 0.875rem;
	padding: var(--spacing-s) var(--spacing-m);
	background: var(--color-surface);
	border-radius: 0.25rem;
	border-radius: var(--border-radius-small);
	font-weight: 600;
	font-weight: var(--font-weight-bold);
	font-size: 0.875rem;
	font-size: var(--font-size-2);
	align-items: center;
	justify-content: center;
}

.info-box__subtitle {
    font-size: max(1.125rem, min(2vw, 1rem));
    font-size: max(var(--font-size-4), min(2vw, var(--font-size-3)));
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    color: var(--slate-100);
    text-align: center;
    margin: 0;
}

.info-box__right_panel {
	padding: 1.5rem;
	padding: var(--spacing-l); /* More breathing room */
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	gap: var(--spacing-m); /* Consistent section spacing */
}

.info-box__section {
	display: flex;
	flex-direction: column;
	/* gap: var(--spacing-s); */
}

.info-box__section-title {
	/* font-size: var(--font-size-3); */
	font-size: small;
	font-weight: 600;
	font-weight: var(--font-weight-bold);
	color: var(--color-text);
	margin-bottom: 0.5rem;
	margin-bottom: var(--spacing-xs);
	/* padding-bottom: var(--spacing-xs); */
	border-bottom: var(--border-default);
}

.info-box__text {
	color: var(--color-text);
	font-size: 1rem;
	font-size: var(--font-size-3);
	line-height: 1.25rem;
	line-height: var(--line-height-2);
	margin-bottom: 0.75rem;
	margin-bottom: var(--spacing-s);
	border-bottom: 1px dotted var(--border-color);
}

.info-box__text--muted {
	color: var(--color-text--muted);
	font-size: 0.875rem;
	font-size: var(--font-size-2);
}

.info-box__metadata {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	gap: var(--spacing-s);
	flex-wrap: wrap;
    border-top: 1px dashed var(--border-color);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-top: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
    font-size: 0.875rem;
    font-size: var(--font-size-2);
}

.info-box__icon {
	color: var(--color-text--muted);
	font-size: 1rem;
	font-size: var(--font-size-3);
}

/* Tabs */

.info-box__tab-section {
	display: none;
    animation: fadeIn 250ms ease-in-out ease-in-out;
    animation: fadeIn var(--transition-normal) ease-in-out;
}

.info-box__tab-section.active {
	display: block;
}

.info-box__tabs {
	display: flex;
	/* border-bottom: 1px solid var(--border-color); */
	/* margin-bottom: var(--spacing-l); */
	margin-top: 0.875rem;
	margin-top: var(--spacing-m);
    margin-bottom: 0.875rem;
    margin-bottom: var(--spacing-m);
	gap: 0.75rem;
	gap: var(--spacing-s); /* Space between tabs */
}

.info-box__tabs button {
	flex: 1; /* Equal width */
	background: transparent;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 0.75rem 0.875rem;
	padding: var(--spacing-s) var(--spacing-m);
	font-size: 1rem;
	font-size: var(--font-size-3);
	/* font-weight: var(--font-weight-bold); */
	color: var(--color-text--muted);
	border-bottom: 2px solid transparent; /* Smooth active state */
	transition: all 150ms ease-in-out ease;
	transition: all var(--transition-fast) ease;
}

.info-box__tabs button.active {
	color: var(--color-text);
	border-bottom-color: var(--accent-surface); /* Highlight active tab */
}

.info-box__tabs button:hover {
	background: #0d9488;
	background: var(--primary-400, #0d9488); /* Updated fallback to use primary */
	color: var(--slate-100);
}

.info-box__tabs button:focus-visible {
	outline: 2px solid var(--accent-surface);
	outline-offset: 2px;
}

/* Responsive Design */

@media (max-width: 1024px) {
	.info-box {
		grid-template-columns: minmax(150px, 1fr) minmax(300px, 4fr); /* Smaller left panel */
		gap: 0.875rem;
		gap: var(--spacing-m);
	}

	.info-box__left_panel {
		padding: 0.875rem;
		padding: var(--spacing-m);
	}

	.info-box__right_panel {
		padding: 0.875rem;
		padding: var(--spacing-m);
	}
}

@media (max-width: 768px) {
	.info-box {
		grid-template-columns: 1fr;
		gap: 0.75rem;
		gap: var(--spacing-s);
	}

	.info-box__left_panel {
		padding: 0.875rem;
		padding: var(--spacing-m);
		border-right: none;
		border-bottom: 1px solid var(--border-color);
	}

	.info-box__right_panel {
		padding: 0.875rem;
		padding: var(--spacing-m);
	}

	.info-box__tabs {
		gap: 0.5rem;
		gap: var(--spacing-xs);
		flex-wrap: wrap;
	}

	.info-box__tabs button {
		width: 100%;
		text-align: left;
		border-bottom: 1px solid var(--border-color);
		flex: none; /* Removed conflicting flex */
	}

	.info-box__tabs button.active {
		border-bottom-color: var(--accent-surface);
	}


}

@media (max-width: 480px) {
	.info-box__subtitle,
	.info-box__text {
		font-size: 0.875rem;
		font-size: var(--font-size-2); /* Smaller text for tiny screens */
	}

	.info-box__left_panel > img {
		max-width: 100px;
	}
}

/* Animação suave para tabs */

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

/* ----------------------------------
    Info Grid Component
---------------------------------- */

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 1rem;
    grid-gap: var(--spacing-base);
    gap: 1rem;
    gap: var(--spacing-base);
    margin-bottom: 1.5rem;
    margin-bottom: var(--spacing-l);
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    gap: var(--spacing-xxs);
}

.info-label {
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    color: var(--color-text--muted);
    font-size: 0.875rem;
    font-size: var(--font-size-2);
}

.info-value {
    font-size: 1rem;
    font-size: var(--font-size-3);
    color: var(--color-text);
}

/* ----------------------------------
    Description Box Component
---------------------------------- */

.description-box {
    background: var(--color-surface);
    border: var(--border-default);
    border-radius: 0.25rem;
    border-radius: var(--border-radius-small);
    padding: 1rem;
    padding: var(--spacing-base);
    margin-top: 0.5rem;
    margin-top: var(--spacing-xs);
}

.description-box p {
    margin: 0;
}

/* ----------------------------------
    Badge Components
---------------------------------- */

.badge-success {
    background: var(--validation-success-bg);
    color: rgb(5, 137, 62);
    color: var(--validation-success);
    padding: 0.25rem 0.75rem;
    padding: var(--spacing-xxs) var(--spacing-s);
    border-radius: 0.75rem;
    border-radius: var(--border-radius-large);
    font-size: 0.875rem;
    font-size: var(--font-size-2);
    font-weight: 600;
    font-weight: var(--font-weight-bold);
}

.badge-error {
    background: var(--validation-error-bg);
    color: rgb(197, 54, 55);
    color: var(--validation-error);
    padding: 0.25rem 0.75rem;
    padding: var(--spacing-xxs) var(--spacing-s);
    border-radius: 0.75rem;
    border-radius: var(--border-radius-large);
    font-size: 0.875rem;
    font-size: var(--font-size-2);
    font-weight: 600;
    font-weight: var(--font-weight-bold);
}

.badge-warning {
    background: var(--validation-warning-bg);
    color: rgb(148, 105, 0);
    color: color(display-p3 0.57061 0.41036 0);
    color: var(--validation-warning);
    padding: 0.25rem 0.75rem;
    padding: var(--spacing-xxs) var(--spacing-s);
    border-radius: 0.75rem;
    border-radius: var(--border-radius-large);
    font-size: 0.875rem;
    font-size: var(--font-size-2);
    font-weight: 600;
    font-weight: var(--font-weight-bold);
}

/* ----------------------------------
    Subsection Spacing
---------------------------------- */

.info-box__subsection {
    margin-bottom: 2rem;
    margin-bottom: var(--spacing-xl);
}

.info-box__subsection:last-child {
    margin-bottom: 0;
}

/* Responsive Design for Info Grid */

@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

ul, ol {margin: 0; padding: 0;}

ul:not([class]),
ol:not([class]) {
	margin: 1rem 0;
	padding-left: 2rem;
}

ul:not([class]) ul,ol:not([class]) ul,ul:not([class]) ol,ol:not([class]) ol {
		margin: 0;
	}

li {
	font-size: 1rem;
	line-height: 1.5rem;
	line-height: var(--line-height-3);
	max-width: 80ch;
	max-width: calc(80ch - 3rem);
}

dl {
	margin: 1rem 0;
	font-size: 1rem;
	line-height: 1.5rem;
	max-width: 80ch;
}

dt {
	font-weight: 600;
	font-weight: var(--font-weight-bold);
	margin-top: 1rem;
}

dd {
	margin-left: 1rem;
	font-style: italic;
}

details {
  border: 1px solid var(--border-color);
  display: block;
  padding: 0 1rem;
  padding: 0 var(--spacing-base);
}

details summary {
  margin: 0 calc(1rem * -1);
  margin: 0 calc(var(--spacing-base) * -1);
  padding: 1rem;
  padding: var(--spacing-base);
}

details[open] summary {
  border-bottom: 1px solid var(--border-color);
}

details + details {
  border-top: 0;
  border-radius: 0;
}

details:first-of-type {
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

details:last-of-type {
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

.tooltip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.tooltip-content {
  visibility: hidden;
  position: absolute;
  z-index: 1000;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background-color: #333;
  color: white;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Arrow */

.tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

/* Show tooltip on hover */

.tooltip:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
}

/* Extra small tooltip */

.tooltip-xs .tooltip-content {
  font-size: 12px;
  padding: 6px 8px;
}

/* Animation */

@keyframes tooltipFade {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.tooltip:hover .tooltip-content {
  animation: tooltipFade 0.2s ease-in-out;
}

/* Optional: Add different positions */

.tooltip[data-position="top"] .tooltip-content {
  bottom: 125%;
  top: auto;
}

.tooltip[data-position="bottom"] .tooltip-content {
  top: 125%;
  bottom: auto;
}

.tooltip[data-position="bottom"] .tooltip-content::after {
  bottom: 100%;
  top: auto;
  border-color: transparent transparent #333 transparent;
}

/* Optional: Add different themes */

.tooltip[data-theme="light"] .tooltip-content {
  background-color: white;
  color: #333;
  border: 1px solid #ddd;
}

.tooltip[data-theme="light"] .tooltip-content::after {
  border-color: white transparent transparent transparent;
}

/* ===================================
   CHART RESPONSIVE SYSTEM - UNIFICADO
   ===================================
   Máximo 3 gráficos por linha
   Altura consistente para todos os gráficos
   Sistema responsivo completo
   Remoção de duplicações e conflitos
   =================================== */

/* CSS Custom Properties - Variáveis globais */

:root {
  --chart-max-height: 16rem;        /* 256px - Altura máxima base */
  --chart-grid-max-cols: 3;         /* Máximo 3 colunas */
  --chart-min-width: 280px;         /* Largura mínima por gráfico */
  --chart-gap: var(--spacing-base, 1rem);
  --chart-padding: var(--spacing-s, 0.5rem);
}

/* ===================================
   CHART AREA - Container Principal
   =================================== */

.chart-area {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-template-columns: repeat(auto-fit, minmax(var(--chart-min-width), 1fr));
  grid-gap: 1rem;
  grid-gap: var(--chart-gap);
  gap: 1rem;
  gap: var(--chart-gap);
  width: 100%;
  align-items: stretch;              /* Altura uniforme para todos os gráficos */
  max-width: 100%;
}

/* ===================================
   CHART CONTAINER - Container Individual
   =================================== */

.chart-container {
  /* Sizing - Altura consistente */
  height: 16rem;
  height: var(--chart-max-height);   /* Altura fixa e consistente */
  min-height: 16rem;
  min-height: var(--chart-max-height);
  max-height: 16rem;
  max-height: var(--chart-max-height);
  width: 100%;
  
  /* Layout */
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  padding: var(--chart-padding);
  
  /* Styling */
  border-radius: 0.5rem;
  border-radius: var(--border-radius-medium, 0.5rem);
  background: #fff;
  background: var(--card-background, #fff);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: var(--box-shadow-small, 0 2px 4px rgba(0,0,0,0.1));
  
  /* Responsive sizing */
}

@media (max-width: 768px) {

.chart-container {
    height: calc(16rem * 0.85);
    height: calc(var(--chart-max-height) * 0.85);  /* 85% em tablet */
}
  }

@media (max-width: 480px) {

.chart-container {
    height: calc(16rem * 0.75);
    height: calc(var(--chart-max-height) * 0.75);  /* 75% em mobile */
}
  }

/* Canvas responsivo */

.chart-container canvas {
  width: 100% !important;
  height: calc(100% - 0rem) !important;  /* Deixe espaço para título */
  max-height: 100% !important;
  -o-object-fit: contain;
     object-fit: contain;
}

/* Título do gráfico */

.chart-container h4,
.chart-container h3 {
  margin: 0 0 0.75rem 0;
  margin: 0 0 var(--spacing-s, 0.5rem) 0;
  font-size: 1rem;
  font-size: var(--font-size-3, 1.125rem);
  line-height: 1.2;
  color: var(--color-text-primary);
}

/* ===================================
   RESPONSIVE BREAKPOINTS
   =================================== */

/* Desktop (769px+) - Até 3 gráficos por linha */

@media (min-width: 769px) {
  .chart-area {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: calc(1rem * 1.5);
    gap: calc(var(--chart-gap) * 1.5);
  }
}

/* Tablet (481px-768px) - Até 2 gráficos por linha */

@media (min-width: 481px) and (max-width: 768px) {
  .chart-area {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  
  .chart-container {
    height: calc(16rem * 0.9);
    height: calc(var(--chart-max-height) * 0.9);
  }
}

/* Mobile (480px-) - 1 gráfico por linha */

@media (max-width: 480px) {
  .chart-area {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    gap: var(--spacing-s);
  }
  
  .chart-container {
    height: calc(16rem * 0.8);
    height: calc(var(--chart-max-height) * 0.8);
    padding: 0.5rem;
    padding: var(--spacing-xs);
  }
}

/* ===================================
   VARIAÇÕES ESPECÍFICAS DE GRÁFICOS
   =================================== */

/* Gráficos menores (doughnut, pie) */

.chart-container.small-chart {
  height: calc(16rem * 0.6);
  height: calc(var(--chart-max-height) * 0.6);
}

/* Gráficos de linha longa (timeline) */

.chart-container.timeline-chart {
  height: calc(16rem * 1.2);
  height: calc(var(--chart-max-height) * 1.2);
}

/* Gráficos de serviço específico */

.chart-service {
  max-width: 100%;
}

/* Gráficos de ocorrência por mês */

.chart-ocorrencias-mes {
  max-width: 100%;
}

/* ===================================
   CHART CARD COMPONENTS (Legacy Support)
   =================================== */

.chart-card {
  display: flex;
  flex-direction: column;
  height: 16rem;
  height: var(--chart-max-height);
  min-height: 16rem;
  min-height: var(--chart-max-height);
  max-height: 16rem;
  max-height: var(--chart-max-height);
  width: 100%;
  padding: 0.75rem;
  padding: var(--chart-padding);
  border-radius: 0.5rem;
  border-radius: var(--border-radius-medium, 0.5rem);
  background: #fff;
  background: var(--card-background, #fff);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: var(--box-shadow-small, 0 2px 4px rgba(0,0,0,0.1));
}

.chart-card.chart-card--large {
    grid-column: span 1;
  }

.chart-card.chart-card--medium {
    grid-column: span 1;
  }

@media (min-width: 769px) {
    .chart-card.chart-card--large {
      grid-column: span 2;  /* Gráficos grandes ocupam mais espaço no desktop */
    }
  }

/* ===================================
   CHART SPLIT LAYOUT (Para gráficos com legenda)
   =================================== */

.chart-split {
  display: flex;
  gap: 0.75rem;
  gap: var(--spacing-s);
  height: 100%;
}

__chart.chart-split {
    flex: 1;
    min-width: 0;
  }

__legend.chart-split,__summary.chart-split {
    flex: 0 0 200px;
    padding-left: 0.75rem;
    padding-left: var(--spacing-s);
    border-left: 1px solid var(--border-color-light);
  }

@media (max-width: 768px) {

.chart-split {
    flex-direction: column;
}
    
    __legend.chart-split,__summary.chart-split {
      flex: 0 0 auto;
      padding-left: 0;
      border-left: none;
      padding-top: 0.75rem;
      padding-top: var(--spacing-s);
      border-top: 1px solid var(--border-color-light);
    }
  }

/* ===================================
   UTILITY CLASSES
   =================================== */

.chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-text-secondary);
  font-style: italic;
}

.chart-error {
  color: #dc3545;
  color: var(--error, #dc3545);
  background: #f8d7da;
  background: var(--error-light, #f8d7da);
  padding: 0.75rem;
  padding: var(--spacing-s);
  border-radius: 0.25rem;
  border-radius: var(--border-radius-small);
  border: 1px solid #dc3545;
  border: 1px solid var(--error, #dc3545);
}

/* ===================================
   INFORMATION COMPONENT - Chart Info Boxes
   ===================================
   Responsive info boxes that don't interfere with search-box
   Proper spacing and positioning
   Mobile-friendly layout
   =================================== */

.informacao--chart {
  --informacao_max-width: 25rem;
  display: flex;
  flex-direction: column;
  max-width: 25rem;
  max-width: var(--informacao_max-width);
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  border-radius: var(--border-radius-none);
  background-color: light-dark(var(--info-100), var(--info-800));
  min-width: 340px;
  padding: 0.75rem;
  padding: var(--gap-sm);

  /* Positioning - ensure proper z-index hierarchy */
  position: relative;
  z-index: 1;                               /* Below search-box (z-index: 15) */

  /* Responsive behavior */
}

@media (max-width: 768px) {

.informacao--chart {
    min-width: 280px;                     /* Smaller on mobile */
    max-width: 100%;                      /* Full width on mobile */
    margin-bottom: 1rem;
    margin-bottom: var(--spacing-base);   /* Proper spacing */
}
  }

@media (max-width: 480px) {

.informacao--chart {
    min-width: 240px;                     /* Minimum for small screens */
    padding: 0.75rem;
    padding: var(--spacing-s);            /* Compact padding */
}
  }

.informacao--chart .informacao__title {
  display: flex;
  gap: 1rem;
  gap: var(--layout-gap);
  padding-left: 1rem;
  padding-right: 1rem;
  padding-left: var(--layout-gap);
  padding-right: var(--layout-gap);
}

.informacao--chart .informacao__title h3 {
    color: var(--color-text-info);
    font-size: 0.875rem;
    font-size: var(--font-size-2);
    font-weight: bold;
  }

.informacao--chart .informacao__icon {
  width: 1.5rem;
  width: var(--spacing-l);
}

.informacao--chart .informacao__icon path {
    stroke: var(--color-text-info);
  }

.informacao--chart .informacao__description {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: start;
  padding-left: calc(1.5rem + 1rem);
  padding-left: calc(var(--spacing-l) + var(--layout-gap));
  margin-bottom: 0.75rem;
  margin-bottom: var(--spacing-s);
}

.informacao--chart .informacao__description p {
    font-size: 0.875rem;
    font-size: var(--font-size-2);
  }

.informacao--chart .informacao__actions {
  display: flex;
  gap: 0.75rem;
  gap: var(--spacing-s);
  align-items: center;
  justify-content: flex-end;
  margin-right: 1.5rem;
  margin-right: var(--spacing-l);
}

/* PAGES */

:root {
	--home-page-background: url("https://cercifaf.pt//images/slide/slide-1.jpg");
}

.home-overlay {
    margin: calc(1rem * -1) 0 0 0 ;
    margin: calc(var(--layout-main-margin-block) * -1) 0 0 0 ;
	background-image: url("https://cercifaf.pt//images/slide/slide-1.jpg");
	background-image: var(--home-page-background);
	background-position: center;
	background-size: cover;
	-o-border-image: radial-gradient(
    circle,
    rgb(0, 125, 196) 0%,
    rgb(0, 3, 61) 100%
  ) 1;
	   border-image: radial-gradient(
    circle,
    rgb(0, 125, 196) 0%,
    rgb(0, 3, 61) 100%
  )
		fill 1;
	-o-border-image: radial-gradient(
    circle,
    color(display-p3 0.18945 0.48393 0.7598) 0%,
    color(display-p3 0.0017 0.01045 0.22979) 100%
  ) 1;
	   border-image: radial-gradient(
    circle,
    color(display-p3 0.18945 0.48393 0.7598) 0%,
    color(display-p3 0.0017 0.01045 0.22979) 100%
  )
		fill 1;
	-o-border-image: var(--gradient-blue-01) 1;
	   border-image: var(--gradient-blue-01)
		fill 1;
	padding: clamp(
    1rem,
    0.5238rem + 2.381vw,
    2rem
  );
	padding: var(--layout-app-padding);
}

.home-overlay  > * {
		text-align: center;
		color: var(--slate-200);
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
		text-shadow: var(--shadow-text-01);
	}

.home-overlay p {
		margin-left: auto;
		margin-right: auto;
	}

.calendar {
    min-width: 100%;
    max-width: min(100vw - 2rem, 1900px);
    max-width: var(--layout-content-max-width);
    margin: 1rem auto;
    margin: var(--spacing-base) auto;
    padding: 0 1rem;
    padding: 0 var(--layout-padding-inline);
    background: var(--calendar-background);
    color: var(--calendar-text);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    margin-bottom: var(--calendar-header-margin);
    flex-wrap: wrap;
    gap: 1rem;
    gap: var(--calendar-header-gap);
}

.calendar-header h2 {
    font-size: 1.5rem;
    font-size: var(--calendar-title-size);
    margin: 0;
    text-align: center;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 0.25rem;
    grid-gap: var(--calendar-grid-gap);
    gap: 0.25rem;
    gap: var(--calendar-grid-gap);
}

.calendar-weekday {
    text-align: center;
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    padding: 1rem;
    padding: var(--calendar-day-padding);
    font-size: 0.875rem;
    font-size: var(--font-size-2);
    color: var(--color-text-week);
}

.calendar-day {
    min-height: 100px;
    min-height: var(--calendar-min-day-height);
    text-align: left;
    padding: 1rem;
    padding: var(--calendar-day-padding);
    border: var(--calendar-border);
     border-radius: 0;
     border-radius: var(--border-radius-none);
    position: relative;
}

.calendar-day .day-number {
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    margin-bottom: 0.5rem;
    margin-bottom: var(--spacing-xs);
    font-size: 0.875rem;
    font-size: var(--font-size-2);
}

.calendar-day.today {
    background-color: var(--calendar-today-background);
    color: var(--primary-500);
    border-color: var(--border-color);
    background-image: repeating-linear-gradient( 45deg,
        var(--calendar-background),
        var(--calendar-other-month-background) 10px,
        /* var(--slate-600) 2px, */
        var(--slate-400) 10px
    );
}

.calendar-day.other-month {
    color: var(--calendar-other-month-text);
    background-color: var(--calendar-other-month-background);
    background-image: repeating-linear-gradient( 45deg,
        var(--calendar-background),
        var(--calendar-other-month-background) 4px,
        var(--slate-400) 4px
    );
}

.calendar-nav {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--color-text);
    padding: 0.5rem 1rem;
    padding: var(--calendar-nav-padding);
    border: var(--calendar-border);
     border-radius: 0;
     border-radius: var(--border-radius-none);
    font-size: 0.875rem;
    font-size: var(--calendar-nav-font-size);
    white-space: nowrap;
}

.calendar-events {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    gap: var(--calendar-event-gap);
    max-height: calc(100% - 25px);
    overflow-y: auto;
}

.calendar-event {
    font-size: 0.75rem;
    font-size: var(--calendar-event-font-size);
    font-size: x-small;
    padding: 0.25rem 0.5rem;
    padding: var(--calendar-event-padding);
    border-radius: 0.25rem;
    border-radius: var(--calendar-event-border-radius);
    background-color: var(--calendar-today-background);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-text-decoration: none;
    text-decoration: none;
    color: inherit;
    display: block;
    width: 100%;
    box-sizing: border-box;
    width: 20ch;
    word-wrap: break-word;
}

.calendar-event.status-requisitado {
    border-left-color: var(--calendar-event-requested-color);
    background: var(--info-200);
    color: var(--slate-800)
}

.calendar-event.status-pedido {
    border-left-color: var(--calendar-event-pending-color);
    background: var(--warning-200);
    color: var(--slate-800)
}

.calendar-event.status-aprovado {
    border-left-color: var(--calendar-event-approved-color);
    background: var(--success-200);
    color: var(--slate-800)
}

.calendar-event.status-validado {
    border-left-color: var(--calendar-event-approved-color);
    background: var(--success-200);
    color: var(--slate-800)
}

.calendar-event.status-não {
    border-left-color: var(--calendar-event-rejected-color);
    background: var(--error-200);
    color: var(--slate-800)
}

@media (max-width: 768px) {
    :root {
        --calendar-min-day-height: 80px;
        --calendar-day-padding: var(--spacing-xxs);
        --calendar-event-font-size: var(--font-size-1);
    }

    .calendar {
        padding: 0 0.5rem;
        padding: 0 var(--spacing-xs);
    }

    .calendar-header {
        justify-content: center;
    }

    .calendar-header h2 {
        order: -1;
        width: 100%;
        margin-bottom: 0.5rem;
        margin-bottom: var(--spacing-xs);
    }

    .calendar-weekday {
        padding: 0.25rem;
        padding: var(--spacing-xxs);
    }

    .calendar-event {
        padding: calc(0.25rem / 2) 0.5rem;
        padding: calc(var(--spacing-xxs) / 2) var(--spacing-xs);
        max-width: 100%;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.2;
        max-height: 3em;
    }
}

@media (max-width: 576px) {
    :root {
        --calendar-min-day-height: 60px;
    }

    .calendar-grid {
        gap: 0;
    }

    .calendar-weekday {
        padding: calc(0.25rem / 2);
        padding: calc(var(--spacing-xxs) / 2);
    }

    .calendar-day .day-number {
        font-size: 0.75rem;
        font-size: var(--font-size-1);
        margin-bottom: 0.25rem;
        margin-bottom: var(--spacing-xxs);
    }

    .calendar-event {
        font-size: calc(0.75rem * 0.9);
        font-size: calc(var(--font-size-1) * 0.9);
        padding: calc(0.25rem / 2) 0.25rem;
        padding: calc(var(--spacing-xxs) / 2) var(--spacing-xxs);
        -webkit-line-clamp: 2;
        max-height: 2.4em;
    }

    .calendar-day {
        max-height: 80px;
        overflow: hidden;
    }

    .calendar-weekday span {
        display: none;
    }

    .calendar-weekday::first-letter {
        display: inline;
    }

    .calendar-nav {
        padding: 0.25rem 0.5rem;
        padding: var(--spacing-xxs) var(--spacing-xs);
        font-size: 0.75rem;
        font-size: var(--font-size-1);
    }
}

/* ===================================
   LOGIN PAGE STYLES
   Full-screen background and page-specific styling
   =================================== */

body:has(.login-container),
body:has(.register-container) {
    background-image: url("https://cercifaf.pt//images/slide/slide-1.jpg");
    background-image: var(--login-bg-image, url("https://cercifaf.pt//images/slide/slide-1.jpg"));
    background-position: center;
    background-size: cover;
    -o-border-image: radial-gradient(circle, rgba(18, 127, 195, 0.75) 0%, hsl(235, 100%, 12%, 0.75) 100%) 1;
       border-image: radial-gradient(circle, rgba(18, 127, 195, 0.75) 0%, hsl(235, 100%, 12%, 0.75) 100%) fill 1;
    min-height: 100vh;
    min-height: 100dvh;
}

body:has(.login-container) input {
        background-color: oklch(from var(--slate-100) l c h / 0.2);
        border: 1px solid oklch(from var(--slate-200) l c h / 0.2);
        color: var(--slate-100);
        border-radius: 0.25rem;
        border-radius: var(--border-radius-small);
    }

body:has(.register-container) input {
        background-color: oklch(from var(--slate-100) l c h / 0.2);
        border: 1px solid oklch(from var(--slate-200) l c h / 0.2);
        color: var(--slate-100);
        border-radius: 0.25rem;
        border-radius: var(--border-radius-small);
    }

body:has(.login-container) button {
        margin-top: 1.5rem;
        margin-top: var(--spacing-l);
        border-radius: 0.25rem;
        border-radius: var(--border-radius-small);
    }

body:has(.register-container) button {
        margin-top: 1.5rem;
        margin-top: var(--spacing-l);
        border-radius: 0.25rem;
        border-radius: var(--border-radius-small);
    }

/* Webkit autofill styles */

input:-webkit-autofill,
input:-webkit-autofill:focus {
    -webkit-transition: background-color 0s 600000s, color 0s 600000s !important;
    transition: background-color 0s 600000s, color 0s 600000s !important;
}

/* ===================================
   LOGIN/REGISTER PAGE STYLES
   Uses design system variables for consistent theming
   =================================== */

.login-container {
    width: 100%;
    max-width: 40rem;
    padding: 1.5rem;
    background-color: var(--login-container-bg, oklch(from var(--slate-900) l c h / 0.45));
    border-radius: 1rem;
    box-shadow: var(--login-container-shadow, 0 8px 32px oklch(from var(--slate-700) l c h / 0.3));
    backdrop-filter: blur(8px);
    border: var(--login-container-border, 1px solid var(--slate-700));
}

.login-container__title {
    color: var(--slate-100);
    font-size: 1.875rem;
    font-size: var(--font-size-7);
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    text-align: center;
    margin-bottom: 2rem;
    margin-bottom: var(--spacing-xl);
}

/* Form Controls */

.login-container__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    gap: var(--spacing-base);
}

.form-control {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.login-container__label {
    color: var(--slate-100);
    margin-left: 0.5rem;
    margin-left: var(--spacing-xs);
    cursor: default;
    font-weight: normal;
    display: block;
    background: none;
    border: none;
    padding: 0;
}

/* Override form :has() rules to prevent border/outline on focus */

.form-control:has(input:focus) .login-container__label {
    outline: none;
    font-weight: normal;
    color: var(--slate-100);
}

.login-container__input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.25rem;
    background-color: oklch(from var(--slate-800) l c h / 0.3);
    border: 1px solid var(--slate-500);
    border-radius: 0.5rem;
    color: var(--primary-100);
    font-size: 1rem;
    transition: all 0.2s ease-in-out;
    background-image: var(--input-icon);
    background-repeat: no-repeat;
    background-position: 0.75rem center;
    background-size: 1rem;

}

@supports (color: lab(from red l 1 1% / calc(alpha + 0.1))) {
.login-container__input {
    background-color: oklch(from var(--slate-800) l c h / 0.2);

}
}

/* .login-container__input:focus {
    outline: none;
    border-color: var(--primary-500);
    background-color: oklch(from var(--slate-800) l c h / 0.2);
    box-shadow: 0 0 0 2px oklch(from var(--primary-500) l c h / 0.2);
    color: var(--slate-200);
} */

.login-container__input::-moz-placeholder {
    color: var(--color-text-placeholder);
}

.login-container__input::placeholder {
    color: var(--color-text-placeholder);
}

/* Button Styles */

.login-container button[type="submit"] {
    width: 100%;
    padding: 1rem;
    background-color: var(--primary-500);
    border: none;
    border-radius: 0.5rem;
    color: var(--slate-50);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-top: 1rem;
}

.login-container button:hover {
    background-color: var(--primary-600);
    transform: translateY(-1px);
}

.login-container button:active {
    transform: translateY(0);
}

/* Toast/Alert Styles */

.toast,
.alert {
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
}

.toast-error,
.alert-danger {
    background-color: var(--error-500);
    color: var(--slate-50);
    border: 1px solid oklch(from var(--error-600) l c h / 0.5);
}

/* Footer Styles */

.login-container__footer {
    margin-top: 2rem;
    text-align: center;
    /* font-size: var(--font-size-1); */
}

.login-container__footer p {
    color: var(--slate-200);
    font-weight: lighter;
    font-size: 0.75rem;
    font-size: var(--font-size-1);
    margin-left: 1rem;
    margin-right: 1rem;
}

.login-container__footer a {
    color: var(--primary-100);
    -webkit-text-decoration: none;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}

.login-container__footer a:hover {
    color: var(--primary-300);
}

/* Checkbox Styles */

.checkbox-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkbox-control input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    cursor: pointer;
}

/* ===================================
   REGISTRATION FORM STYLES
   Consistent with login form but for registration
   =================================== */

/* Registration Form Container - Now uses same styles as login container */

form[name="registration_form"] {
    width: 100%;
    max-width: 40rem;
    padding: 1.5rem;
    background-color: oklch(from var(--slate-900) l c h / 0.45);
    border-radius: 1rem;
    box-shadow: 0 8px 32px oklch(from var(--slate-700) l c h / 0.3);
    backdrop-filter: blur(8px);
    border: 1px solid var(--slate-700);
    margin: 2rem auto;
}

/* Form Title */

form[name="registration_form"] h1 {
    color: var(--slate-100);
    font-size: 1.875rem;
    font-size: var(--font-size-7);
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    text-align: center;
    margin-bottom: 2rem;
}

/* Form Fields Container */

form[name="registration_form"] > div:not(.checkbox-control) {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Labels */

form[name="registration_form"] label {
    color: var(--slate-100);
    font-size: 0.875rem;
    font-size: var(--font-size-2);
    font-weight: 400;
    font-weight: var(--font-weight-regular); ;
    margin-left: 0.var(--spacing-xs);
}

/* Required Field Indicator */

form[name="registration_form"] label.required::after {
    content: "*";
    color: var(--error-500);
    margin-left: 0.5rem;
    margin-left: var(--spacing-xs);
}

/* Submit Button */

form[name="registration_form"] button[type="submit"] {
    width: 100%;
    padding: 1rem;
    background-color: var(--primary-500);
    border: none;
    border-radius: 0.5rem;
    color: var(--slate-50);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-top: 1rem;
}

form[name="registration_form"] button[type="submit"]:hover {
    background-color: var(--primary-600);
    transform: translateY(-1px);
}

form[name="registration_form"] button[type="submit"]:active {
    transform: translateY(0);
}

/* Footer Text */

.register-container__footer {
    margin-top: 2rem;
    text-align: center;
    color: var(--slate-200);
    font-weight: lighter;
    font-size: 0.75rem;
    font-size: var(--font-size-1);}

.register-container__footer a {
    color: var(--primary-100);
    -webkit-text-decoration: none;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}

.register-container__footer a:hover {
    color: var(--primary-300);
}

/* ===================================
   PRIVACY POLICY PAGE STYLES - PROFESSIONAL
   =================================== */

/* Main container */

.privacy-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
    padding: var(--spacing-l) var(--spacing-base);
    color: var(--color-text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
    font-family: var(--font-family);
}

.privacy-content {
    overflow: hidden;
}

.privacy-header {
    padding: 1.5rem;
    padding: var(--spacing-l);
    text-align: center;
    position: relative;
    background: linear-gradient(135deg, var(--neutral-50) 0%, var(--neutral-100) 100%);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    margin-bottom: var(--spacing-l);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.privacy-title {
    margin: 0 0 1.5rem 0;
    margin: 0 0 var(--spacing-l) 0;
    font-size: 2.25rem;
    font-size: var(--font-size-8);
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    gap: var(--spacing-base);
    color: var(--color-text-heading);
}

.privacy-title i {
    margin-right: 0.5rem;
    color: var(--primary-500);
}

.privacy-header-actions {
    position: absolute;
    top: 2rem;
    right: 2rem;
}

/* PDF download button */

.privacy-pdf-btn {
    background: rgba(255,255,255,0.2);
    color: var(--color-text-heading);
    padding: 0.5rem 1rem;
    padding: var(--spacing-xs) var(--spacing-base);
    -webkit-text-decoration: none;
    text-decoration: none;
    border-radius: 0.25rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-size: var(--font-size-2);
    transition: background 250ms ease-in-out;
    transition: background var(--transition-normal);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    gap: var(--spacing-xs);
    border: 1px solid rgba(0,0,0,0.1);
}

.privacy-pdf-btn:hover {
    background: rgba(255,255,255,0.3);
    color: var(--slate-800);
    -webkit-text-decoration: none;
    text-decoration: none;
}

.privacy-pdf-btn i {
    margin-right: 0.5rem;
}

/* Info alert - Professional */

.privacy-info-alert {
    margin: 0;
    margin-top: 0.875rem;
    margin-bottom: 0.875rem;
    margin-top: var(--spacing-m);
    margin-bottom: var(--spacing-m);
    /* border-left: 4px solid var(--primary-500); */
    /* padding: var(--spacing-base); */
    /* background: var(--color-surface); */
    /* border-radius: var(--radius-sm); */
    /* box-shadow: var(--shadow-small); */
}

.privacy-info-title {
    font-weight: 600;
    color: var(--slate-800);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.privacy-info-title i {
    margin-right: 0.5rem;
    color: var(--primary-500);
}

.privacy-info-text {
    color: var(--slate-700);
    margin: 0;
    line-height: 1.6;
}

/* Navigation tabs - Professional */

.privacy-nav {
    background: var(--color-surface);
    border-bottom: var(--border-default);
    overflow-x: auto;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-small);
}

.privacy-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 600px;
    gap: 1rem;
    gap: var(--spacing-base);
}

.privacy-nav-item {
    flex: 1;
    min-width: -moz-fit-content;
    min-width: fit-content;
}

.privacy-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    width: 100%;
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--slate-600);
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
}

.privacy-nav-link:hover {
    background: var(--neutral-50);
    color: var(--slate-800);
}

.privacy-nav-link.active {
    color: var(--primary-500);
    border-bottom-color: var(--primary-500);
    background: var(--info-50);
    font-weight: 600;
}

.privacy-nav-link i {
    margin-right: 0.5rem;
    font-size: 0.9rem;
    color: var(--primary-500);
}

/* Content - Professional */

/* .privacy-content {
    padding: var(--spacing-l);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-small);
} */

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.privacy-section-title {
    color: var(--color-text-heading);
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    margin-top: var(--spacing-l);
    margin-bottom: var(--spacing-l);
    padding-bottom: 0.5rem;
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--border-color);
    font-size: 1.25rem;
    font-size: var(--font-size-5);
    font-weight: 500;
    font-weight: var(--font-weight-semi-bold);
    display: flex;
    align-items: center;
    gap: 1rem;
    gap: var(--spacing-base);
}

.privacy-section-title i {
    margin-right: 1rem;
    margin-right: var(--spacing-base);
    color: var(--primary-500);
}

/* Grid layouts - Professional */

.privacy-org-grid,
.privacy-data-grid,
.privacy-rights-grid,
.privacy-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.privacy-other-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
    margin: 1rem 0;
}

.privacy-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.privacy-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 2rem;
    gap: 2rem;
    margin: 1rem 0;
}

/* Cards - Professional */

.privacy-org-card,
.privacy-data-card,
.privacy-rights-card,
.privacy-contact-card,
.privacy-method-card,
.privacy-other-card {
    /* padding: var(--spacing-base); */
    overflow: hidden;
    /* transition: box-shadow var(--transition-fast), transform var(--transition-fast); */
    /* height: 100%; */
    /* background: var(--card-background);
    border-radius: var(--radius-lg);
    border: var(--border-default);
    box-shadow: var(--card-shadow); */
}

.privacy-data-card:hover,
.privacy-rights-card:hover,
.privacy-contact-card:hover,
.privacy-method-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* Data cards - Professional */

.privacy-data-card {
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    overflow: hidden;
    background: var(--neutral-000);
}

.privacy-data-card--primary {
    border-color: var(--primary-500);
    border-left-width: 2px;
}

.privacy-data-card--primary .privacy-data-header {
    background: var(--primary-500);
}

.privacy-data-card--success {
    border-color: var(--success-500);
    border-left-width: 2px;
}

.privacy-data-card--success .privacy-data-header {
    background: var(--success-500);
}

.privacy-data-card--info {
    border-color: var(--info-500);
    border-left-width: 2px;
}

.privacy-data-card--info .privacy-data-header {
    background: var(--info-500);
}

.privacy-data-header,
.privacy-contact-header {
    color: white;
    padding: 1rem;
    font-weight: 600;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.privacy-contact-card--primary {
    border-color: var(--primary-500);
    border-left-width: 2px;
}

.privacy-contact-card--primary .privacy-contact-header {
    background: var(--primary-500);
}

.privacy-contact-card--success {
    border-color: var(--success-500);
    border-left-width: 2px;
}

.privacy-contact-card--success .privacy-contact-header {
    background: var(--success-500);
}

.privacy-contact-card--warning {
    border-color: var(--warning-500);
    border-left-width: 2px;
}

.privacy-contact-card--warning .privacy-contact-header {
    background: var(--warning-500);
}

.privacy-contact-card--info {
    border-color: var(--info-500);
    border-left-width: 2px;
}

.privacy-contact-card--info .privacy-contact-header {
    background: var(--info-500);
}

.privacy-contact-card--error {
    border-color: var(--error-500);
    border-left-width: 2px;
}

.privacy-contact-card--error .privacy-contact-header {
    background: var(--error-500);
}

.privacy-data-header i,
.privacy-contact-header i {
    font-size: 1.1rem;
}

.privacy-data-body,
.privacy-contact-body,
.privacy-method-body {
    padding: 1.5rem;
}

.privacy-org-text,
.privacy-data-body-title,
.privacy-data-subtitle,
.privacy-rights-text,
.privacy-method-text {
    margin-bottom: 1rem;
    color: var(--slate-700);
}

.privacy-data-body-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--slate-800);
    margin-bottom: 0.75rem;
}

.privacy-data-subtitle {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--slate-700);
    margin: 1.5rem 0 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.privacy-data-subtitle i {
    color: var(--primary-500);
    font-size: 0.8rem;
}

/* Lists - Professional */

.privacy-data-list,
.privacy-rights-list {
    list-style: none;
    padding-left: 0;
}

.privacy-data-list li,
.privacy-rights-list li {
    /* padding: 0.25rem 0; */
    position: relative;
    padding-left: 1.2rem;
    color: var(--slate-600);
    line-height: 1.25;
}

.privacy-data-list li:before,
.privacy-rights-list li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-500);
    font-weight: bold;
}

/* Rights cards - Professional */

.privacy-rights-card {
    background: var(--color-surface);
    border-radius: 0.75rem;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    padding: var(--spacing-l);
    border-left: 4px solid;
    height: 100%;
    transition: all 250ms ease-in-out;
    transition: all var(--transition-normal);
    border: var(--border-default);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-small);
}

.privacy-rights-card:hover {
    background: var(--neutral-50);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.privacy-rights-card--primary {
    border-left-color: var(--primary-500);
}

.privacy-rights-card--success {
    border-left-color: var(--success-500);
}

.privacy-rights-card--warning {
    border-left-color: var(--warning-500);
}

.privacy-rights-card--info {
    border-left-color: var(--info-500);
}

.privacy-rights-title {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.privacy-rights-title--two{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.privacy-rights-card--primary .privacy-rights-title {
    color: var(--primary-500);
}

.privacy-rights-card--success .privacy-rights-title {
    color: var(--success-500);
}

.privacy-rights-card--warning .privacy-rights-title {
    color: var(--warning-500);
}

.privacy-rights-card--info .privacy-rights-title {
    color: var(--info-500);
}

.privacy-rights-title i {
    margin-right: 0.5rem;
    font-size: 1rem;
}

.privacy-rights-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    -webkit-text-decoration: none;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    transition: all 0.3s;
    /* margin-top: 1rem; */
    border: 1px solid;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.privacy-rights-btn.btn-outline-primary {
    color: var(--primary-500);
    border-color: var(--primary-500);
}

.privacy-rights-btn.btn-outline-primary:hover {
    background: var(--primary-500);
    color: white;
}

.privacy-rights-btn.btn-outline-success {
    color: var(--success-500);
    border-color: var(--success-500);
}

.privacy-rights-btn.btn-outline-success:hover {
    background: var(--success-500);
    color: white;
}

.privacy-rights-btn.btn-outline-warning {
    color: var(--warning-500);
    border-color: var(--warning-500);
}

.privacy-rights-btn.btn-outline-warning:hover {
    background: var(--warning-500);
    color: var(--slate-800);
}

.privacy-rights-btn.btn-outline-info {
    color: var(--info-500);
    border-color: var(--info-500);
}

.privacy-rights-btn.btn-outline-info:hover {
    background: var(--info-500);
    color: white;
}

.privacy-rights-btn i {
    font-size: 0.8rem;
}

/* Method cards - Professional */

.privacy-method-card {
    text-align: center;
    padding: 1.5rem;
    background: var(--neutral-50);
    border-radius: 8px;
    transition: all 0.3s;
    border: 1px solid var(--slate-200);
}

.privacy-method-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.privacy-method-icon {
    margin-bottom: 1rem;
    font-size: 3rem;
}

.privacy-method-icon--primary {
    color: var(--primary-500);
}

.privacy-method-icon--success {
    color: var(--success-500);
}

.privacy-method-icon--info {
    color: var(--info-500);
}

.privacy-method-heading {
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--slate-800);
}

.privacy-method-text {
    margin-bottom: 1.5rem;
    color: var(--slate-600);
    font-size: 0.9rem;
    line-height: 1.6;
}

.privacy-method-btn {
    padding: 0.5rem 1rem;
    border: 1px solid;
    background: transparent;
    color: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.privacy-method-btn.btn-outline-primary {
    color: var(--primary-500);
    border-color: var(--primary-500);
}

.privacy-method-btn.btn-outline-primary:hover {
    background: var(--primary-500);
    color: white;
}

.privacy-method-btn.btn-outline-success {
    color: var(--success-500);
    border-color: var(--success-500);
}

.privacy-method-btn.btn-outline-success:hover {
    background: var(--success-500);
    color: white;
}

.privacy-method-btn.btn-outline-info {
    color: var(--info-500);
    border-color: var(--info-500);
}

.privacy-method-btn.btn-outline-info:hover {
    background: var(--info-500);
    color: white;
}

/* Other rights - Professional */

.privacy-other-card {
    text-align: center;
    padding: 2rem 1rem;
    background: var(--neutral-50);
    border-radius: 8px;
    transition: all 0.3s;
    border: 1px solid var(--slate-200);
}

.privacy-other-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.privacy-other-icon {
    margin-bottom: 1rem;
    font-size: 2rem;
}

.privacy-other-icon--primary {
    color: var(--primary-500);
}

.privacy-other-icon--warning {
    color: var(--warning-500);
}

.privacy-other-icon--danger {
    color: var(--error-500);
}

.privacy-other-heading {
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--slate-800);
}

.privacy-other-text {
    color: var(--slate-600);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.6;
}

/* Alerts - Professional */

.privacy-sensitive-alert,
.privacy-contact-alert {
    background: var(--warning-50);
    border-left: 4px solid var(--warning-400);
    padding: 1.5rem;
    padding: var(--spacing-l);
    margin: 1.5rem 0;
    margin: var(--spacing-l) 0;
    border-radius: 0.75rem;
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-small);
}

.privacy-sensitive-title,
.privacy-contact-alert-title {
    font-weight: 600;
    color: var(--error-700);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.privacy-sensitive-title i,
.privacy-contact-alert-title i {
    margin-right: 0.5rem;
    color: var(--warning-400);
}

.privacy-sensitive-text,
.privacy-contact-alert-text {
    color: var(--error-700);
    margin: 0;
    line-height: 1.6;
}

.privacy-sensitive-text a,
.privacy-contact-alert-text a {
    color: var(--primary-500);
    -webkit-text-decoration: underline;
    text-decoration: underline;
    font-weight: 500;
}

.privacy-sensitive-text a:hover,
.privacy-contact-alert-text a:hover {
    color: var(--primary-600);
}

/* Legal section - Professional */

.privacy-legal {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--neutral-50);
    border-radius: 8px;
    border: 1px solid var(--slate-200);
}

.privacy-legal-title {
    margin-bottom: 1rem;
    color: var(--slate-800);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.privacy-legal-title i {
    margin-right: 0.5rem;
    color: var(--primary-500);
}

.privacy-legal-list {
    list-style: none;
    padding-left: 0;
}

.privacy-legal-list li {
    padding: 0.5rem 0;
    position: relative;
    padding-left: 2rem;
    color: var(--slate-600);
    line-height: 1.6;
}

.privacy-legal-list li:before {
    content: "📋";
    position: absolute;
    left: 0;
}

/* Accordion - Professional */

.privacy-accordion {
    margin: 1.5rem 0;
}

.privacy-accordion-item {
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.privacy-accordion-item:last-child {
    margin-bottom: 0;
}

.privacy-accordion-header {
    margin: 0;
    border: none;
}

.privacy-accordion-header button {
    border: none;
    padding: 1rem 1.5rem;
    width: 100%;
    cursor: pointer;
    color: var(--slate-800);
    font-weight: 500;
    position: relative;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    font-size: 1rem;
    justify-content: center;
    background: var(--neutral-50);
}

.privacy-accordion-header button:hover {
    background: var(--slate-100);
}

.privacy-accordion-header button i {
    margin-right: 0.5rem;
    color: var(--primary-500);
}

.privacy-accordion-header button.collapsed:after {
    content: "▼";
    position: absolute;
    right: 1rem;
    transform: rotate(0deg);
    transition: transform 0.3s;
    font-size: 0.8rem;
    color: var(--slate-500);
}

.privacy-accordion-header button.active:after {
    content: "▼";
    position: absolute;
    right: 1rem;
    transform: rotate(-180deg);
    transition: transform 0.3s;
    font-size: 0.8rem;
    color: var(--primary-500);
}

.privacy-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: white;
}

.privacy-accordion-content.active {
    max-height: 500px;
}

.privacy-accordion-body {
    padding: 1.5rem;
    background: white;
}

/* Footer - Professional */

.privacy-footer {
    background: var(--neutral-50);
    padding: 1.5rem;
    padding: var(--spacing-l);
    border-top: var(--border-default);
    margin-top: 1.5rem;
    margin-top: var(--spacing-l);
    border-radius: 0.75rem;
    border-radius: var(--radius-lg);
}

.privacy-footer-heading {
    color: var(--slate-800);
    margin-bottom: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.privacy-footer-heading i {
    margin-right: 0.5rem;
    color: var(--primary-500);
}

.privacy-footer-text {
    color: var(--slate-600);
    font-size: 0.9rem;
    margin-bottom: 0;
    line-height: 1.6;
}

.privacy-footer-link {
    color: var(--primary-500);
    -webkit-text-decoration: none;
    text-decoration: none;
    font-weight: 500;
}

.privacy-footer-link:hover {
    color: var(--primary-600);
    -webkit-text-decoration: underline;
    text-decoration: underline;
}

.privacy-contact-hr {
    border: none;
    height: 1px;
    background: var(--slate-200);
    margin: 1rem 0;
}

.privacy-contact-footer {
    font-size: 0.85rem;
    color: var(--slate-500);
    margin: 0;
    font-style: italic;
}

/* Modal - Professional */

.privacy-modal {
    display: none;
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.privacy-modal.show {
    display: flex;
}

.privacy-modal-content {
    background: white;
    border-radius: 8px;
    max-width: 500px;
    margin: 1rem;
    position: relative;
    animation: modalSlideIn 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

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

.privacy-modal-header {
    background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 8px 8px 0 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.privacy-modal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.privacy-modal-title i {
    margin-right: 0.5rem;
}

.privacy-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.privacy-modal-close:hover {
    background: rgba(255,255,255,0.1);
    transform: rotate(90deg);
}

.privacy-modal-body {
    padding: 1.5rem;
}

.privacy-modal-address {
    line-height: 1.6;
    margin-bottom: 1rem;
    color: var(--slate-800);
}

.privacy-modal-address strong {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--slate-800);
}

.privacy-modal-footer-text {
    font-size: 0.85rem;
    color: var(--slate-500);
    margin: 0;
    font-style: italic;
}

/* Responsive - Professional */

@media (max-width: 768px) {
    .privacy-container {
        padding: 1rem 0.5rem;
    }
    
    .privacy-header {
        padding: 1.5rem 1rem;
        text-align: center;
        flex-direction: column;
        gap: 1rem;
    }
    
    .privacy-header-actions {
        position: static;
        margin-top: 1rem;
        text-align: center;
    }
    
    .privacy-title {
        font-size: 1.5rem;
    }
    
    .privacy-content {
        padding: 1.5rem;
    }
    
    .privacy-nav-list {
        min-width: auto;
        flex-direction: column;
    }
    
    .privacy-nav-item {
        width: 100%;
    }
    
    .privacy-nav-link {
        justify-content: center;
        padding: 0.75rem 1rem;
        font-size: 0.8rem;
        border-bottom: 1px solid var(--slate-200);
    }
    
    .privacy-nav-link:last-child {
        border-bottom: none;
    }
    
    .privacy-org-grid,
    .privacy-data-grid,
    .privacy-rights-grid,
    .privacy-contact-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .privacy-methods-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .privacy-footer-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .privacy-nav-list {
        flex-wrap: wrap;
    }
}

/* Additional form and utility classes for the rights exercise template - Professional */

.privacy-form {
    margin: 1.5rem 0;
}

/* .privacy-form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--slate-200);
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
    background: var(--neutral-000);
} */

.privacy-form-control:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}

.privacy-form-control[readonly] {
    background-color: var(--neutral-50);
    opacity: 1;
    color: var(--slate-500);
}

/* .privacy-form-select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--slate-200);
    border-radius: 4px;
    font-size: 1rem;
    background-color: white;
    transition: border-color 0.3s, box-shadow 0.3s;
} */

.privacy-form-select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}

.privacy-rights-btn--group {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.privacy-table-container {
    overflow-x: auto;
    margin: 1rem 0;
    border-radius: 8px;
    border: 1px solid var(--slate-200);
}

.privacy-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.privacy-table th,
.privacy-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--slate-200);
}

.privacy-table th {
    background: var(--neutral-50);
    font-weight: 600;
    color: var(--slate-800);
}

.privacy-table tbody tr:hover {
    background: var(--neutral-50);
}

.privacy-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.25rem;
    text-align: center;
    white-space: nowrap;
}

.privacy-badge--primary {
    background: var(--primary-500);
    color: white;
}

.privacy-badge--success {
    background: var(--success-500);
    color: white;
}

.privacy-badge--warning {
    background: var(--warning-500);
    color: var(--slate-800);
}

.privacy-badge--info {
    background: var(--info-500);
    color: white;
}

.privacy-badge--secondary {
    background: var(--slate-500);
    color: white;
}

.privacy-badge--danger {
    background: var(--error-500);
    color: white;
}

.privacy-text-success {
    color: var(--success-500);
    font-weight: 500;
}

.privacy-text-danger {
    color: var(--error-500);
    font-weight: 500;
}

.privacy-text--muted {
    color: var(--slate-500);
}

.privacy-text-center {
    text-align: center;
}

.mt-4 {
    margin-top: 1.5rem;
}

.btn-outline-secondary {
    color: var(--slate-500);
    border-color: var(--slate-500);
}

.btn-outline-secondary:hover {
    background: var(--slate-500);
    color: white;
}

.privacy-form {
    max-width: 900px;
    margin: 0 auto;
    border-radius: 0.25rem;
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-small);
}

/* Acerca page */

.about-accordion {
    margin: 1.5rem auto;
    width: min(100%, 1200px);
}

.about-accordion-item {
    border: 1px solid var(--slate-200);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    scroll-margin-top: 10rem;
}

.about-accordion-item:last-child {
    margin-bottom: 0;
}

.about-accordion-header {
    border: none;
    padding: 1rem 1.5rem;
    width: 100%;
    cursor: pointer;
    color: var(--slate-800);
    font-weight: 500;
    position: relative;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--neutral-50);
    font-size: 1rem;
    text-align: center;
}

.about-accordion-header:hover {
    background: var(--slate-100);
}

.about-accordion-header:focus-visible {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

.about-accordion-header::after {
    content: "▼";
    position: absolute;
    right: 1rem;
    transform: rotate(0deg);
    transition: transform 0.3s;
    font-size: 0.8rem;
    color: var(--slate-500);
}

.about-accordion-header.active::after {
    transform: rotate(-180deg);
    color: var(--primary-500);
}

.about-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: white;
}

.about-accordion-content.active {
    max-height: none;
}

.about-accordion-content > * {
    padding: 1.5rem;
    margin: 0;
    background: white;
}

@media (max-width: 768px) {
    .about-accordion {
        margin: 1rem 0;
    }

    .about-accordion-header {
        padding: 0.875rem 2.5rem 0.875rem 1rem;
        justify-content: flex-start;
        text-align: left;
    }

    .about-accordion-content > * {
        padding: 1rem;
    }
}

/* ====================================================
   FICHA DO COLABORADOR – MODERN UI (Mobile First)
   DEBUG: Analyzing layout issues
   ==================================================== */

:root {
  --profile-bg: var(--color-surface);
  --profile-surface: white;
  --profile-header-bg: var(--gradient-blue-01);
  --profile-avatar-desktop: 160px;
  --profile-avatar-mobile: 120px;
  --profile-avatar-size: var(--profile-avatar-mobile);
  --profile-radius: var(--radius-lg);
  --profile-shadow: var(--shadow-extra-large);
  --profile-title-size: var(--font-size-7);
  --profile-subtitle-size: var(--font-size-4);
  --profile-surface-dark: var(--slate-850);
  --profile-meta-bg-light: rgba(255, 255, 255, 0.08);
  --profile-meta-bg-dark: rgba(0, 0, 0, 0.2);
  --profile-meta-border-light: rgba(255, 255, 255, 0.12);
  --profile-meta-border-dark: rgba(255, 255, 255, 0.2);
}

/* Dark mode support */

@media (prefers-color-scheme: dark) {
  :root {
    --profile-surface: var(--profile-surface-dark);
  }
  
  .colaborador-card {
    background: var(--slate-800);
  }
    
    .colaborador-card:hover {
      background: var(--slate-750);
    }
  
  .colaborador-profile__section {
    border-color: var(--slate-700);
    background: var(--slate-850);
  }
  
  .colaborador-card__label {
    color: var(--slate-300);
  }
  
  .colaborador-card__value {
    color: var(--slate-100);
  }
  

  
  /* DEBUG: Ensure proper contrast for dark mode */
  .colaborador-profile__header {
    background: radial-gradient(
    circle,
    rgb(0, 125, 196) 0%,
    rgb(0, 3, 61) 100%
  );
    background: radial-gradient(
    circle,
    color(display-p3 0.18945 0.48393 0.7598) 0%,
    color(display-p3 0.0017 0.01045 0.22979) 100%
  );
    background: var(--profile-header-bg);
    /* Add subtle overlay for better text readability */
  }
    .colaborador-profile__header::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);
      pointer-events: none;
      z-index: 0 + 1;
      z-index: var(--z-index-base) + 1;
    }
}

/* ====================================================
   LAYOUT BASE
   ==================================================== */

.colaborador-profile {
  width: 100%;
  max-width: 1200px;
  margin: 2rem auto;
  margin: var(--spacing-xl) auto;
  padding: 0 1rem;
  padding: 0 var(--spacing-base);
}

.colaborador-list__profile-icon {
  width: 2.5rem;
  width: var(--spacing-xxl);
  height: 2.5rem;
  height: var(--spacing-xxl);
  color: var(--slate-400);
  border-radius: 9999px;
  border-radius: var(--border-radius-full);
  border: 2px solid var(--slate-100);
}

/* ====================================================
   HEADER & AVATAR (Premium Hero)
   ==================================================== */

.colaborador-profile__header {
  position: relative;
  background: radial-gradient(
    circle,
    rgb(0, 125, 196) 0%,
    rgb(0, 3, 61) 100%
  );
  background: radial-gradient(
    circle,
    color(display-p3 0.18945 0.48393 0.7598) 0%,
    color(display-p3 0.0017 0.01045 0.22979) 100%
  );
  background: var(--profile-header-bg);
  border-radius: 0.75rem;
  border-radius: var(--profile-radius);
  padding: 
    calc(120px / 2 + 2rem) 
    1.5rem 
    2.5rem;
  padding: 
    calc(var(--profile-avatar-size) / 2 + var(--spacing-xl)) 
    var(--spacing-l) 
    var(--spacing-xxl);
  text-align: center;
  color: white;
  /* Header sits below avatar; no extra top margin */
  margin-top: 0;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  box-shadow: var(--profile-shadow);
  /* Allow avatar to overflow header for visual effect */
  overflow: visible;

  /* Subtitle pattern overlay - Performance optimized */
}

.colaborador-profile__header::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 20px 20px;
    -webkit-mask-image: linear-gradient(to bottom, black, transparent);
            mask-image: linear-gradient(to bottom, black, transparent);
    opacity: 0.5;
    /* Performance: will-change for smoother scrolling */
    will-change: transform;
  }

.colaborador-profile__avatar {
  position: absolute;
  top: calc(-1 * 120px / 2);
  top: calc(-1 * var(--profile-avatar-size) / 2);
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  width: var(--profile-avatar-size);
  height: 120px;
  height: var(--profile-avatar-size);
  border-radius: 50%;
  border-radius: var(--radius-full);
  background: white;
  padding: 0.25rem;
  padding: var(--spacing-xxs); /* Double border effect */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  box-shadow: var(--shadow-medium);
  overflow: visible;
  z-index: 0 + 2;
  z-index: var(--z-index-base) + 2;

  /* Mobile: ensure avatar stays visible and doesn't get cut off */
}

@media (max-width: 767px) {

.colaborador-profile__avatar {
    top: calc(-1 * 120px / 2 + 1rem);
    top: calc(-1 * var(--profile-avatar-size) / 2 + var(--spacing-base));
}
  }

.colaborador-profile__avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 50%;
    border-radius: var(--radius-full);
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.05);
  }

.colaborador-profile__avatar .avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: var(--slate-100);
    color: var(--slate-400);
    font-size: 1.875rem;
    font-size: var(--font-size-7);
    border-radius: 50%;
    border-radius: var(--radius-full);
  }

/* Ring around avatar */

.colaborador-profile__avatar::after {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    border-radius: var(--radius-full);
    animation: pulse 4s infinite;
  }

.colaborador-profile__info {
  position: relative;
  z-index: 0 + 1;
  z-index: var(--z-index-base) + 1;
}

.colaborador-profile__info h2 {
    font-size: 1.875rem;
    font-size: var(--profile-title-size);
    font-weight: 600;
    margin-bottom: 0.75rem;
    margin-bottom: var(--spacing-s);
    color: white;
    line-height: 1rem;
    line-height: var(--line-height-1);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    /* Acessibilidade: melhor contraste em gradientes */
    -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.1);
  }

.colaborador-profile__info p {
    font-size: 1.125rem;
    font-size: var(--profile-subtitle-size);
    color: var(--slate-200);
    font-weight: 400;
    font-weight: var(--font-weight-regular);
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    /* text-transform: uppercase; */
    /* letter-spacing: 0.1em; */
  }

.colaborador-profile__meta {
  position: relative;
  z-index: 0 + 1;
  z-index: var(--z-index-base) + 1;
  margin-top: 1.5rem;
  margin-top: var(--spacing-l);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

-item.colaborador-profile__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    gap: var(--spacing-xs);
    padding: 0.25rem 1rem;
    padding: var(--spacing-xxs) var(--spacing-base);
    background: light-dark(rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.2));
    backdrop-filter: blur(12px);
    border: 1px solid light-dark(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.2));
    border-radius: 0.5rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-size: var(--font-size-2);
    font-weight: 600;
    font-weight: var(--font-weight-bold);
    color: light-dark(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.95));
    transition: 150ms ease-in-out;
    transition: var(--transition-fast);
  }

@supports (color: light-dark(red, red)) {
-item.colaborador-profile__meta {
    background: light-dark(var(--profile-meta-bg-light), var(--profile-meta-bg-dark));
    border: 1px solid light-dark(var(--profile-meta-border-light), var(--profile-meta-border-dark));
  }
}

-item.colaborador-profile__meta:hover {
      background: light-dark(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.15));
      transform: translateY(-1px);
    }

-item.colaborador-profile__meta .icon {
      font-size: 1.25rem;
      font-size: var(--font-size-5);
      color: var(--primary-400);
      /* Acessibilidade: ícones decorativos */
      aria-hidden: true;
    }

/* ====================================================
   CONTENT & SECTIONS
   ==================================================== */

.colaborador-profile__content {
  margin-top: calc(2.5rem + 120px / 2);
  margin-top: calc(var(--spacing-xxl) + var(--profile-avatar-size) / 2);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  gap: var(--spacing-xl);
}

.colaborador-profile__section {
  /* background: var(--profile-surface); */
  /* border-radius: var(--profile-radius); */
  padding: 2rem;
  padding: var(--spacing-xl);
  /* box-shadow: var(--shadow-small); */
  /* border: 1px solid var(--border-color); */
  /* transition: box-shadow var(--transition-normal); */

  /* &:hover {
    box-shadow: var(--shadow-large);
  } */
}

.colaborador-profile__section-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  gap: var(--spacing-base);
  font-size: 1.25rem;
  font-size: var(--font-size-5);
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: 2rem;
  margin-bottom: var(--spacing-xl);
  padding-bottom: 1rem;
  padding-bottom: var(--spacing-base);
  border-bottom: 1px solid var(--border-color);
}

.colaborador-profile__section-title .icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--primary-50); /* DEBUG: Uncommented for consistency */
    border-radius: 0.5rem;
    border-radius: var(--radius-md);
    color: var(--primary-600);
    flex-shrink: 0;
  }

.colaborador-profile__section-title .icon-badge svg,.colaborador-profile__section-title .icon-badge .icon {
      width: 24px;
      height: 24px;
      fill: none !important;
      stroke: currentColor !important;
      stroke-width: 2;
    }

/* ====================================================
   GRID SYSTEM (Mobile First)
   ==================================================== */

.colaborador-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 0.875rem;
  grid-gap: var(--spacing-m);
  gap: 0.875rem;
  gap: var(--spacing-m);
  
  /* DEBUG: Add responsive gap adjustment */
}

@media (min-width: 768px) {

.colaborador-card-grid {
    gap: 1.5rem;
    gap: var(--spacing-l);
}
  }

@media (max-width: 480px) {

.colaborador-card-grid {
    gap: 1rem;
    gap: var(--spacing-base);
}
  }

.colaborador-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  gap: var(--spacing-base);
  padding: 0.5rem;
  padding: var(--spacing-xs);
  background: var(--slate-50);
  border: 1px dotted var(--border-color);
  border-radius: 0.25rem;
  border-radius: var(--radius-sm);
  transition: 150ms ease-in-out;
  transition: var(--transition-fast);
}

.colaborador-card:hover {
    border-color: var(--primary-300);
    background: var(--primary-50);
    /* DEBUG: Add subtle shadow for better hover feedback */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-small);
  }

/* DEBUG: Ensure dark mode consistency */

@media (prefers-color-scheme: dark) {

.colaborador-card {
   background: var(--slate-800);
}
   
   .colaborador-card:hover {
     background: var(--slate-750);
     border-color: var(--primary-400);
   }
 }

--wide.colaborador-card {
    grid-column: 1 / -1;
  }

.colaborador-card__label {
  font-size: 0.75rem;
  font-size: var(--font-size-1);
  font-weight: 700;
  color: var(--color-text--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.colaborador-card__value {
  font-size: 1rem;
  font-size: var(--font-size-3);
  color: var(--color-text);
  font-weight: 600;
  word-break: break-word;
}

.colaborador-card__value a {
    color: var(--color-link);
    font-weight: 700;
    -webkit-text-decoration: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    gap: var(--spacing-xxs);
  }

.colaborador-card__value a:hover {
      color: var(--color-link-hover);
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }

/* ====================================================
   STATUS BADGES
   ==================================================== */

.status-badge {
  padding: 0.25rem 0.5rem;
  padding: var(--spacing-xxs) var(--spacing-xs);
  border-radius: 0.25rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-weight: var(--font-weight-bold);
  font-size: 0.75rem;
  font-size: var(--font-size-1);
  border: 1px solid transparent; /* DEBUG: Ensure consistent border rendering */
  transition: all 150ms ease-in-out;
  transition: all var(--transition-fast);
}

.status-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: var(--shadow-small);
  }

.status-badge--active {
    background: light-dark(var(--success-50), var(--success-900));
    color: light-dark(var(--success-700), var(--success-100));
    border-color: light-dark(var(--success-200), var(--success-700));
  }

.status-badge--inactive {
    background: light-dark(var(--error-50), var(--error-900));
    color: light-dark(var(--error-700), var(--error-100));
    border-color: light-dark(var(--error-200), var(--error-700));
  }

/* ====================================================
   ACTIONS TABLET/DESKTOP
   ==================================================== */

.colaborador-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  gap: var(--spacing-base);
  margin-top: 2rem;
  margin-top: var(--spacing-xl);
  margin-bottom: 4rem;
  margin-bottom: var(--spacing-xxxl);
}

.colaborador-actions .btn {
    width: 100%;
    justify-content: center;
  }

/* ====================================================
   MEDIA QUERIES (Enhancements)
   ==================================================== */

/* Tablet & Desktop */

@media (min-width: 768px) {
  :root {
    --profile-avatar-size: var(--profile-avatar-desktop);
  }

  .colaborador-profile {
    padding: 0 2rem;
    padding: 0 var(--spacing-xl);
  }

  .colaborador-profile__header {
    padding: 
      1.5rem 
      1.5rem 
      1.5rem 
      calc((120px*1.75) + 2rem);
    padding: 
      var(--spacing-l) 
      var(--spacing-l) 
      var(--spacing-l) 
      calc((var(--profile-avatar-size)*1.75) + var(--spacing-xl));
    text-align: left;
    margin-top: 2.5rem;
    margin-top: var(--spacing-xxl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 160px;
  }

  .colaborador-profile__avatar {
    top: 50%;
    left: 2rem;
    left: var(--spacing-xl);
    transform: translateY(-50%);
    width: 15rem;
    height: auto;
  }

  .colaborador-profile__content {
    margin-top: 2.5rem;
    margin-top: var(--spacing-xxl);
  }

  .colaborador-profile__meta {
    flex-direction: row;
    justify-content: flex-start;
    gap: 1.5rem;
    gap: var(--spacing-l);
  }

  .colaborador-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .colaborador-actions {
    flex-direction: row;
    justify-content: flex-end;
  }

    .colaborador-actions .btn {
      width: auto;
    }
}

/* Large Desktop */

@media (min-width: 1024px) {
  .colaborador-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .colaborador-card--wide {
    grid-column: span 2;
  }
}

/* ====================================================
   # ERROR 403 PAGE STYLING - MINIMAL VERSION
   ====================================================
   Clean, minimal error page styles
   - Simple card layout with danger theme
   - Basic alert styling
   - Functional button styles
   - Maintained accessibility features
   - Responsive design
 ==================================================== */

/* Centered layout without container wrapper */

.error-page {
  display: grid;
  align-items: center;
  justify-items: center;
  place-items: center;
  min-height: 80vh;
  padding: 2rem 1rem;
  padding: var(--spacing-xl) var(--spacing-base);
}

/* Card styling for centered floating effect */

.border-danger {
  background: light-dark(
    oklch(from var(--slate-50) l c h / 0.9),
    oklch(from var(--slate-900) l c h / 0.9)
  );
  border: 2px solid var(--error-500);
  border-radius: 0.5rem;
  border-radius: var(--border-radius-medium);
  overflow: hidden;
  width: 100%;
  max-width: min(100vw - 2rem, 1900px);
  max-width: var(--layout-content-max-width);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  animation: float-in 0.3s ease-out;
}

@keyframes float-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Card header with simple danger background */

/* Card header with simple danger background */

.card-header {
  background: var(--error-500);
  color: white;
  padding: 1.5rem;
  padding: var(--spacing-l);
}

.card-header h1 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  gap: var(--spacing-s);
  margin: 0;
  font-size: 1.875rem;
  font-size: var(--font-size-7);
  font-weight: 600;
  font-weight: var(--font-weight-bold);
}

/* Card body with clean spacing */

.card-body {
  padding: 1.5rem;
  padding: var(--spacing-l);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  gap: var(--spacing-l);
}

/* Simple alert styling */

.alert {
  background: light-dark(
    oklch(from var(--error-50) l c h / 0.8),
    oklch(from var(--error-900) l c h / 0.3)
  );
  border: 1px solid var(--error-200);
  border-left: 4px solid var(--error-500);
  border-radius: 0.25rem;
  border-radius: var(--border-radius-small);
  padding: 0.875rem;
  padding: var(--spacing-m);
}

.alert strong {
  color: light-dark(var(--error-800), var(--error-200));
  font-weight: 600;
  font-weight: var(--font-weight-bold);
  font-size: 1.125rem;
  font-size: var(--font-size-4);
  display: block;
  margin-bottom: 0.5rem;
  margin-bottom: var(--spacing-xs);
}

/* Content sections */

.mb-4 {
  margin-bottom: 1.5rem;
  margin-bottom: var(--spacing-l);
}

h5 {
  color: light-dark(var(--slate-800), var(--slate-200));
  font-size: 1.25rem;
  font-size: var(--font-size-5);
  font-weight: 600;
  font-weight: var(--font-weight-bold);
  margin: 0 0 0.5rem 0;
  margin: 0 0 var(--spacing-xs) 0;
}

/* p {
  color: light-dark(var(--slate-700), var(--slate-300));
  line-height: var(--line-height-4);
  margin: 0 0 var(--spacing-m) 0;
} */

/* Simple list styling */

.list-unstyled {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-unstyled li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  gap: var(--spacing-s);
  padding: 0.5rem;
  padding: var(--spacing-xs);
  margin-bottom: 0.5rem;
  margin-bottom: var(--spacing-xs);
  border-radius: 0.25rem;
  border-radius: var(--border-radius-small);
  background: light-dark(
    oklch(from var(--slate-50) l c h / 0.5),
    oklch(from var(--slate-850) l c h / 0.5)
  );
}

.list-unstyled li strong {
  color: light-dark(var(--slate-800), var(--slate-200));
  font-weight: 600;
  font-weight: var(--font-weight-bold);
  min-width: 120px;
  display: inline-block;
}

/* User information section */

.bg-light {
  background: light-dark(
    oklch(from var(--slate-100) l c h / 0.9),
    oklch(from var(--slate-800) l c h / 0.9)
  );
  border: 1px solid light-dark(
    var(--slate-200),
    var(--slate-700)
  );
  border-radius: 0.25rem;
  border-radius: var(--border-radius-small);
  padding: 0.875rem;
  padding: var(--spacing-m);
}

.bg-light strong {
  color: light-dark(var(--slate-800), var(--slate-200));
  font-weight: 600;
  font-weight: var(--font-weight-bold);
  display: inline-block;
  margin-right: 0.75rem;
  margin-right: var(--spacing-s);
}

.badge {
  display: inline-block;
  /* padding: var(--spacing-xxs) var(--spacing-s); */
  /* border-radius: var(--border-radius-small); */
  /* background: var(--error-500); */
  /* border: 1px solid var(--error-600); */
  /* color: white; */
  font-size: 0.75rem;
  font-size: var(--font-size-1);
  font-weight: 600;
  font-weight: var(--font-weight-bold);
  margin-right: 0.5rem;
  margin-right: var(--spacing-xs);
}

/* Button layout */

.flex {
  display: flex;
  gap: 0.75rem;
  gap: var(--spacing-s);
  flex-wrap: wrap;
}

/* Basic button styling */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  gap: var(--spacing-xs);
  padding: 0.75rem 0.875rem;
  padding: var(--spacing-s) var(--spacing-m);
  border-radius: 0.25rem;
  border-radius: var(--border-radius-small);
  -webkit-text-decoration: none;
  text-decoration: none;
  font-weight: 600;
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  font-size: var(--font-size-3);
  border: 1px solid transparent;
  transition: all 150ms ease-in-out;
  transition: all var(--transition-fast);
  cursor: pointer;
  background: var(--primary-500);
  color: white;
  border-color: var(--primary-600);
}

.btn:hover {
  background: var(--primary-600);
  border-color: var(--primary-700);
}

/* Outline button styling */

.btn--outline {
  background: transparent;
  color: light-dark(var(--slate-700), var(--slate-200));
  border-color: light-dark(var(--slate-300), var(--slate-600));
}

.btn--outline:hover {
  background: light-dark(
    oklch(from var(--slate-100) l c h / 0.8),
    oklch(from var(--slate-800) l c h / 0.8)
  );
  border-color: light-dark(var(--slate-400), var(--slate-500));
}

/* Secondary button styling */

.btn--secondary {
  background: light-dark(var(--slate-600), var(--slate-700));
  color: white;
  border-color: light-dark(var(--slate-700), var(--slate-800));
}

.btn--secondary:hover {
  background: light-dark(var(--slate-700), var(--slate-800));
  border-color: light-dark(var(--slate-800), var(--slate-900));
}

/* Icon styling within buttons */

.btn svg {
  width: 0.875rem;
  width: var(--spacing-m);
  height: 0.875rem;
  height: var(--spacing-m);
}

/* Text styling */

.text-muted {
  color: light-dark(var(--slate-600), var(--slate-400));
  font-size: 0.875rem;
  font-size: var(--font-size-2);
  line-height: 1.5rem;
  line-height: var(--line-height-3);
}

.text-muted a {
  color: var(--color-link);
  -webkit-text-decoration: none;
  text-decoration: none;
  font-weight: 600;
  font-weight: var(--font-weight-bold);
}

.text-muted a:hover {
  color: var(--color-link-hover);
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

/* Responsive design */

@media (max-width: 768px) {
  .error-page {
    padding: 1.5rem 0.75rem;
    padding: var(--spacing-l) var(--spacing-s);
  }
  
  .card-body {
    padding: 0.875rem;
    padding: var(--spacing-m);
  }
  
  .card-header h1 {
    font-size: 1.5rem;
    font-size: var(--font-size-6);
    text-align: center;
  }
  
  .flex {
    flex-direction: column;
    align-items: stretch;
  }
  
  .btn {
    width: 100%;
    justify-content: center;
  }
  
  h5 {
    font-size: 1.125rem;
    font-size: var(--font-size-4);
  }
}

/* Accessibility enhancements */

/* .border-danger:focus-within {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
} */

/* .btn:focus {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
} */

/* High contrast mode support */

@media (prefers-contrast: high) {
  .border-danger {
    border-width: 2px;
  }
  
  .alert {
    border-width: 2px;
  }
  
  .btn {
    border-width: 2px;
  }
}

/* Reduced motion support */

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
  
  .btn:hover {
    transform: none;
  }
}

/* UTILITIES */

/* ===================================
   POSTCSS DESIGN SYSTEM FRAMEWORK - UTILITY CLASSES
   ===================================
   This file contains utility classes for common styling patterns in the PostCSS design system.
   Includes:
   - Display utilities (d-grid, d-flex)
   - Text utilities (text--muted, text-center, etc.)
   - Spacing utilities (mbs-*, mbe-*, etc.)
   - Color utilities (text-error, text-success, etc.)
   - Animation utilities (pulse, fade-in, etc.)
   - Interactive utilities (hover-lift, focus-ring, etc.)
   - Layout utilities (center, truncate, etc.)
   - Custom utilities for specific components (legend-color, etc.)
   =================================== */

/* ===================================
   DISPLAY UTILITIES
   Basic display and layout utilities
   =================================== */

.d-grid {
  display: grid;
}

.d-flex {
  display: flex;
}

.d-block {
  display: block;
}

.d-inline {
  display: inline;
}

.d-inline-block {
  display: inline-block;
}

.d-none {
  display: none;
}

.flex {
  display: flex;
}

/* ===================================
   FLEXBOX UTILITIES
   Enhanced flexbox utilities with common patterns
   =================================== */

.flex-column {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-col {
  flex-direction: column;
}

.gap-xs {
  gap: 0.25rem;
  gap: var(--spacing-xxs);
}

.gap-s {
  gap: 0.5rem;
  gap: var(--spacing-xs);
}

.gap-base {
  gap: 1rem;
  gap: var(--spacing-base);
}

.gap-m {
  gap: 0.875rem;
  gap: var(--spacing-m);
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-around {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ===================================
   GRID UTILITIES
   Enhanced grid utilities with common patterns
   =================================== */

.grid-center {
  display: grid;
  align-content: center;
  justify-content: center;
  place-content: center;
}

.grid-center-in-page {
  display: grid;
  align-content: center;
  justify-content: center;
  place-content: center;
  min-height: 80vh;
}

.grid-stretch {
  display: grid;
  align-items: stretch;
}

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-cols-12 {
  grid-template-columns: repeat(12, 1fr);
}

/* ===================================
   TEXT UTILITIES
   Text styling and alignment utilities
   =================================== */

.text--muted {
  color: var(--color-text--muted);
}

.text-week {
  color: var(--color-text-week);
}

.text-help {
  color: var(--color-text-week);
  line-height: 1.25;
  margin: 0;
}

.text-small {
  font-size: 0.75rem;
  font-size: var(--font-size-1);
  line-height: 1.3;
  margin: 0;
}

.text-error {
  color: var(--error-500);
}

.text-info {
  color: var(--info-500);
}

.text-success {
  color: var(--success-500);
}

.text-warning {
  color: var(--warning-500);
}

.text-slate {
  color: light-dark(var(--slate-400), var(--slate-600));
}

.text-accent {
  color: var(--accent-foreground);
}

.text-heading {
  color: var(--color-text-heading);
}

.text-link {
  color: var(--color-link);
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.text-lead {
  font-size: 1.125rem;
  font-size: var(--font-size-4);
  line-height: 1.6;
}

.text-6 {
  font-size: 1.5rem;
  font-size: var(--font-size-6);
  line-height: 1.3;
}

.text-10 {
  font-size: 3rem;
  font-size: var(--font-size-9);
  line-height: 1.2;
}

.display-1 {
  font-size: 2.25rem;
  font-size: var(--font-size-display-1);
  line-height: 1.15;
}

.display-6 {
  font-size: 1.5rem;
  font-size: var(--font-size-6);
  line-height: 1.25;
}

.text-center {
  text-align: center;
}

.text-start {
  text-align: left;
}

.text-end {
  text-align: right;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-lowercase {
  text-transform: lowercase;
}

.text-capitalize {
  text-transform: capitalize;
}

.text-justify {
  text-align: justify;
}

.text-break {
  word-break: break-word;
}

.text-nowrap {
  white-space: nowrap;
}

/* ===================================
   RESPONSIVE TEXT UTILITIES
   Text utilities that respond to screen size
   =================================== */

@media (min-width: 769px) {
  .desktop-text-center {
    text-align: center;
  }

  .desktop-text-left {
    text-align: left;
  }

  .desktop-text-right {
    text-align: right;
  }
}

@media (max-width: 768px) {
  .mobile-text-center {
    text-align: center;
  }

  .mobile-text-left {
    text-align: left;
  }

  .mobile-text-right {
    text-align: right;
  }
}

/* ===================================
   LAYOUT UTILITIES
   Common layout and positioning utilities
   =================================== */

.center {
  display: grid;
  align-content: center;
  justify-content: center;
  place-content: center;
}

.center-in-page {
  display: grid;
  align-content: center;
  justify-content: center;
  place-content: center;
  min-height: 80vh;
}

.center-in-container {
  display: grid;
  align-content: center;
  justify-content: center;
  place-content: center;
  min-height: 100%;
}

/* ===================================
   SPACING UTILITIES
   Margin and padding utilities
   =================================== */

.m-0 {
  margin: 0;
}

.m-xs {
  margin: 0.25rem;
  margin: var(--spacing-xxs);
}

.m-s {
  margin: 0.5rem;
  margin: var(--spacing-xs);
}

.m-base {
  margin: 1rem;
  margin: var(--spacing-base);
}

.m-m {
  margin: 0.875rem;
  margin: var(--spacing-m);
}

.m-l {
  margin: 1.5rem;
  margin: var(--spacing-l);
}

.m-xl {
  margin: 2rem;
  margin: var(--spacing-xl);
}

.m-xxl {
  margin: 2.5rem;
  margin: var(--spacing-xxl);
}

.m-xxxl {
  margin: 4rem;
  margin: var(--spacing-xxxl);
}

.mt-0 {
  margin-top: 0;
}

.mt-xs {
  margin-top: 0.25rem;
  margin-top: var(--spacing-xxs);
}

.mt-s {
  margin-top: 0.5rem;
  margin-top: var(--spacing-xs);
}

.mt-base {
  margin-top: 1rem;
  margin-top: var(--spacing-base);
}

.mt-m {
  margin-top: 0.875rem;
  margin-top: var(--spacing-m);
}

.mt-l {
  margin-top: 1.5rem;
  margin-top: var(--spacing-l);
}

.mt-xl {
  margin-top: 2rem;
  margin-top: var(--spacing-xl);
}

.mt-xxl {
  margin-top: 2.5rem;
  margin-top: var(--spacing-xxl);
}

.mt-xxxl {
  margin-top: 4rem;
  margin-top: var(--spacing-xxxl);
}

.mb-0 {
  margin-bottom: 0;
}

.mb-xs {
  margin-bottom: 0.25rem;
  margin-bottom: var(--spacing-xxs);
}

.mb-s {
  margin-bottom: 0.5rem;
  margin-bottom: var(--spacing-xs);
}

.mb-base {
  margin-bottom: 1rem;
  margin-bottom: var(--spacing-base);
}

.mb-m {
  margin-bottom: 0.875rem;
  margin-bottom: var(--spacing-m);
}

.mb-l {
  margin-bottom: 1.5rem;
  margin-bottom: var(--spacing-l);
}

.mb-xl {
  margin-bottom: 2rem;
  margin-bottom: var(--spacing-xl);
}

.mb-xxl {
  margin-bottom: 2.5rem;
  margin-bottom: var(--spacing-xxl);
}

.mb-xxxl {
  margin-bottom: 4rem;
  margin-bottom: var(--spacing-xxxl);
}

.ml-0 {
  margin-left: 0;
}

.ml-xs {
  margin-left: 0.25rem;
  margin-left: var(--spacing-xxs);
}

.ml-s {
  margin-left: 0.5rem;
  margin-left: var(--spacing-xs);
}

.ml-base {
  margin-left: 1rem;
  margin-left: var(--spacing-base);
}

.ml-m {
  margin-left: 0.875rem;
  margin-left: var(--spacing-m);
}

.ml-l {
  margin-left: 1.5rem;
  margin-left: var(--spacing-l);
}

.ml-xl {
  margin-left: 2rem;
  margin-left: var(--spacing-xl);
}

.ml-xxl {
  margin-left: 2.5rem;
  margin-left: var(--spacing-xxl);
}

.ml-xxxl {
  margin-left: 4rem;
  margin-left: var(--spacing-xxxl);
}

.mr-0 {
  margin-right: 0;
}

.mr-xs {
  margin-right: 0.25rem;
  margin-right: var(--spacing-xxs);
}

.mr-s {
  margin-right: 0.5rem;
  margin-right: var(--spacing-xs);
}

.mr-base {
  margin-right: 1rem;
  margin-right: var(--spacing-base);
}

.mr-m {
  margin-right: 0.875rem;
  margin-right: var(--spacing-m);
}

.mr-l {
  margin-right: 1.5rem;
  margin-right: var(--spacing-l);
}

.mr-xl {
  margin-right: 2rem;
  margin-right: var(--spacing-xl);
}

.mr-xxl {
  margin-right: 2.5rem;
  margin-right: var(--spacing-xxl);
}

.mr-xxxl {
  margin-right: 4rem;
  margin-right: var(--spacing-xxxl);
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.p-0 {
  padding: 0;
}

.p-xs {
  padding: 0.25rem;
  padding: var(--spacing-xxs);
}

.p-s {
  padding: 0.5rem;
  padding: var(--spacing-xs);
}

.p-base {
  padding: 1rem;
  padding: var(--spacing-base);
}

.p-m {
  padding: 0.875rem;
  padding: var(--spacing-m);
}

.p-l {
  padding: 1.5rem;
  padding: var(--spacing-l);
}

.p-xl {
  padding: 2rem;
  padding: var(--spacing-xl);
}

.p-xxl {
  padding: 2.5rem;
  padding: var(--spacing-xxl);
}

.p-xxxl {
  padding: 4rem;
  padding: var(--spacing-xxxl);
}

.rounded {
  border-radius: 0.25rem;
  border-radius: var(--border-radius-small);
}

.rounded-medium {
  border-radius: 0.5rem;
  border-radius: var(--border-radius-medium);
}

.rounded-large {
  border-radius: 0.75rem;
  border-radius: var(--border-radius-large);
}

.rounded-full {
  border-radius: 9999px;
}

.bg-accent-surface-light {
  background-color: var(--accent-surface-light);
  color: var(--color-text-heading);
}

.bg-success-surface-light {
  background-color: var(--validation-success-bg);
  color: light-dark(var(--success-800), var(--success-200));
}

.bg-info-surface-light {
  background-color: var(--validation-info-bg);
  color: light-dark(var(--info-800), var(--info-200));
}

.bg-warning-surface-light {
  background-color: var(--validation-warning-bg);
  color: light-dark(var(--warning-800), var(--warning-200));
}

.bg-error-surface-light {
  background-color: var(--validation-error-bg);
  color: light-dark(var(--error-800), var(--error-200));
}

.bg-primary-surface-light,
.bg-teal-surface-light {
  background-color: light-dark(var(--primary-100), var(--primary-850));
  color: light-dark(var(--primary-800), var(--primary-150));
}

/* ===================================
   CONTENT UTILITIES
   Content and overflow utilities
   =================================== */

.hr-line {
  height: 0.75rem;
  height: var(--spacing-s);
  width: 100%;
  margin: 1rem 0px;
  margin: var(--spacing-base) 0px;
  background-color: var(--accent-surface);
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-scroll {
  overflow: scroll;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-normal {
  white-space: normal;
}

.whitespace-pre {
  white-space: pre;
}

.whitespace-pre-wrap {
  white-space: pre-wrap;
}

/* ===================================
   FLEXBOX ALIGNMENT UTILITIES
   Flexbox alignment and justification
   =================================== */

.justify-content-start {
  justify-content: flex-start;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

.justify-content-evenly {
  justify-content: space-evenly;
}

.align-items-start {
  align-items: flex-start;
}

.align-items-end {
  align-items: flex-end;
}

.align-items-center {
  align-items: center;
}

.align-items-baseline {
  align-items: baseline;
}

.align-items-stretch {
  align-items: stretch;
}

/* ===================================
   SVG ICON UTILITIES
   SVG icon styling utilities
   =================================== */

.svg-icon--success > * {
  fill: var(--success-400);
  stroke: none;
}

.svg-icon--info > * {
  fill: var(--info-400);
  stroke: none;
}

.svg-icon--warning > * {
  fill: var(--warning-400);
  stroke: none;
}

.svg-icon--error > * {
  fill: var(--error-400);
  stroke: none;
}

.svg-icon--primary > * {
  fill: var(--primary-500);
  stroke: none;
}

.svg-icon--secondary > * {
  fill: var(--neutral-500);
  stroke: none;
}

/* ===================================
   ANIMATION UTILITIES
   Animation utilities for common use cases
   =================================== */

.pulse {
  animation: pulse 250ms ease-in-out;
  animation: var(--animation-pulse);
}

.fade-in {
  animation: fadeIn 250ms ease-in-out;
  animation: var(--animation-fade-in);
}

.slide-up {
  animation: slideUp 250ms ease-in-out;
  animation: var(--animation-slide-up);
}

.slide-down {
  animation: slideDown 250ms ease-in-out;
  animation: var(--animation-slide-down);
}

.slide-left {
  animation: var(--animation-slide-left);
}

.slide-right {
  animation: var(--animation-slide-right);
}

.success-bounce {
  animation: bounce 0.6s ease;
  animation: var(--animation-success-bounce);
}

.error-shake {
  animation: shake 0.5s ease-in-out;
  animation: var(--animation-error-shake);
}

.spin {
  animation: var(--animation-spin);
}

/* ===================================
   VISUAL FEEDBACK UTILITIES
   Common visual patterns for user feedback
   =================================== */

.status-success {
  color: light-dark(var(--success-700), var(--success-300));
  background-color: var(--validation-success-bg);
  border: 1px solid rgb(5, 137, 62);
  border: 1px solid var(--validation-success);
  border-radius: 0.25rem;
  border-radius: var(--border-radius-extra-small);
  padding: 0.5rem 0.75rem;
  padding: var(--spacing-xs) var(--spacing-s);
}

.status-error {
  color: light-dark(var(--error-700), var(--error-300));
  background-color: var(--validation-error-bg);
  border: 1px solid rgb(197, 54, 55);
  border: 1px solid var(--validation-error);
  border-radius: 0.25rem;
  border-radius: var(--border-radius-extra-small);
  padding: 0.5rem 0.75rem;
  padding: var(--spacing-xs) var(--spacing-s);
}

.status-warning {
  color: light-dark(var(--warning-700), var(--warning-300));
  background-color: var(--validation-warning-bg);
  border: 1px solid rgb(148, 105, 0);
  border: 1px solid color(display-p3 0.57061 0.41036 0);
  border: 1px solid var(--validation-warning);
  border-radius: 0.25rem;
  border-radius: var(--border-radius-extra-small);
  padding: 0.5rem 0.75rem;
  padding: var(--spacing-xs) var(--spacing-s);
}

.status-info {
  color: light-dark(var(--info-700), var(--info-300));
  background-color: var(--validation-info-bg);
  border: 1px solid rgb(0, 126, 154);
  border: 1px solid color(display-p3 0 0.4978 0.63794);
  border: 1px solid var(--validation-info);
  border-radius: 0.25rem;
  border-radius: var(--border-radius-extra-small);
  padding: 0.5rem 0.75rem;
  padding: var(--spacing-xs) var(--spacing-s);
}

.guideline-card {
  background-color: var(--color-surface);
  border: var(--border-default);
  border-radius: 0.25rem;
  border-radius: var(--border-radius-small);
  padding: 1rem;
  padding: var(--spacing-base);
}

.guideline-card__title {
  margin: 0 0 0.75rem;
  margin: 0 0 var(--spacing-s);
  font-size: 1.125rem;
  font-size: var(--font-size-4);
  color: var(--color-text-heading);
}

.guideline-card__list {
  margin: 0;
  padding-left: 1.5rem;
  padding-left: var(--spacing-l);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  gap: var(--spacing-s);
  margin-top: 1rem;
  margin-top: var(--spacing-base);
}

/* ===================================
   INTERACTIVE UTILITIES
   Hover and focus states for better UX
   =================================== */

.hover-lift {
  transition:
    transform 150ms ease-in-out, box-shadow 150ms ease-in-out;
  transition:
    transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    box-shadow: var(--shadow-medium);
  }

.hover-scale {
  transition: transform 150ms ease-in-out;
  transition: transform var(--transition-fast);
}

.hover-scale:hover {
    transform: scale(1.02);
  }

.hover-glow {
  transition: box-shadow 150ms ease-in-out;
  transition: box-shadow var(--transition-fast);
}

.hover-glow:hover {
    box-shadow: 0 0 8px
      light-dark(
        oklch(from var(--primary-500) l c h / 0.3),
        oklch(from var(--primary-400) l c h / 0.3)
      );
  }

.focus-ring {
  transition: box-shadow 150ms ease-in-out;
  transition: box-shadow var(--transition-fast);
}

.focus-ring:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px
      light-dark(
        oklch(from var(--primary-500) l c h / 0.3),
        oklch(from var(--primary-400) l c h / 0.3)
      );
  }

/* ===================================
   POSITION UTILITIES
   Position and z-index utilities
   =================================== */

.position-static {
  position: static;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.position-sticky {
  position: sticky;
}

.z-index-0 {
  z-index: 0;
}

.z-index-10 {
  z-index: 10;
}

.z-index-20 {
  z-index: 20;
}

.z-index-30 {
  z-index: 30;
}

.z-index-40 {
  z-index: 40;
}

.z-index-50 {
  z-index: 50;
}

.z-index-auto {
  z-index: auto;
}

/* ===================================
   WIDTH AND HEIGHT UTILITIES
   Width and height utilities
   =================================== */

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.w-screen {
  width: 100vw;
}

.w-min {
  width: -moz-min-content;
  width: min-content;
}

.w-max {
  width: -moz-max-content;
  width: max-content;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.h-min {
  height: -moz-min-content;
  height: min-content;
}

.h-max {
  height: -moz-max-content;
  height: max-content;
}

.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}

.min-w-0 {
  min-width: 0;
}

.min-w-full {
  min-width: 100%;
}

.max-w-full {
  max-width: 100%;
}

.min-h-0 {
  min-height: 0;
}

.min-h-full {
  min-height: 100%;
}

.max-h-full {
  max-height: 100%;
}

/* ===================================
   RESPONSIVE UTILITIES
   Mobile-first responsive utilities
   =================================== */

@media (min-width: 640px) {
  .sm\:d-flex {
    display: flex;
  }
  .sm\:d-grid {
    display: grid;
  }
  .sm\:text-center {
    text-align: center;
  }
  .sm\:text-left {
    text-align: left;
  }
  .sm\:text-right {
    text-align: right;
  }
  .sm\:justify-between {
    justify-content: space-between;
  }
  .sm\:justify-center {
    justify-content: center;
  }
  .sm\:align-center {
    align-items: center;
  }
}

@media (min-width: 768px) {
  .md\:d-flex {
    display: flex;
  }
  .md\:d-grid {
    display: grid;
  }
  .md\:text-center {
    text-align: center;
  }
  .md\:text-left {
    text-align: left;
  }
  .md\:text-right {
    text-align: right;
  }
  .md\:justify-between {
    justify-content: space-between;
  }
  .md\:justify-center {
    justify-content: center;
  }
  .md\:align-center {
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .lg\:d-flex {
    display: flex;
  }
  .lg\:d-grid {
    display: grid;
  }
  .lg\:text-center {
    text-align: center;
  }
  .lg\:text-left {
    text-align: left;
  }
  .lg\:text-right {
    text-align: right;
  }
  .lg\:justify-between {
    justify-content: space-between;
  }
  .lg\:justify-center {
    justify-content: center;
  }
  .lg\:align-center {
    align-items: center;
  }
}

@media (min-width: 1280px) {
  .xl\:d-flex {
    display: flex;
  }
  .xl\:d-grid {
    display: grid;
  }
  .xl\:text-center {
    text-align: center;
  }
  .xl\:text-left {
    text-align: left;
  }
  .xl\:text-right {
    text-align: right;
  }
  .xl\:justify-between {
    justify-content: space-between;
  }
  .xl\:justify-center {
    justify-content: center;
  }
  .xl\:align-center {
    align-items: center;
  }
}

/* ===================================
   ACCESSIBILITY UTILITIES
   Accessibility-focused utilities
   =================================== */

.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.focusable:focus {
  outline: 2px solid #0d9488;
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ===================================
   PRINT UTILITIES
   Print-specific utilities
   =================================== */

@media print {
  .print-hidden {
    display: none !important;
  }
  .print-block {
    display: block !important;
  }
  .print-inline {
    display: inline !important;
  }
  .print-no-break {
    page-break-inside: avoid;
  }
  .print-break-before {
    page-break-before: always;
  }
  .print-break-after {
    page-break-after: always;
  }
}