@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.33 → 0.2.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/dist/components/ui/navigation/user-menu.d.ts.map +1 -1
  3. package/dist/components/ui/navigation/user-menu.esm.js +57 -6
  4. package/dist/components/ui/navigation/user-menu.js +57 -6
  5. package/dist/styles.css +1 -1
  6. package/package.json +1 -1
  7. package/src/components/ui/navigation/user-menu.tsx +72 -12
  8. package/src/styles/components/navigation/index.css +2 -1
  9. package/src/styles/components/navigation/user-menu.css +37 -3
package/CHANGELOG.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  All notable changes to the stan-design theme package will be documented in this file.
4
4
 
5
- ## [0.2.33] - 2025-10-05
5
+ ## [0.2.35] - 2025-10-05
6
6
 
7
7
  ### Added
8
8
  - Initial release of stan-design theme package
package/dist/components/ui/navigation/user-menu.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"user-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/navigation/user-menu.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,aAAa,EAA+B,MAAM,sBAAsB,CAAC;AAyHlF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6N5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"user-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/navigation/user-menu.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,aAAa,EAA+B,MAAM,sBAAsB,CAAC;AA2HlF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuR5C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
package/dist/components/ui/navigation/user-menu.esm.js CHANGED
@@ -16,7 +16,7 @@ const UserMenuHeader = ({ user, subscription, className = '', custom }) => {
16
16
  if (custom) {
17
17
  return _jsx("div", { className: `user-menu__header ${className}`, children: custom });
18
18
  }
19
- return (_jsxs("div", { className: `user-menu__header ${className}`, children: [_jsx("div", { className: "user-menu__header-avatar", children: _jsx(UserAvatar, { user: user, size: "lg" }) }), _jsxs("div", { className: "user-menu__header-info", children: [_jsx("div", { className: "user-menu__header-name", children: user.fullName || user.firstName || 'User' }), user.email && (_jsx("div", { className: "user-menu__header-email", children: user.email })), subscription && (_jsx("div", { className: "user-menu__header-subscription", children: _jsx(SubscriptionBadge, { subscription: subscription, size: "sm" }) }))] })] }));
19
+ return (_jsxs("div", { className: `user-menu__header ${className}`, children: [_jsx("div", { className: "user-menu__header-avatar", children: _jsx(UserAvatar, { user: user, size: "lg" }) }), _jsxs("div", { className: "user-menu__header-info", children: [_jsxs("div", { className: "user-menu__header-name-row", children: [_jsx("div", { className: "user-menu__header-name", children: user.fullName || user.firstName || 'User' }), subscription && (_jsx("div", { className: "user-menu__header-subscription", children: _jsx(SubscriptionBadge, { subscription: subscription, size: "sm" }) }))] }), user.email && (_jsx("div", { className: "user-menu__header-email", children: user.email }))] })] }));
20
20
  };
21
21
  const UserMenuSection = ({ group, onItemClick }) => {
22
22
  const handleItemClick = useCallback((item) => {
@@ -44,6 +44,7 @@ const UserMenuSection = ({ group, onItemClick }) => {
44
44
  };
45
45
  export const UserMenu = ({ user, subscription, trigger, triggerProps, groups, showHeader = true, headerCustom, placement = 'bottom-right', offset = 8, width = 288, maxHeight = 400, onItemClick, onSignOut, open, defaultOpen = false, onOpenChange, className = '', headerClassName = '', dropdownClassName = '', 'aria-label': ariaLabel = 'User menu', 'data-testid': testId = 'user-menu' }) => {
46
46
  const [internalOpen, setInternalOpen] = useState(defaultOpen);
47
+ const [smartPlacement, setSmartPlacement] = useState(placement);
47
48
  // const [focusedIndex, setFocusedIndex] = useState(-1);
48
49
  const triggerRef = useRef(null);
49
50
  const dropdownRef = useRef(null);
@@ -118,9 +119,57 @@ export const UserMenu = ({ user, subscription, trigger, triggerProps, groups, sh
118
119
  document.removeEventListener('keydown', handleEscape);
119
120
  };
120
121
  }, [isOpen, handleClose]);
121
- // Get placement classes
122
+ // Smart positioning to prevent viewport overflow
123
+ useEffect(() => {
124
+ if (!isOpen || !triggerRef.current)
125
+ return;
126
+ const updatePlacement = () => {
127
+ const trigger = triggerRef.current;
128
+ if (!trigger)
129
+ return;
130
+ const triggerRect = trigger.getBoundingClientRect();
131
+ const viewportHeight = window.innerHeight;
132
+ const viewportWidth = window.innerWidth;
133
+ // Calculate space available below and above
134
+ const spaceBelow = viewportHeight - triggerRect.bottom;
135
+ const spaceAbove = triggerRect.top;
136
+ const spaceRight = viewportWidth - triggerRect.left;
137
+ const spaceLeft = triggerRect.right;
138
+ // Estimate dropdown height (use max-height or approximate)
139
+ const estimatedDropdownHeight = Math.min(400, viewportHeight * 0.6);
140
+ let newPlacement = placement;
141
+ // Vertical positioning logic
142
+ if (placement.includes('bottom') && spaceBelow < estimatedDropdownHeight && spaceAbove > spaceBelow) {
143
+ // Flip to top if more space above
144
+ newPlacement = placement.replace('bottom', 'top');
145
+ }
146
+ else if (placement.includes('top') && spaceAbove < estimatedDropdownHeight && spaceBelow > spaceAbove) {
147
+ // Flip to bottom if more space below
148
+ newPlacement = placement.replace('top', 'bottom');
149
+ }
150
+ // Horizontal positioning logic
151
+ if (placement.includes('right') && spaceRight < 300 && spaceLeft > spaceRight) {
152
+ // Flip to left if more space on left
153
+ newPlacement = newPlacement.replace('right', 'left');
154
+ }
155
+ else if (placement.includes('left') && spaceLeft < 300 && spaceRight > spaceLeft) {
156
+ // Flip to right if more space on right
157
+ newPlacement = newPlacement.replace('left', 'right');
158
+ }
159
+ setSmartPlacement(newPlacement);
160
+ };
161
+ // Update on open and on scroll/resize
162
+ updatePlacement();
163
+ window.addEventListener('scroll', updatePlacement, { passive: true });
164
+ window.addEventListener('resize', updatePlacement, { passive: true });
165
+ return () => {
166
+ window.removeEventListener('scroll', updatePlacement);
167
+ window.removeEventListener('resize', updatePlacement);
168
+ };
169
+ }, [isOpen, placement]);
170
+ // Get placement classes using smart placement
122
171
  const getPlacementClasses = () => {
123
- switch (placement) {
172
+ switch (smartPlacement) {
124
173
  case 'bottom-left':
125
174
  return 'user-menu__dropdown--bottom-left';
126
175
  case 'bottom-right':
@@ -146,9 +195,11 @@ export const UserMenu = ({ user, subscription, trigger, triggerProps, groups, sh
146
195
  })) : null;
147
196
  return (_jsxs("div", { className: `user-menu ${className}`, "data-testid": testId, children: [customTrigger || (_jsx("button", { ref: triggerRef, onClick: handleToggle, className: "user-menu__trigger", "aria-expanded": isOpen, "aria-haspopup": "true", "aria-label": ariaLabel, children: defaultTrigger })), isOpen && (_jsxs("div", { ref: dropdownRef, className: `user-menu__dropdown ${getPlacementClasses()} ${dropdownClassName}`, role: "menu", "aria-label": ariaLabel, style: {
148
197
  width: typeof width === 'number' ? `${width}px` : width,
149
- maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
150
- marginTop: placement.includes('bottom') ? `${offset}px` : undefined,
151
- marginBottom: placement.includes('top') ? `${offset}px` : undefined
198
+ maxHeight: typeof maxHeight === 'number'
199
+ ? `min(${maxHeight}px, calc(100vh - 120px))`
200
+ : `min(${maxHeight}, calc(100vh - 120px))`,
201
+ marginTop: smartPlacement.includes('bottom') ? `${offset}px` : undefined,
202
+ marginBottom: smartPlacement.includes('top') ? `${offset}px` : undefined
152
203
  }, children: [showHeader && (_jsx(UserMenuHeader, { user: user, subscription: subscription, className: headerClassName, custom: headerCustom })), _jsx("div", { className: "user-menu__sections", children: groups.map((group, sectionIndex) => (_jsx(UserMenuSection, { group: group, onItemClick: handleItemClick, sectionIndex: sectionIndex }, group.id))) })] }))] }));
153
204
  };
154
205
  export default UserMenu;
package/dist/components/ui/navigation/user-menu.js CHANGED
@@ -16,7 +16,7 @@ const UserMenuHeader = ({ user, subscription, className = '', custom }) => {
16
16
  if (custom) {
17
17
  return _jsx("div", { className: `user-menu__header ${className}`, children: custom });
18
18
  }
19
- return (_jsxs("div", { className: `user-menu__header ${className}`, children: [_jsx("div", { className: "user-menu__header-avatar", children: _jsx(UserAvatar, { user: user, size: "lg" }) }), _jsxs("div", { className: "user-menu__header-info", children: [_jsx("div", { className: "user-menu__header-name", children: user.fullName || user.firstName || 'User' }), user.email && (_jsx("div", { className: "user-menu__header-email", children: user.email })), subscription && (_jsx("div", { className: "user-menu__header-subscription", children: _jsx(SubscriptionBadge, { subscription: subscription, size: "sm" }) }))] })] }));
19
+ return (_jsxs("div", { className: `user-menu__header ${className}`, children: [_jsx("div", { className: "user-menu__header-avatar", children: _jsx(UserAvatar, { user: user, size: "lg" }) }), _jsxs("div", { className: "user-menu__header-info", children: [_jsxs("div", { className: "user-menu__header-name-row", children: [_jsx("div", { className: "user-menu__header-name", children: user.fullName || user.firstName || 'User' }), subscription && (_jsx("div", { className: "user-menu__header-subscription", children: _jsx(SubscriptionBadge, { subscription: subscription, size: "sm" }) }))] }), user.email && (_jsx("div", { className: "user-menu__header-email", children: user.email }))] })] }));
20
20
  };
21
21
  const UserMenuSection = ({ group, onItemClick }) => {
22
22
  const handleItemClick = useCallback((item) => {
@@ -44,6 +44,7 @@ const UserMenuSection = ({ group, onItemClick }) => {
44
44
  };
45
45
  export const UserMenu = ({ user, subscription, trigger, triggerProps, groups, showHeader = true, headerCustom, placement = 'bottom-right', offset = 8, width = 288, maxHeight = 400, onItemClick, onSignOut, open, defaultOpen = false, onOpenChange, className = '', headerClassName = '', dropdownClassName = '', 'aria-label': ariaLabel = 'User menu', 'data-testid': testId = 'user-menu' }) => {
46
46
  const [internalOpen, setInternalOpen] = useState(defaultOpen);
47
+ const [smartPlacement, setSmartPlacement] = useState(placement);
47
48
  // const [focusedIndex, setFocusedIndex] = useState(-1);
48
49
  const triggerRef = useRef(null);
49
50
  const dropdownRef = useRef(null);
@@ -118,9 +119,57 @@ export const UserMenu = ({ user, subscription, trigger, triggerProps, groups, sh
118
119
  document.removeEventListener('keydown', handleEscape);
119
120
  };
120
121
  }, [isOpen, handleClose]);
121
- // Get placement classes
122
+ // Smart positioning to prevent viewport overflow
123
+ useEffect(() => {
124
+ if (!isOpen || !triggerRef.current)
125
+ return;
126
+ const updatePlacement = () => {
127
+ const trigger = triggerRef.current;
128
+ if (!trigger)
129
+ return;
130
+ const triggerRect = trigger.getBoundingClientRect();
131
+ const viewportHeight = window.innerHeight;
132
+ const viewportWidth = window.innerWidth;
133
+ // Calculate space available below and above
134
+ const spaceBelow = viewportHeight - triggerRect.bottom;
135
+ const spaceAbove = triggerRect.top;
136
+ const spaceRight = viewportWidth - triggerRect.left;
137
+ const spaceLeft = triggerRect.right;
138
+ // Estimate dropdown height (use max-height or approximate)
139
+ const estimatedDropdownHeight = Math.min(400, viewportHeight * 0.6);
140
+ let newPlacement = placement;
141
+ // Vertical positioning logic
142
+ if (placement.includes('bottom') && spaceBelow < estimatedDropdownHeight && spaceAbove > spaceBelow) {
143
+ // Flip to top if more space above
144
+ newPlacement = placement.replace('bottom', 'top');
145
+ }
146
+ else if (placement.includes('top') && spaceAbove < estimatedDropdownHeight && spaceBelow > spaceAbove) {
147
+ // Flip to bottom if more space below
148
+ newPlacement = placement.replace('top', 'bottom');
149
+ }
150
+ // Horizontal positioning logic
151
+ if (placement.includes('right') && spaceRight < 300 && spaceLeft > spaceRight) {
152
+ // Flip to left if more space on left
153
+ newPlacement = newPlacement.replace('right', 'left');
154
+ }
155
+ else if (placement.includes('left') && spaceLeft < 300 && spaceRight > spaceLeft) {
156
+ // Flip to right if more space on right
157
+ newPlacement = newPlacement.replace('left', 'right');
158
+ }
159
+ setSmartPlacement(newPlacement);
160
+ };
161
+ // Update on open and on scroll/resize
162
+ updatePlacement();
163
+ window.addEventListener('scroll', updatePlacement, { passive: true });
164
+ window.addEventListener('resize', updatePlacement, { passive: true });
165
+ return () => {
166
+ window.removeEventListener('scroll', updatePlacement);
167
+ window.removeEventListener('resize', updatePlacement);
168
+ };
169
+ }, [isOpen, placement]);
170
+ // Get placement classes using smart placement
122
171
  const getPlacementClasses = () => {
123
- switch (placement) {
172
+ switch (smartPlacement) {
124
173
  case 'bottom-left':
125
174
  return 'user-menu__dropdown--bottom-left';
126
175
  case 'bottom-right':
@@ -146,9 +195,11 @@ export const UserMenu = ({ user, subscription, trigger, triggerProps, groups, sh
146
195
  })) : null;
147
196
  return (_jsxs("div", { className: `user-menu ${className}`, "data-testid": testId, children: [customTrigger || (_jsx("button", { ref: triggerRef, onClick: handleToggle, className: "user-menu__trigger", "aria-expanded": isOpen, "aria-haspopup": "true", "aria-label": ariaLabel, children: defaultTrigger })), isOpen && (_jsxs("div", { ref: dropdownRef, className: `user-menu__dropdown ${getPlacementClasses()} ${dropdownClassName}`, role: "menu", "aria-label": ariaLabel, style: {
148
197
  width: typeof width === 'number' ? `${width}px` : width,
149
- maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
150
- marginTop: placement.includes('bottom') ? `${offset}px` : undefined,
151
- marginBottom: placement.includes('top') ? `${offset}px` : undefined
198
+ maxHeight: typeof maxHeight === 'number'
199
+ ? `min(${maxHeight}px, calc(100vh - 120px))`
200
+ : `min(${maxHeight}, calc(100vh - 120px))`,
201
+ marginTop: smartPlacement.includes('bottom') ? `${offset}px` : undefined,
202
+ marginBottom: smartPlacement.includes('top') ? `${offset}px` : undefined
152
203
  }, children: [showHeader && (_jsx(UserMenuHeader, { user: user, subscription: subscription, className: headerClassName, custom: headerCustom })), _jsx("div", { className: "user-menu__sections", children: groups.map((group, sectionIndex) => (_jsx(UserMenuSection, { group: group, onItemClick: handleItemClick, sectionIndex: sectionIndex }, group.id))) })] }))] }));
153
204
  };
154
205
  export default UserMenu;
package/dist/styles.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* Complete Theme CSS Bundle - stan-design */
2
- /* Generated on 2025-10-05T18:26:55.951Z */
2
+ /* Generated on 2025-10-05T19:05:13.805Z */
3
3
 
4
4
  /* ===== COMPILED STYLES (Tailwind + Components) ===== */
5
5
  @layer reset,base,themes,components,utilities,overrides;@layer reset;@layer themes;@layer overrides;*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:var(--font-sans);font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%;margin-right:auto;margin-left:auto;padding-right:2rem;padding-left:2rem}@media (min-width: 1400px){.container{max-width:1400px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{top:0;right:0;bottom:0;left:0}.-bottom-6{bottom:-1.5rem}.bottom-0{bottom:0}.bottom-4{bottom:1rem}.left-1\/2{left:50%}.right-2{right:.5rem}.right-3{right:.75rem}.right-4{right:1rem}.top-0{top:0}.top-1\/2{top:50%}.top-2{top:.5rem}.z-10{z-index:10}.z-50{z-index:50}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-0{margin-bottom:0}.mb-1{margin-bottom:.25rem}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.ml-auto{margin-left:auto}.mr-2{margin-right:.5rem}.mr-3{margin-right:.75rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-1{height:.25rem}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-12{height:3rem}.h-16{height:4rem}.h-2{height:.5rem}.h-20{height:5rem}.h-24{height:6rem}.h-3{height:.75rem}.h-32{height:8rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-96{height:24rem}.h-auto{height:auto}.max-h-20{max-height:5rem}.max-h-32{max-height:8rem}.max-h-40{max-height:10rem}.max-h-60{max-height:15rem}.max-h-64{max-height:16rem}.max-h-96{max-height:24rem}.max-h-\[200px\]{max-height:200px}.max-h-\[300px\]{max-height:300px}.min-h-\[200px\]{min-height:200px}.min-h-\[300px\]{min-height:300px}.min-h-\[400px\]{min-height:400px}.min-h-\[40px\]{min-height:40px}.min-h-\[44px\]{min-height:44px}.min-h-\[48px\]{min-height:48px}.min-h-\[500px\]{min-height:500px}.min-h-\[56px\]{min-height:56px}.min-h-\[64px\]{min-height:64px}.min-h-screen{min-height:100vh}.w-12{width:3rem}.w-16{width:4rem}.w-2{width:.5rem}.w-24{width:6rem}.w-3{width:.75rem}.w-32{width:8rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-80{width:20rem}.w-96{width:24rem}.w-full{width:100%}.min-w-0{min-width:0px}.min-w-\[40px\]{min-width:40px}.min-w-\[44px\]{min-width:44px}.min-w-\[48px\]{min-width:48px}.min-w-\[56px\]{min-width:56px}.min-w-\[64px\]{min-width:64px}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-6xl{max-width:72rem}.max-w-full{max-width:100%}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\/2{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x: 100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-100{--tw-scale-x: 1;--tw-scale-y: 1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-95{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}.cursor-pointer{cursor:pointer}.touch-manipulation{touch-action:manipulation}.resize{resize:both}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.25rem * var(--tw-space-x-reverse));margin-left:calc(.25rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-12>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(3rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.\!truncate{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.break-words{overflow-wrap:break-word}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-b-2{border-bottom-width:2px}.border-l-2{border-left-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-blue-200{--tw-border-opacity: 1;border-color:rgb(191 219 254 / var(--tw-border-opacity, 1))}.border-blue-300{--tw-border-opacity: 1;border-color:rgb(147 197 253 / var(--tw-border-opacity, 1))}.border-blue-500{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.border-cs-border{border-color:var(--border-color)}.border-cs-info{border-color:var(--info)}.border-cs-primary{border-color:var(--primary)}.border-cs-warning{border-color:var(--warning)}.border-gray-200{--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1))}.border-gray-300{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.border-gray-600{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.border-green-200{--tw-border-opacity: 1;border-color:rgb(187 247 208 / var(--tw-border-opacity, 1))}.border-green-500{--tw-border-opacity: 1;border-color:rgb(34 197 94 / var(--tw-border-opacity, 1))}.border-muted{border-color:hsl(var(--muted))}.border-orange-200{--tw-border-opacity: 1;border-color:rgb(254 215 170 / var(--tw-border-opacity, 1))}.border-purple-200{--tw-border-opacity: 1;border-color:rgb(233 213 255 / var(--tw-border-opacity, 1))}.border-red-200{--tw-border-opacity: 1;border-color:rgb(254 202 202 / var(--tw-border-opacity, 1))}.border-red-500{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.border-transparent{border-color:transparent}.border-yellow-200{--tw-border-opacity: 1;border-color:rgb(254 240 138 / var(--tw-border-opacity, 1))}.bg-blue-100{--tw-bg-opacity: 1;background-color:rgb(219 234 254 / var(--tw-bg-opacity, 1))}.bg-blue-50{--tw-bg-opacity: 1;background-color:rgb(239 246 255 / var(--tw-bg-opacity, 1))}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-blue-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.bg-card{background-color:hsl(var(--card))}.bg-cs-border{background-color:var(--border-color)}.bg-cs-error{background-color:var(--error)}.bg-cs-hover-bg{background-color:var(--hover-bg)}.bg-cs-page-bg{background-color:var(--page-bg)}.bg-cs-primary{background-color:var(--primary)}.bg-cs-success{background-color:var(--success)}.bg-cs-surface-bg{background-color:var(--surface-bg)}.bg-cs-warning{background-color:var(--warning)}.bg-current{background-color:currentColor}.bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity, 1))}.bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity, 1))}.bg-gray-50{--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1))}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.bg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.bg-green-100{--tw-bg-opacity: 1;background-color:rgb(220 252 231 / var(--tw-bg-opacity, 1))}.bg-green-400{--tw-bg-opacity: 1;background-color:rgb(74 222 128 / var(--tw-bg-opacity, 1))}.bg-green-50{--tw-bg-opacity: 1;background-color:rgb(240 253 244 / var(--tw-bg-opacity, 1))}.bg-green-500{--tw-bg-opacity: 1;background-color:rgb(34 197 94 / var(--tw-bg-opacity, 1))}.bg-green-600{--tw-bg-opacity: 1;background-color:rgb(22 163 74 / var(--tw-bg-opacity, 1))}.bg-orange-100{--tw-bg-opacity: 1;background-color:rgb(255 237 213 / var(--tw-bg-opacity, 1))}.bg-orange-50{--tw-bg-opacity: 1;background-color:rgb(255 247 237 / var(--tw-bg-opacity, 1))}.bg-orange-500{--tw-bg-opacity: 1;background-color:rgb(249 115 22 / var(--tw-bg-opacity, 1))}.bg-orange-600{--tw-bg-opacity: 1;background-color:rgb(234 88 12 / var(--tw-bg-opacity, 1))}.bg-primary{background-color:hsl(var(--primary))}.bg-purple-50{--tw-bg-opacity: 1;background-color:rgb(250 245 255 / var(--tw-bg-opacity, 1))}.bg-purple-500{--tw-bg-opacity: 1;background-color:rgb(168 85 247 / var(--tw-bg-opacity, 1))}.bg-red-100{--tw-bg-opacity: 1;background-color:rgb(254 226 226 / var(--tw-bg-opacity, 1))}.bg-red-400{--tw-bg-opacity: 1;background-color:rgb(248 113 113 / var(--tw-bg-opacity, 1))}.bg-red-50{--tw-bg-opacity: 1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1))}.bg-red-500{--tw-bg-opacity: 1;background-color:rgb(239 68 68 / var(--tw-bg-opacity, 1))}.bg-red-600{--tw-bg-opacity: 1;background-color:rgb(220 38 38 / var(--tw-bg-opacity, 1))}.bg-secondary{background-color:hsl(var(--secondary))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-yellow-100{--tw-bg-opacity: 1;background-color:rgb(254 249 195 / var(--tw-bg-opacity, 1))}.bg-yellow-400{--tw-bg-opacity: 1;background-color:rgb(250 204 21 / var(--tw-bg-opacity, 1))}.bg-yellow-50{--tw-bg-opacity: 1;background-color:rgb(254 252 232 / var(--tw-bg-opacity, 1))}.bg-yellow-500{--tw-bg-opacity: 1;background-color:rgb(234 179 8 / var(--tw-bg-opacity, 1))}.bg-yellow-600{--tw-bg-opacity: 1;background-color:rgb(202 138 4 / var(--tw-bg-opacity, 1))}.bg-opacity-20{--tw-bg-opacity: .2}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-blue-50{--tw-gradient-from: #eff6ff var(--tw-gradient-from-position);--tw-gradient-to: rgb(239 246 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-blue-500{--tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);--tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-cs-error{--tw-gradient-from: var(--error) var(--tw-gradient-from-position);--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-cs-success{--tw-gradient-from: var(--success) var(--tw-gradient-from-position);--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-cs-warning{--tw-gradient-from: var(--warning) var(--tw-gradient-from-position);--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-gray-50{--tw-gradient-from: #f9fafb var(--tw-gradient-from-position);--tw-gradient-to: rgb(249 250 251 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-green-400{--tw-gradient-from: #4ade80 var(--tw-gradient-from-position);--tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to: #3b82f6 var(--tw-gradient-to-position)}.to-gray-100{--tw-gradient-to: #f3f4f6 var(--tw-gradient-to-position)}.to-purple-50{--tw-gradient-to: #faf5ff var(--tw-gradient-to-position)}.to-purple-500{--tw-gradient-to: #a855f7 var(--tw-gradient-to-position)}.p-1{padding:.25rem}.p-1\.5{padding:.375rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-0{padding-left:0;padding-right:0}.px-10{padding-left:2.5rem;padding-right:2.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-3{padding-bottom:.75rem}.pb-4{padding-bottom:1rem}.pl-10{padding-left:2.5rem}.pl-4{padding-left:1rem}.pr-4{padding-right:1rem}.pt-4{padding-top:1rem}.pt-6{padding-top:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.font-display{font-family:var(--font-display)}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-6xl{font-size:3.75rem;line-height:1}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.text-blue-500{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.text-blue-600{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.text-blue-700{--tw-text-opacity: 1;color:rgb(29 78 216 / var(--tw-text-opacity, 1))}.text-blue-800{--tw-text-opacity: 1;color:rgb(30 64 175 / var(--tw-text-opacity, 1))}.text-blue-900{--tw-text-opacity: 1;color:rgb(30 58 138 / var(--tw-text-opacity, 1))}.text-cs-error{color:var(--error)}.text-cs-primary{color:var(--primary)}.text-cs-success{color:var(--success)}.text-cs-text-primary{color:var(--text-primary)}.text-cs-text-secondary{color:var(--text-secondary)}.text-cs-warning{color:var(--warning)}.text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-gray-900{--tw-text-opacity: 1;color:rgb(17 24 39 / var(--tw-text-opacity, 1))}.text-green-400{--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.text-green-500{--tw-text-opacity: 1;color:rgb(34 197 94 / var(--tw-text-opacity, 1))}.text-green-600{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.text-green-700{--tw-text-opacity: 1;color:rgb(21 128 61 / var(--tw-text-opacity, 1))}.text-green-800{--tw-text-opacity: 1;color:rgb(22 101 52 / var(--tw-text-opacity, 1))}.text-green-900{--tw-text-opacity: 1;color:rgb(20 83 45 / var(--tw-text-opacity, 1))}.text-input{color:hsl(var(--input))}.text-muted-foreground{color:hsl(var(--muted-foreground))}.text-orange-600{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity, 1))}.text-orange-700{--tw-text-opacity: 1;color:rgb(194 65 12 / var(--tw-text-opacity, 1))}.text-orange-800{--tw-text-opacity: 1;color:rgb(154 52 18 / var(--tw-text-opacity, 1))}.text-primary{color:hsl(var(--primary))}.text-purple-500{--tw-text-opacity: 1;color:rgb(168 85 247 / var(--tw-text-opacity, 1))}.text-purple-600{--tw-text-opacity: 1;color:rgb(147 51 234 / var(--tw-text-opacity, 1))}.text-purple-700{--tw-text-opacity: 1;color:rgb(126 34 206 / var(--tw-text-opacity, 1))}.text-purple-800{--tw-text-opacity: 1;color:rgb(107 33 168 / var(--tw-text-opacity, 1))}.text-purple-900{--tw-text-opacity: 1;color:rgb(88 28 135 / var(--tw-text-opacity, 1))}.text-red-500{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.text-red-600{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.text-red-700{--tw-text-opacity: 1;color:rgb(185 28 28 / var(--tw-text-opacity, 1))}.text-red-800{--tw-text-opacity: 1;color:rgb(153 27 27 / var(--tw-text-opacity, 1))}.text-secondary{color:hsl(var(--secondary))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-500{--tw-text-opacity: 1;color:rgb(234 179 8 / var(--tw-text-opacity, 1))}.text-yellow-600{--tw-text-opacity: 1;color:rgb(202 138 4 / var(--tw-text-opacity, 1))}.text-yellow-700{--tw-text-opacity: 1;color:rgb(161 98 7 / var(--tw-text-opacity, 1))}.text-yellow-800{--tw-text-opacity: 1;color:rgb(133 77 14 / var(--tw-text-opacity, 1))}.text-yellow-900{--tw-text-opacity: 1;color:rgb(113 63 18 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-100{opacity:1}.opacity-75{opacity:.75}.opacity-90{opacity:.9}.shadow{--tw-shadow: var(--shadow);--tw-shadow-colored: var(--shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow: var(--shadow-2xl);--tw-shadow-colored: var(--shadow-2xl);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-lg{--tw-shadow: var(--shadow-lg);--tw-shadow-colored: var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: var(--shadow-md);--tw-shadow-colored: var(--shadow-md);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: var(--shadow-sm);--tw-shadow-colored: var(--shadow-sm);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: var(--shadow-xl);--tw-shadow-colored: var(--shadow-xl);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-2{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.ring-cs-primary{--tw-ring-color: var(--primary)}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale: grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-1000{transition-duration:1s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@keyframes enter{0%{opacity:var(--tw-enter-opacity, 1);transform:translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0) scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity, 1);transform:translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0) scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))}}.fade-in{--tw-enter-opacity: 0}.duration-1000{animation-duration:1s}.duration-200{animation-duration:.2s}.duration-300{animation-duration:.3s}.ease-in{animation-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{animation-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.running{animation-play-state:running}.paused{animation-play-state:paused}:root{--radius: .5rem;--radius-sm: calc(var(--radius) - 4px);--radius-md: calc(var(--radius) - 2px);--radius-lg: var(--radius);--radius-xl: calc(var(--radius) + 2px);--radius-2xl: calc(var(--radius) + 4px)}:root{--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 10px 10px -5px rgb(0 0 0 / .04);--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25)}:root{--primary: #2563eb;--primary-hover: #1d4ed8;--page-bg: #ffffff;--surface-bg: #f3f4f6;--border-color: #e5e7eb;--input-bg: #ffffff;--input-border: #d1d5db;--text-primary: #111827;--text-secondary: #4b5563;--text-on-light: #111827;--text-on-dark: #f8fafc;--text-inverse: #f8fafc;--focus-border: #2563eb;--hover-bg: #f8fafc;--button-hover: #1d4ed8;--active-bg: rgba(37, 99, 235, .1);--active-border: #2563eb;--success: #059669;--warning: #F59E0B;--error: #EF4444;--info: #2563eb;--font-sans: "Clash Display", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;--font-display: "Clash Display", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;--font-body: "Clash Display", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif}.dark{--primary: #3b82f6;--primary-hover: #2563eb;--page-bg: #0f172a;--surface-bg: #1e293b;--border-color: #334155;--input-bg: #334155;--input-border: #475569;--text-primary: #f8fafc;--text-secondary: #cbd5e1;--text-on-light: #111827;--text-on-dark: #f8fafc;--text-inverse: #f8fafc;--focus-border: #3b82f6;--hover-bg: #475569;--button-hover: #2563eb;--active-bg: rgba(59, 130, 246, .1);--active-border: #3b82f6}.coach-stan-bg{background-color:var(--page-bg)}.coach-stan-surface{background-color:var(--surface-bg)}.coach-stan-primary{background-color:var(--primary)}.coach-stan-primary:hover{background-color:var(--primary-hover)}.coach-stan-border{border-color:var(--border-color)}.coach-stan-text-primary{color:var(--text-primary)}.coach-stan-text-secondary{color:var(--text-secondary)}.coach-stan-text-on-light{color:var(--text-on-light)}.coach-stan-text-on-dark{color:var(--text-on-dark)}.coach-stan-text-inverse{color:var(--text-inverse)}.coach-stan-active{background-color:var(--active-bg)!important;color:var(--primary)!important;border-right:2px solid var(--active-border)!important}.coach-stan-input{background-color:var(--input-bg);border-color:var(--input-border);color:var(--text-primary)}.coach-stan-input:focus{border-color:var(--focus-border)}.coach-stan-input::-moz-placeholder{color:var(--text-secondary)}.coach-stan-input::placeholder{color:var(--text-secondary)}.theme-toggle{position:relative;overflow:hidden}.theme-toggle:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,var(--primary),var(--primary-hover));opacity:0;transition:opacity .3s ease}.theme-toggle:hover:before{opacity:.1}.dark .coach-stan-surface{background-color:var(--surface-bg);box-shadow:0 4px 6px -1px #0000004d}.dark .coach-stan-border{border-color:var(--border-color)}.dark .coach-stan-hover-bg{background-color:var(--hover-bg)}.coach-stan-smooth-transition{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;will-change:transform,opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.coach-stan-stagger-item{animation:slideInFromLeft .2s ease-out forwards;opacity:0;transform:translate(-20px)}.coach-stan-stagger-item.coach-stan-active{opacity:1!important;transform:translate(0)!important}@keyframes slideInFromLeft{to{opacity:1;transform:translate(0)}}@media (prefers-reduced-motion: reduce){.coach-stan-stagger-item{animation:none;opacity:1;transform:translate(0)}[data-radix-dialog-content]{animation:none!important;transform:none!important;transition:opacity .1s ease-out!important}}.coach-stan-focus-enhanced:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}.coach-stan-hamburger-transition{transition:transform .2s cubic-bezier(.4,0,.2,1)}.coach-stan-hamburger-transition:hover{transform:scale(1.05)}.coach-stan-form-field{margin-bottom:1.5rem}.coach-stan-form-field:last-child{margin-bottom:0}@media (max-width: 768px){.coach-stan-form-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}.coach-stan-form-row{display:flex;flex-direction:column;gap:1rem}.coach-stan-form-button{min-height:48px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.coach-stan-checkbox-container,.coach-stan-radio-container{min-height:44px;display:flex;align-items:center;padding:.5rem;margin:-.5rem;border-radius:.375rem;cursor:pointer}.coach-stan-checkbox-container:hover,.coach-stan-radio-container:hover{background-color:var(--hover-bg)}}@media (min-width: 768px){.coach-stan-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}.coach-stan-form-row{display:flex;gap:1.5rem}}.coach-stan-touch-target{min-height:44px;min-width:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}@media (max-width: 768px){input:focus,textarea:focus,select:focus{transform:scale(1.02);transition:transform .15s ease-out}}.coach-stan-form-message{border-radius:.5rem;margin-top:.5rem}.coach-stan-mobile-form-item{position:relative;margin-bottom:2rem}@media (max-width: 768px){.coach-stan-mobile-validation{position:sticky;top:10px;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background-color:#ffffffe6;border:1px solid var(--border-color);box-shadow:0 4px 12px #0000001a;animation:slideInFromTop .2s ease-out}.coach-stan-mobile-form-item[data-error=true]{scroll-margin-top:80px;scroll-margin-bottom:40px}.dark .coach-stan-mobile-validation{background-color:#1e293be6;border-color:var(--border-color)}.coach-stan-mobile-validation[role=alert]{margin-bottom:.75rem}.coach-stan-mobile-form-item{margin-bottom:2.5rem;padding:.5rem;border-radius:.75rem;transition:background-color .15s ease-out}.coach-stan-mobile-form-item:focus-within{background-color:var(--hover-bg)}.coach-stan-form-success{animation:successPulse .6s ease-out}.coach-stan-form-error{animation:errorShake .5s ease-out}}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes successPulse{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}@keyframes errorShake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.coach-stan-keyboard-visible{position:fixed;width:100%}.coach-stan-mobile-input{font-size:16px;min-height:44px;padding:12px 16px;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;transition:border-color .15s ease-out,box-shadow .15s ease-out}.coach-stan-mobile-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px #3b82f61a}.coach-stan-gesture-feedback{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#000c;color:#fff;padding:8px 16px;border-radius:8px;font-size:14px;z-index:1000;pointer-events:none;opacity:0;animation:gestureFlash .6s ease-out}@keyframes gestureFlash{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}50%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.8)}}.coach-stan-mobile-form-field{position:relative;margin-bottom:24px;padding:8px;border-radius:8px;transition:background-color .15s ease-out}.coach-stan-mobile-form-field:focus-within{background-color:var(--hover-bg)}.coach-stan-mobile-form-field[data-gesture-target=true]{cursor:pointer;touch-action:pan-y}.coach-stan-gesture-hint{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);font-size:12px;color:var(--text-secondary);opacity:0;transition:opacity .2s ease-out}.coach-stan-mobile-form:focus-within .coach-stan-gesture-hint{opacity:1}.coach-stan-auto-focus-container{scroll-margin-top:100px;scroll-margin-bottom:100px}@media (min-width: 768px) and (max-width: 1024px){.coach-stan-tablet-layout{padding:16px;max-width:100%}.coach-stan-tablet-layout.orientation-portrait{padding:20px 16px}.coach-stan-tablet-layout.orientation-landscape{padding:12px 24px}.coach-stan-tablet-grid{width:100%;transition:grid-template-columns .3s ease}.coach-stan-tablet-sidebar{background:var(--card);border-right:1px solid var(--border);transition:width .3s ease,transform .3s ease;position:relative}.coach-stan-tablet-sidebar.collapsed{width:60px!important;overflow:hidden}.coach-stan-tablet-sidebar .sidebar-toggle{position:absolute;top:12px;right:12px;background:var(--primary);color:var(--primary-foreground);border:none;border-radius:4px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:all .2s ease}.coach-stan-tablet-sidebar .sidebar-toggle:hover{background:var(--primary-hover);transform:scale(1.05)}.coach-stan-tablet-sidebar .sidebar-content.collapsed{opacity:0;pointer-events:none}.coach-stan-tablet-stack{width:100%;transition:flex-direction .3s ease}.coach-stan-tablet-stack.stack-vertical{align-items:stretch}.coach-stan-tablet-stack.stack-horizontal{align-items:flex-start}}@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait){.coach-stan-tablet-layout{padding:24px 16px}.tablet-optimized .tablet-auto-stack{flex-direction:column}.tablet-optimized button,.tablet-optimized .touch-target{min-height:48px;min-width:48px}.tablet-optimized .form-grid{grid-template-columns:1fr;gap:20px}}@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){.coach-stan-tablet-layout{padding:16px 32px}.tablet-optimized .tablet-auto-stack{flex-direction:row;gap:24px}.tablet-optimized .form-grid{grid-template-columns:1fr 1fr;gap:24px}.coach-stan-tablet-sidebar{position:static;width:280px!important}.coach-stan-tablet-sidebar.collapsed{width:80px!important}}.tablet-device{--touch-target-size: 44px}.tablet-device button,.tablet-device .clickable,.tablet-device .touch-target{min-height:var(--touch-target-size);min-width:var(--touch-target-size);touch-action:manipulation}.tablet-device input,.tablet-device textarea,.tablet-device select{min-height:44px;font-size:16px}@media (hover: hover) and (pointer: fine){.tablet-device .hover-enabled:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000026}}.tablet-device *:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}.tablet-device .scroll-container{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}@keyframes wave{0%{transform:translate(-100%)}50%{transform:translate(100%)}to{transform:translate(100%)}}.animate-wave{position:relative;overflow:hidden}.animate-wave:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:wave 1.6s linear infinite}.dark .animate-wave:before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}.mobile-lazy-loading{will-change:transform,opacity;transform:translateZ(0)}.mobile-lazy-loaded{animation:fadeInUp .3s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.coach-stan-animation-base{will-change:transform,opacity;backface-visibility:hidden;transform-style:preserve-3d;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (max-width: 768px){.coach-stan-mobile-animation{animation-duration:.25s!important;animation-timing-function:ease-out!important;transform:translateZ(0)}.coach-stan-mobile-animation.reduced-motion{animation:none!important;transition:opacity .1s ease!important}.coach-stan-mobile-transition{transition-duration:.2s!important;transition-timing-function:ease-out!important;transition-property:transform,opacity!important}.coach-stan-mobile-fade-in{animation:mobileFadeIn .2s ease-out forwards}.coach-stan-mobile-slide-in{animation:mobileSlideIn .25s ease-out forwards}.coach-stan-battery-save{animation-duration:.15s!important;animation-iteration-count:1!important;animation-fill-mode:forwards!important}}@media (min-width: 768px) and (max-width: 1024px){.coach-stan-tablet-animation{animation-duration:.35s!important;animation-timing-function:cubic-bezier(.4,0,.2,1)!important;transform:translateZ(0)}.coach-stan-tablet-transition{transition-duration:.3s!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}.coach-stan-tablet-bounce{animation:tabletBounce .5s ease-out forwards}}@media (min-width: 1024px){.coach-stan-desktop-animation{animation-duration:.4s!important;animation-timing-function:cubic-bezier(.25,.46,.45,.94)!important}.coach-stan-desktop-transition{transition-duration:.35s!important;transition-timing-function:cubic-bezier(.25,.46,.45,.94)!important}.coach-stan-desktop-complex{animation-timing-function:cubic-bezier(.68,-.55,.265,1.55)!important}}.coach-stan-performance-throttle{animation-duration:.15s!important;transition-duration:.15s!important}.coach-stan-low-performance{animation:none!important;transition:opacity .1s linear!important;will-change:auto!important}@keyframes mobileFadeIn{0%{opacity:0;transform:translateY(8px) translateZ(0)}to{opacity:1;transform:translateY(0) translateZ(0)}}@keyframes mobileSlideIn{0%{opacity:0;transform:translate(-15px) translateZ(0)}to{opacity:1;transform:translate(0) translateZ(0)}}@keyframes tabletBounce{0%{transform:scale(1) translateZ(0)}30%{transform:scale(1.05) translateZ(0)}60%{transform:scale(.98) translateZ(0)}to{transform:scale(1) translateZ(0)}}.coach-stan-animate-on-scroll{opacity:0;transform:translateY(20px) translateZ(0);transition:opacity .4s ease-out,transform .4s ease-out}.coach-stan-animate-on-scroll.visible{opacity:1;transform:translateY(0) translateZ(0)}.coach-stan-stagger-delay-1{animation-delay:.1s!important}.coach-stan-stagger-delay-2{animation-delay:.2s!important}.coach-stan-stagger-delay-3{animation-delay:.3s!important}.coach-stan-stagger-delay-4{animation-delay:.4s!important}.coach-stan-stagger-delay-5{animation-delay:.5s!important}@media (prefers-reduced-motion: reduce){.coach-stan-reduced-motion,.coach-stan-mobile-animation,.coach-stan-tablet-animation,.coach-stan-desktop-animation,.animate-pulse,.animate-wave,.mobile-lazy-loaded{animation:none!important;transition:opacity .1s ease!important;transform:none!important}.coach-stan-animation-base{will-change:auto!important}}@media (prefers-contrast: high){.coach-stan-animation-base{animation-timing-function:linear!important;transition-timing-function:linear!important}}@media print{.coach-stan-mobile-animation,.coach-stan-tablet-animation,.coach-stan-desktop-animation,.coach-stan-animation-base{animation:none!important;transition:none!important;transform:none!important;opacity:1!important}}.mobile-image-container{position:relative;overflow:hidden;background:var(--muted)}.mobile-image-loading{background:linear-gradient(90deg,var(--muted) 25%,var(--muted-foreground/10) 50%,var(--muted) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.mobile-optimized{transform:translateZ(0);backface-visibility:hidden;perspective:1000px}.mobile-optimized *{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mobile-scroll-container{-webkit-overflow-scrolling:touch;scroll-behavior:smooth;will-change:scroll-position}.mobile-touch-optimized{touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}:root{--cs-success: #059669;--cs-warning: #F59E0B;--cs-error: #EF4444;--cs-primary: #3B82F6;--cs-info: #2563eb}.dark{--cs-success: #10b981;--cs-warning: #fbbf24;--cs-error: #f87171;--cs-info: #60a5fa}.text-cs-success{color:var(--cs-success)}.text-cs-warning{color:var(--cs-warning)}.text-cs-error{color:var(--cs-error)}.text-cs-info{color:var(--cs-info)}@font-face{font-family:Clash Display;src:url(/fonts/clash-display/ClashDisplay-Variable.woff2) format("woff2-variations");font-weight:200 700;font-style:normal;font-display:swap}@supports not (font-variation-settings: normal){@font-face{font-family:Clash Display;src:url(/fonts/clash-display/ClashDisplay-Variable.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}}@supports not (font-display: swap){@font-face{font-family:Clash Display;src:url(/fonts/clash-display/ClashDisplay-Variable.woff) format("woff");font-weight:200 700;font-style:normal}}.placeholder\:text-cs-text-secondary::-moz-placeholder{color:var(--text-secondary)}.placeholder\:text-cs-text-secondary::placeholder{color:var(--text-secondary)}.hover\:border-gray-300:hover{--tw-border-opacity: 1;border-color:rgb(209 213 219 / var(--tw-border-opacity, 1))}.hover\:bg-blue-700:hover{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))}.hover\:bg-cs-hover-bg:hover{background-color:var(--hover-bg)}.hover\:bg-cs-primary:hover{background-color:var(--primary)}.hover\:bg-cs-primary-hover:hover{background-color:var(--primary-hover)}.hover\:bg-gray-300:hover{--tw-bg-opacity: 1;background-color:rgb(209 213 219 / var(--tw-bg-opacity, 1))}.hover\:text-cs-text-primary:hover{color:var(--text-primary)}.hover\:text-gray-700:hover{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.hover\:shadow-lg:hover{--tw-shadow: var(--shadow-lg);--tw-shadow-colored: var(--shadow-lg);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.focus\:border-blue-500:focus{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.focus\:border-cs-primary:focus{border-color:var(--primary)}.focus\:border-green-500:focus{--tw-border-opacity: 1;border-color:rgb(34 197 94 / var(--tw-border-opacity, 1))}.focus\:border-red-500:focus{--tw-border-opacity: 1;border-color:rgb(239 68 68 / var(--tw-border-opacity, 1))}.focus\:border-transparent:focus{border-color:transparent}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-blue-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1))}.focus\:ring-cs-primary:focus{--tw-ring-color: var(--primary)}.focus\:ring-green-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity, 1))}.focus\:ring-red-500:focus{--tw-ring-opacity: 1;--tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1))}.focus\:ring-offset-2:focus{--tw-ring-offset-width: 2px}.active\:shadow-xl:active{--tw-shadow: var(--shadow-xl);--tw-shadow-colored: var(--shadow-xl);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.dark\:inline:is(.dark *){display:inline}.dark\:hidden:is(.dark *){display:none}.dark\:border-blue-800:is(.dark *){--tw-border-opacity: 1;border-color:rgb(30 64 175 / var(--tw-border-opacity, 1))}.dark\:border-gray-600:is(.dark *){--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.dark\:border-gray-700:is(.dark *){--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.dark\:border-green-800:is(.dark *){--tw-border-opacity: 1;border-color:rgb(22 101 52 / var(--tw-border-opacity, 1))}.dark\:border-orange-800:is(.dark *){--tw-border-opacity: 1;border-color:rgb(154 52 18 / var(--tw-border-opacity, 1))}.dark\:border-red-800:is(.dark *){--tw-border-opacity: 1;border-color:rgb(153 27 27 / var(--tw-border-opacity, 1))}.dark\:bg-blue-400:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(96 165 250 / var(--tw-bg-opacity, 1))}.dark\:bg-blue-900\/20:is(.dark *){background-color:#1e3a8a33}.dark\:bg-gray-700:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(55 65 81 / var(--tw-bg-opacity, 1))}.dark\:bg-gray-800:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.dark\:bg-gray-900:is(.dark *){--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.dark\:bg-green-900\/20:is(.dark *){background-color:#14532d33}.dark\:bg-orange-900\/20:is(.dark *){background-color:#7c2d1233}.dark\:bg-red-900\/20:is(.dark *){background-color:#7f1d1d33}.dark\:from-blue-900\/20:is(.dark *){--tw-gradient-from: rgb(30 58 138 / .2) var(--tw-gradient-from-position);--tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.dark\:from-gray-900:is(.dark *){--tw-gradient-from: #111827 var(--tw-gradient-from-position);--tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.dark\:to-gray-800:is(.dark *){--tw-gradient-to: #1f2937 var(--tw-gradient-to-position)}.dark\:to-purple-900\/20:is(.dark *){--tw-gradient-to: rgb(88 28 135 / .2) var(--tw-gradient-to-position)}.dark\:text-blue-200:is(.dark *){--tw-text-opacity: 1;color:rgb(191 219 254 / var(--tw-text-opacity, 1))}.dark\:text-blue-300:is(.dark *){--tw-text-opacity: 1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.dark\:text-blue-400:is(.dark *){--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.dark\:text-gray-100:is(.dark *){--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}.dark\:text-gray-300:is(.dark *){--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.dark\:text-green-200:is(.dark *){--tw-text-opacity: 1;color:rgb(187 247 208 / var(--tw-text-opacity, 1))}.dark\:text-green-300:is(.dark *){--tw-text-opacity: 1;color:rgb(134 239 172 / var(--tw-text-opacity, 1))}.dark\:text-green-400:is(.dark *){--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.dark\:text-orange-200:is(.dark *){--tw-text-opacity: 1;color:rgb(254 215 170 / var(--tw-text-opacity, 1))}.dark\:text-orange-300:is(.dark *){--tw-text-opacity: 1;color:rgb(253 186 116 / var(--tw-text-opacity, 1))}.dark\:text-red-200:is(.dark *){--tw-text-opacity: 1;color:rgb(254 202 202 / var(--tw-text-opacity, 1))}.dark\:text-red-300:is(.dark *){--tw-text-opacity: 1;color:rgb(252 165 165 / var(--tw-text-opacity, 1))}.dark\:text-white:is(.dark *){--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.dark\:hover\:border-gray-600:hover:is(.dark *){--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.dark\:hover\:text-gray-200:hover:is(.dark *){--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}@media (min-width: 640px){.sm\:inline{display:inline}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}}@media (min-width: 1024px){.lg\:block{display:block}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width: 1280px){.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rakeyshgidwani/roger-ui-bank-theme-stan-design",
3
- "version": "0.2.33",
3
+ "version": "0.2.35",
4
4
  "description": "Roger UI stan-design theme - Complete design system with components, styles, and utilities",
5
5
  "keywords": [
6
6
  "design-system",
package/src/components/ui/navigation/user-menu.tsx CHANGED
@@ -36,19 +36,21 @@ const UserMenuHeader: React.FC<{
36
36
  <UserAvatar user={user} size="lg" />
37
37
  </div>
38
38
  <div className="user-menu__header-info">
39
- <div className="user-menu__header-name">
40
- {user.fullName || user.firstName || 'User'}
39
+ <div className="user-menu__header-name-row">
40
+ <div className="user-menu__header-name">
41
+ {user.fullName || user.firstName || 'User'}
42
+ </div>
43
+ {subscription && (
44
+ <div className="user-menu__header-subscription">
45
+ <SubscriptionBadge subscription={subscription} size="sm" />
46
+ </div>
47
+ )}
41
48
  </div>
42
49
  {user.email && (
43
50
  <div className="user-menu__header-email">
44
51
  {user.email}
45
52
  </div>
46
53
  )}
47
- {subscription && (
48
- <div className="user-menu__header-subscription">
49
- <SubscriptionBadge subscription={subscription} size="sm" />
50
- </div>
51
- )}
52
54
  </div>
53
55
  </div>
54
56
  );
@@ -152,6 +154,7 @@ export const UserMenu: React.FC<UserMenuProps> = ({
152
154
  'data-testid': testId = 'user-menu'
153
155
  }) => {
154
156
  const [internalOpen, setInternalOpen] = useState(defaultOpen);
157
+ const [smartPlacement, setSmartPlacement] = useState(placement);
155
158
  // const [focusedIndex, setFocusedIndex] = useState(-1);
156
159
 
157
160
  const triggerRef = useRef<HTMLButtonElement>(null);
@@ -247,9 +250,64 @@ export const UserMenu: React.FC<UserMenuProps> = ({
247
250
  };
248
251
  }, [isOpen, handleClose]);
249
252
 
250
- // Get placement classes
253
+ // Smart positioning to prevent viewport overflow
254
+ useEffect(() => {
255
+ if (!isOpen || !triggerRef.current) return;
256
+
257
+ const updatePlacement = () => {
258
+ const trigger = triggerRef.current;
259
+ if (!trigger) return;
260
+
261
+ const triggerRect = trigger.getBoundingClientRect();
262
+ const viewportHeight = window.innerHeight;
263
+ const viewportWidth = window.innerWidth;
264
+
265
+ // Calculate space available below and above
266
+ const spaceBelow = viewportHeight - triggerRect.bottom;
267
+ const spaceAbove = triggerRect.top;
268
+ const spaceRight = viewportWidth - triggerRect.left;
269
+ const spaceLeft = triggerRect.right;
270
+
271
+ // Estimate dropdown height (use max-height or approximate)
272
+ const estimatedDropdownHeight = Math.min(400, viewportHeight * 0.6);
273
+
274
+ let newPlacement = placement;
275
+
276
+ // Vertical positioning logic
277
+ if (placement.includes('bottom') && spaceBelow < estimatedDropdownHeight && spaceAbove > spaceBelow) {
278
+ // Flip to top if more space above
279
+ newPlacement = placement.replace('bottom', 'top') as typeof placement;
280
+ } else if (placement.includes('top') && spaceAbove < estimatedDropdownHeight && spaceBelow > spaceAbove) {
281
+ // Flip to bottom if more space below
282
+ newPlacement = placement.replace('top', 'bottom') as typeof placement;
283
+ }
284
+
285
+ // Horizontal positioning logic
286
+ if (placement.includes('right') && spaceRight < 300 && spaceLeft > spaceRight) {
287
+ // Flip to left if more space on left
288
+ newPlacement = newPlacement.replace('right', 'left') as typeof placement;
289
+ } else if (placement.includes('left') && spaceLeft < 300 && spaceRight > spaceLeft) {
290
+ // Flip to right if more space on right
291
+ newPlacement = newPlacement.replace('left', 'right') as typeof placement;
292
+ }
293
+
294
+ setSmartPlacement(newPlacement);
295
+ };
296
+
297
+ // Update on open and on scroll/resize
298
+ updatePlacement();
299
+ window.addEventListener('scroll', updatePlacement, { passive: true });
300
+ window.addEventListener('resize', updatePlacement, { passive: true });
301
+
302
+ return () => {
303
+ window.removeEventListener('scroll', updatePlacement);
304
+ window.removeEventListener('resize', updatePlacement);
305
+ };
306
+ }, [isOpen, placement]);
307
+
308
+ // Get placement classes using smart placement
251
309
  const getPlacementClasses = () => {
252
- switch (placement) {
310
+ switch (smartPlacement) {
253
311
  case 'bottom-left':
254
312
  return 'user-menu__dropdown--bottom-left';
255
313
  case 'bottom-right':
@@ -319,9 +377,11 @@ export const UserMenu: React.FC<UserMenuProps> = ({
319
377
  aria-label={ariaLabel}
320
378
  style={{
321
379
  width: typeof width === 'number' ? `${width}px` : width,
322
- maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
323
- marginTop: placement.includes('bottom') ? `${offset}px` : undefined,
324
- marginBottom: placement.includes('top') ? `${offset}px` : undefined
380
+ maxHeight: typeof maxHeight === 'number'
381
+ ? `min(${maxHeight}px, calc(100vh - 120px))`
382
+ : `min(${maxHeight}, calc(100vh - 120px))`,
383
+ marginTop: smartPlacement.includes('bottom') ? `${offset}px` : undefined,
384
+ marginBottom: smartPlacement.includes('top') ? `${offset}px` : undefined
325
385
  }}
326
386
  >
327
387
  {/* User Header */}
package/src/styles/components/navigation/index.css CHANGED
@@ -6,4 +6,5 @@
6
6
  @import './pagination.css';
7
7
  @import './sidebar.css';
8
8
  @import './stepper.css';
9
- @import './tabs.css';
9
+ @import './tabs.css';
10
+ @import './user-menu.css';
package/src/styles/components/navigation/user-menu.css CHANGED
@@ -115,6 +115,32 @@
115
115
  box-shadow: var(--user-menu-shadow);
116
116
  overflow: hidden;
117
117
  animation: userMenuSlideIn 0.2s ease-out;
118
+
119
+ /* Smart viewport-aware height with scrolling */
120
+ max-height: min(var(--user-menu-max-height), calc(100vh - 120px));
121
+ overflow-y: auto;
122
+
123
+ /* Scroll styling for better UX */
124
+ scrollbar-width: thin;
125
+ scrollbar-color: var(--cs-colors-border) transparent;
126
+ }
127
+
128
+ /* Webkit scrollbar styling */
129
+ .user-menu__dropdown::-webkit-scrollbar {
130
+ width: 6px;
131
+ }
132
+
133
+ .user-menu__dropdown::-webkit-scrollbar-track {
134
+ background: transparent;
135
+ }
136
+
137
+ .user-menu__dropdown::-webkit-scrollbar-thumb {
138
+ background-color: var(--cs-colors-border);
139
+ border-radius: 3px;
140
+ }
141
+
142
+ .user-menu__dropdown::-webkit-scrollbar-thumb:hover {
143
+ background-color: var(--cs-colors-border-strong);
118
144
  }
119
145
 
120
146
  /* Placement variants */
@@ -163,28 +189,36 @@
163
189
  min-width: 0;
164
190
  }
165
191
 
192
+ .user-menu__header-name-row {
193
+ display: flex;
194
+ align-items: center;
195
+ gap: var(--cs-spacing-scale-sm);
196
+ margin-bottom: var(--cs-spacing-scale-xs);
197
+ }
198
+
166
199
  .user-menu__header-name {
167
200
  font-size: var(--cs-fonts-primary-sizes-md);
168
201
  font-weight: var(--cs-fonts-primary-weights-semibold);
169
202
  color: var(--user-menu-text-primary);
170
- margin-bottom: var(--cs-spacing-scale-xs);
171
203
  white-space: nowrap;
172
204
  overflow: hidden;
173
205
  text-overflow: ellipsis;
206
+ flex: 1;
207
+ min-width: 0;
174
208
  }
175
209
 
176
210
  .user-menu__header-email {
177
211
  font-size: var(--cs-fonts-primary-sizes-sm);
178
212
  color: var(--user-menu-text-muted);
179
- margin-bottom: var(--cs-spacing-scale-sm);
180
213
  white-space: nowrap;
181
214
  overflow: hidden;
182
215
  text-overflow: ellipsis;
183
216
  }
184
217
 
185
218
  .user-menu__header-subscription {
219
+ flex-shrink: 0;
186
220
  display: flex;
187
- justify-content: flex-start;
221
+ align-items: center;
188
222
  }
189
223
 
190
224
  /* ============================================================================