/* EGKits Utilities (Public) - scoped under .public-app (layout wrapper) */
.public-app .u-flex { display: flex !important; }
.public-app .u-inline-flex { display: inline-flex !important; }
.public-app .u-items-center { align-items: center !important; }
.public-app .u-justify-center { justify-content: center !important; }
.public-app .u-justify-between { justify-content: space-between !important; }
.public-app .u-gap-1 { gap: var(--egk-space-1) !important; }
.public-app .u-gap-2 { gap: var(--egk-space-2) !important; }
.public-app .u-gap-3 { gap: var(--egk-space-3) !important; }
.public-app .u-gap-4 { gap: var(--egk-space-4) !important; }

.public-app .u-m-0 { margin: 0 !important; }
.public-app .u-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.public-app .u-p-0 { padding: 0 !important; }
.public-app .u-p-2 { padding: var(--egk-space-2) !important; }
.public-app .u-p-4 { padding: var(--egk-space-4) !important; }

.public-app .u-rounded-sm { border-radius: var(--egk-radius-sm) !important; }
.public-app .u-rounded-md { border-radius: var(--egk-radius-md) !important; }
.public-app .u-rounded-lg { border-radius: var(--egk-radius-lg) !important; }

.public-app .u-shadow-sm { box-shadow: var(--egk-shadow-sm) !important; }
.public-app .u-shadow-md { box-shadow: var(--egk-shadow-md) !important; }
.public-app .u-shadow-lg { box-shadow: var(--egk-shadow-lg) !important; }

.public-app .u-z-base { z-index: var(--egk-z-base) !important; }
.public-app .u-z-dropdown { z-index: var(--egk-z-dropdown) !important; }
.public-app .u-z-sticky { z-index: var(--egk-z-sticky) !important; }
.public-app .u-z-fixed { z-index: var(--egk-z-fixed) !important; }
.public-app .u-z-overlay { z-index: var(--egk-z-overlay) !important; }
.public-app .u-z-drawer { z-index: var(--egk-z-drawer) !important; }
.public-app .u-z-popover { z-index: var(--egk-z-popover) !important; }
.public-app .u-z-modal { z-index: var(--egk-z-modal) !important; }

.public-app .u-w-full { width: 100% !important; }
.public-app .u-max-w-screen { max-width: min(100% - 2rem, 1200px) !important; }

.public-app .u-text-muted { color: var(--egk-color-muted) !important; }
.public-app .u-text-primary { color: var(--egk-color-primary) !important; }

/* New: transitions */
.public-app .u-transition { transition: all .2s ease-in-out !important; }
.public-app .u-transition-fast { transition: all .15s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.public-app .u-transition-slow { transition: all .35s cubic-bezier(0.4, 0, 0.2, 1) !important; }

/* New: glass/backdrop.
   The base `.u-glass` is defined globally (unscoped) in dropdown-enhancements.css
   so it also reaches MudBlazor popovers that portal outside `.public-app`. */
.public-app .u-glass-strong { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.25); }
.public-app .u-glass-dark { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); }

/* New: gradients */
.public-app .u-gradient-primary { background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken, #4f46e5) 100%) !important; }
.public-app .u-gradient-secondary { background: linear-gradient(135deg, var(--mud-palette-secondary) 0%, color-mix(in srgb, var(--mud-palette-secondary) 80%, white) 100%) !important; }
.public-app .u-gradient-surface { background: linear-gradient(135deg, rgba(var(--mud-palette-surface-rgb, 255,255,255), .9) 0%, rgba(255,255,255,.8) 100%) !important; }

/* New: focus helper */
.public-app .u-focus-visible:focus-visible { outline: 2px solid var(--egk-focus-color, var(--mud-palette-secondary)); outline-offset: 2px; box-shadow: var(--egk-focus-ring, 0 0 0 3px rgba(89,74,226,.25)); border-radius: var(--egk-radius-sm); }