@mostrom/app-shell 0.1.1 → 0.1.3

package/src/styles.css

@@ -1,7 +1,7 @@
 /* =============================================================================
  * Global Design System Styles
  * =============================================================================
- * Core styles previously in @platform/design-system, now merged into app-shell
+ * Core styles for @platform/app-shell
  *
  * NOTE: Font is loaded via <link> tag in AppShell component, not @import
  * NOTE: tw-animate-css is imported in the app's tailwind.css, not here
@@ -18,10 +18,6 @@
   --font-family-base: "Hanken Grotesk", -apple-system, BlinkMacSystemFont,
     "Segoe UI", sans-serif;
 
-  /* Override Cloudscape font variables */
-  --awsui-font-family-base: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --awsui-font-family-monospace: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", monospace;
-
   /* Dropdown styling */
   --dropdown-border-radius: 8px;
 
@@ -78,68 +74,11 @@ body,
   font-family: var(--font-family-base);
 }
 
-/* Force Hanken Grotesk on all Cloudscape components */
-[class*="awsui"] {
-  font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
-}
-
 /* =============================================================================
  * App Shell Styles
  * =============================================================================
  */
 
-/*
- * Force dark background on Cloudscape dropdown PORTALS only
- * CRITICAL: Use body > div[class*="awsui_dropdown"] to ONLY target dropdown portals
- * NOT body > div[class*="awsui"] which would match other portals and is too broad
- * This prevents styling table cells which also use "interior" class patterns
- */
-body > div[class*="awsui_dropdown"] [class*="awsui_dropdown-content-wrapper"],
-body > div[class*="awsui_dropdown"] [class*="awsui_interior"],
-body > div[class*="awsui_dropdown"] [class*="awsui_options-list"],
-body > div[class*="awsui_dropdown"] [class*="awsui_items-list"],
-body > div[class*="awsui_dropdown"] ul[class*="awsui"],
-body > div[class*="awsui_dropdown"] ul {
-  background-color: #171717 !important;
-  color: #f5f5f5 !important;
-}
-
-body > div[class*="awsui_dropdown"] li[class*="awsui"],
-body > div[class*="awsui_dropdown"] li,
-body > div[class*="awsui_dropdown"] [class*="awsui_option"],
-body > div[class*="awsui_dropdown"] [class*="awsui_item-element"] {
-  background-color: transparent !important;
-  color: #f5f5f5 !important;
-}
-
-body > div[class*="awsui_dropdown"] [class*="awsui_highlighted"],
-body > div[class*="awsui_dropdown"] li:hover,
-body > div[class*="awsui_dropdown"] li:focus,
-body > div[class*="awsui_dropdown"] [class*="awsui_option"]:hover,
-body > div[class*="awsui_dropdown"] [class*="awsui_item-element"]:hover {
-  background-color: transparent !important;
-  color: #26c6ff !important;
-}
-
-/* Ensure hover color applies to the text content inside dropdown items */
-body > div[class*="awsui_dropdown"] [class*="awsui_item-element"]:hover [class*="awsui_option-content"],
-body > div[class*="awsui_dropdown"] [class*="awsui_item-element"]:hover [class*="awsui_link"],
-body > div[class*="awsui_dropdown"] [class*="awsui_option"]:hover [class*="awsui_option-content"],
-body > div[class*="awsui_dropdown"] [class*="awsui_highlighted"] [class*="awsui_option-content"],
-body > div[class*="awsui_dropdown"] [class*="awsui_highlighted"] [class*="awsui_link"],
-body > div[class*="awsui_dropdown"] [aria-selected="true"] [class*="awsui_option-content"] {
-  color: #26c6ff !important;
-  background-color: transparent !important;
-}
-
-/* Override Cloudscape light mode dropdown backgrounds - scoped to dropdown portals */
-body > div[class*="awsui_dropdown"][class*="awsui_open"] [class*="awsui_interior"],
-body > div[class*="awsui_dropdown"] [class*="awsui_dropdown-content"],
-body > div[class*="awsui_dropdown"] > div,
-body > div[class*="awsui_dropdown"] ul {
-  background-color: #171717 !important;
-}
-
 /* Global header - high z-index to ensure dropdowns appear above everything */
 #global-header {
   background-color: #171717;
@@ -149,19 +88,8 @@ body > div[class*="awsui_dropdown"] ul {
   overflow: visible !important;
 }
 
-#global-header [class*="awsui_top-navigation"],
-#global-header header {
-  background-color: #171717 !important;
-  overflow: visible !important;
-}
-
-#global-header [class*="awsui_utility"],
-#global-header [class*="awsui_utilities"] {
-  overflow: visible !important;
-}
-
 /* =============================================================================
- * Custom Global Header Styles (non-Cloudscape)
+ * Custom Global Header Styles
  * =============================================================================
  */
 
@@ -412,65 +340,6 @@ body > div[class*="awsui_dropdown"] ul {
   background-color: #263445;
 }
 
-/* Force light mode background for app content area */
-body,
-#root,
-[class*="awsui_app-layout"],
-[class*="awsui_app-layout"] [class*="awsui_content"],
-[class*="awsui_app-layout"] [class*="awsui_content"] > * {
-  background-color: #ffffff !important;
-  color: #0f172a !important;
-}
-
-/* Panel trigger buttons in app layout (not global header) - circle shape */
-[class*="awsui_app-layout"] button[class*="awsui_trigger"],
-[class*="awsui_app-layout"] button[class*="awsui_circle"] {
-  border-radius: 50% !important;
-}
-
-/* When panel is closed (no .selected class) - white background, dark icon */
-[class*="awsui_app-layout"] button[class*="awsui_trigger"]:not([class*="selected"]),
-[class*="awsui_app-layout"] button[class*="awsui_circle"]:not([class*="selected"]) {
-  background-color: #ffffff !important;
-  border: 1px solid #d5dbdb !important;
-  color: #171717 !important;
-}
-
-/* Remove hover effects from trigger buttons */
-[class*="awsui_app-layout"] button[class*="awsui_trigger"]:hover:not([class*="selected"]),
-[class*="awsui_app-layout"] button[class*="awsui_circle"]:hover:not([class*="selected"]) {
-  background-color: #ffffff !important;
-  border: 1px solid #d5dbdb !important;
-  color: #171717 !important;
-}
-
-[class*="awsui_app-layout"] button[class*="awsui_trigger"]:not([class*="selected"]) svg,
-[class*="awsui_app-layout"] button[class*="awsui_circle"]:not([class*="selected"]) svg {
-  color: #171717 !important;
-}
-
-/* When panel is open (.selected class) - dark background, white icon */
-[class*="awsui_app-layout"] button[class*="awsui_trigger"][class*="selected"],
-[class*="awsui_app-layout"] button[class*="awsui_circle"][class*="selected"] {
-  background-color: #171717 !important;
-  border: 1px solid #171717 !important;
-  color: #ffffff !important;
-}
-
-/* Remove hover effects from selected trigger buttons */
-[class*="awsui_app-layout"] button[class*="awsui_trigger"][class*="selected"]:hover,
-[class*="awsui_app-layout"] button[class*="awsui_circle"][class*="selected"]:hover {
-  background-color: #171717 !important;
-  border: 1px solid #171717 !important;
-  color: #ffffff !important;
-}
-
-[class*="awsui_app-layout"] button[class*="awsui_trigger"][class*="selected"] svg,
-[class*="awsui_app-layout"] button[class*="awsui_circle"][class*="selected"] svg {
-  color: #ffffff !important;
-  fill: #ffffff !important;
-}
-
 /* Custom navigation trigger button with Menu icon */
 .app-shell-nav-trigger {
   display: flex;
@@ -504,54 +373,17 @@ body,
   font-weight: 400 !important;
 }
 
-/* Dark mode: ensure side navigation links are visible on dark background */
-body.awsui-dark-mode .app-shell-side-navigation a,
-body.awsui-dark-mode .app-shell-side-navigation button,
-body.awsui-dark-mode .app-shell-side-navigation [role="link"] {
-  color: #f5f5f5 !important;
-}
-
-/* Keep the side navigation header/title bold */
-.app-shell-side-navigation [class*="awsui_header"],
-.app-shell-side-navigation [class*="awsui_header"] a,
-.app-shell-side-navigation [class*="awsui_header"] [class*="awsui_header-link"],
-.app-shell-side-navigation [class*="awsui_header"] [class*="awsui_header-text"] {
-  font-weight: 600 !important;
-  color: #171717 !important;
-}
-
-body.awsui-dark-mode .app-shell-side-navigation [class*="awsui_header"],
-body.awsui-dark-mode .app-shell-side-navigation [class*="awsui_header"] a,
-body.awsui-dark-mode .app-shell-side-navigation [class*="awsui_header"] [class*="awsui_header-link"],
-body.awsui-dark-mode .app-shell-side-navigation [class*="awsui_header"] [class*="awsui_header-text"] {
-  color: #ffffff !important;
-}
-
 .app-shell-side-navigation a:hover,
 .app-shell-side-navigation button:hover,
 .app-shell-side-navigation [role="link"]:hover {
   color: #0972d3 !important;
 }
 
-.app-shell-side-navigation [aria-current="page"],
-.app-shell-side-navigation [class*="awsui_active"] {
+.app-shell-side-navigation [aria-current="page"] {
   color: #0972d3 !important;
   font-weight: 600 !important;
 }
 
-body.awsui-dark-mode .app-shell-side-navigation [aria-current="page"],
-body.awsui-dark-mode .app-shell-side-navigation [class*="awsui_active"] {
-  color: #26c6ff !important;
-  font-weight: 600 !important;
-}
-
-.app-shell-side-navigation [class*="awsui_link-text"],
-.app-shell-side-navigation [class*="awsui_item-text"],
-.app-shell-side-navigation [class*="awsui_item"] {
-  color: inherit !important;
-  font-weight: inherit !important;
-}
-
 /* Search container with even spacing */
 .app-shell-search {
   display: flex;
@@ -808,7 +640,7 @@ button.app-shell-apps-button:hover .app-shell-apps-icon,
 }
 
 /* =============================================================================
- * Custom Global Search Styles (non-Cloudscape)
+ * Custom Global Search Styles
  * =============================================================================
  */
 
@@ -1072,655 +904,6 @@ button.app-shell-apps-button:hover .app-shell-apps-icon,
   color: #f5f5f5;
 }
 
-/* Legacy Cloudscape search styles (for backward compatibility) */
-.app-shell-search-input-wrapper [class*="awsui_input"] {
-  background-color: #171717 !important;
-  border-radius: 20px !important;
-}
-
-/* Inner elements of autosuggest dropdown - no radius (wrapper handles clipping) */
-.app-shell-search-input-wrapper [class*="awsui_dropdown"],
-.app-shell-search-input-wrapper [class*="awsui_content"],
-[class*="awsui_autosuggest"] [class*="awsui_dropdown"],
-[class*="awsui_autosuggest"] [class*="awsui_content"] {
-  border-radius: 0 !important;
-}
-
-/*
- * Force left alignment - override CloudScape's centered search layout.
- * Scoped to the global header to avoid impacting AppLayoutToolbar internals.
- */
-#global-header [class*="awsui_header"] {
-  gap: 0 !important;
-}
-
-/* Logo/identity area */
-#global-header [class*="awsui_identity"] {
-  padding-inline-start: 8px !important;
-  padding-inline-end: 8px !important;
-}
-
-#global-header [class*="awsui_search"],
-#global-header [data-utility-special="search"] {
-  flex: 0 1 auto !important;
-  justify-content: flex-start !important;
-  margin-inline-start: 0 !important;
-  padding-inline-start: 0 !important;
-  margin-inline-end: auto !important;
-}
-
-#global-header [class*="awsui_inputs"] {
-  justify-content: flex-start !important;
-  margin-inline-start: 0 !important;
-}
-
-#global-header [class*="awsui_center"] {
-  flex: 0 1 auto !important;
-  justify-content: flex-start !important;
-}
-
-/* Keep logo size stable to avoid layout shifts */
-#global-header [class*="awsui_identity"] img {
-  height: 24px;
-  width: auto;
-  display: block;
-}
-
-/*
- * Remove rounded corners from ALL dropdown menus globally
- * Cloudscape renders dropdowns in portals at document body level.
- * Using very specific dropdown selectors to avoid affecting cards/containers.
- */
-
-/* Dropdown containers - apply rounded corners */
-[class*="awsui_dropdown-content-wrapper"] {
-  border-radius: var(--dropdown-border-radius) !important;
-  overflow: hidden !important;
-}
-/* Interior elements - no rounded corners (container handles it) */
-[class*="awsui_dropdown-content"][class*="awsui_interior"],
-[class*="awsui_list-bottom"],
-[class*="awsui_open-dropdown"] {
-  border-radius: 0 !important;
-}
-
-/* Dropdown list containers */
-[class*="awsui_options-list"],
-[class*="awsui_items-list-container"],
-ul[class*="awsui_options"] {
-  border-radius: 0 !important;
-}
-
-/* Individual dropdown/menu items - remove all rounded corners */
-[class*="awsui_item-element"],
-li[class*="awsui_option"],
-[class*="awsui_highlighted"] {
-  border-radius: 0 !important;
-}
-
-/* First and last items in dropdown lists */
-[class*="awsui_options-list"] li:first-child,
-[class*="awsui_options-list"] li:last-child,
-[class*="awsui_items-list-container"] li:first-child,
-[class*="awsui_items-list-container"] li:last-child {
-  border-radius: 0 !important;
-}
-
-/*
- * DROPDOWN BORDER RADIUS OVERRIDE - Scoped to dropdown portals only
- * CRITICAL: Use body > div[class*="awsui_dropdown"] to avoid affecting tables
- */
-body > div[class*="awsui_dropdown"] [class*="awsui_dropdown-content-wrapper"],
-body > div[class*="awsui_dropdown"] [class*="awsui_interior"],
-body > div[class*="awsui_dropdown"][class*="awsui_open"],
-body > div[class*="awsui_dropdown"] ul[class*="awsui_options-list"],
-body > div[class*="awsui_dropdown"] ul[class*="awsui_items-list"],
-body > div[class*="awsui_dropdown"] [class*="awsui_items-list-container"],
-body > div[class*="awsui_dropdown"] li[class*="awsui_option"],
-body > div[class*="awsui_dropdown"] li[class*="awsui_item-element"],
-body > div[class*="awsui_dropdown"] li[class*="awsui_highlighted"],
-body > div[class*="awsui_dropdown"] li,
-body > div[class*="awsui_dropdown"] li:first-child,
-body > div[class*="awsui_dropdown"] li:last-child {
-  border-radius: 0 !important;
-  border-top-left-radius: 0 !important;
-  border-top-right-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-/* Global header dropdown theme - wrapper containers get rounded corners */
-body .app-shell-apps-dropdown [class*="awsui_dropdown-content-wrapper"],
-body .app-shell-search-autosuggest [class*="awsui_dropdown-content-wrapper"],
-body .app-shell-categories-dropdown [class*="awsui_dropdown-content-wrapper"] {
-  background-color: #171717 !important;
-  color: #f5f5f5 !important;
-  border-radius: var(--dropdown-border-radius) !important;
-  overflow: hidden !important;
-}
-
-/* Global header dropdown theme - interior elements no radius */
-body .app-shell-apps-dropdown [class*="awsui_dropdown"],
-body .app-shell-search-autosuggest [class*="awsui_dropdown"],
-body .app-shell-apps-dropdown [class*="awsui_dropdown-content"],
-body .app-shell-search-autosuggest [class*="awsui_dropdown-content"],
-body .app-shell-apps-dropdown [class*="awsui_items-list-container"],
-body .app-shell-search-autosuggest [class*="awsui_items-list-container"],
-body .app-shell-apps-dropdown [class*="awsui_options-list"],
-body .app-shell-search-autosuggest [class*="awsui_options-list"],
-body .app-shell-apps-dropdown ul[class*="awsui"],
-body .app-shell-search-autosuggest ul[class*="awsui"],
-body .app-shell-categories-dropdown [class*="awsui_dropdown"],
-body .app-shell-categories-dropdown [class*="awsui_dropdown-content"],
-body .app-shell-categories-dropdown [class*="awsui_items-list-container"],
-body .app-shell-categories-dropdown [class*="awsui_options-list"],
-body .app-shell-categories-dropdown ul[class*="awsui"] {
-  background-color: #171717 !important;
-  color: #f5f5f5 !important;
-  border-radius: 0 !important;
-}
-
-/* Force Apps dropdown to be wide enough for 4 columns */
-body .app-shell-apps-dropdown [class*="awsui_dropdown"],
-body .app-shell-apps-dropdown [class*="awsui_dropdown-content-wrapper"],
-body .app-shell-apps-dropdown [class*="awsui_dropdown-content"],
-body .app-shell-apps-dropdown [class*="awsui_items-list-container"],
-body [class*="awsui_dropdown"]:has([aria-label="Apps"]),
-body [class*="awsui_dropdown-content-wrapper"]:has([aria-label="Apps"]),
-body [class*="awsui_dropdown-content"]:has([aria-label="Apps"]),
-body [class*="awsui_items-list-container"]:has([aria-label="Apps"]) {
-  width: 1000px !important;
-  min-width: 1000px !important;
-  max-width: 1180px !important;
-}
-
-/* Search results dropdown: keep dark background, text-only hover */
-body .app-shell-search-autosuggest [class*="awsui_dropdown-content-wrapper"],
-body .app-shell-search-autosuggest [class*="awsui_dropdown-content"],
-body .app-shell-search-autosuggest [class*="awsui_interior"],
-body .app-shell-search-autosuggest [class*="awsui_options-list"],
-body .app-shell-search-autosuggest [class*="awsui_virtual-list"],
-body .app-shell-search-autosuggest ul {
-  background-color: #171717 !important;
-  color: #f5f5f5 !important;
-}
-
-body .app-shell-search-autosuggest li,
-body .app-shell-search-autosuggest [class*="awsui_option"],
-body .app-shell-search-autosuggest [class*="awsui_selectable-item"],
-body .app-shell-search-autosuggest [class*="awsui_item-element"],
-body .app-shell-search-autosuggest [class*="awsui_option-content"] {
-  background-color: transparent !important;
-  box-shadow: none !important;
-  border: none !important;
-  outline: none !important;
-  color: #f5f5f5 !important;
-}
-
-body .app-shell-search-autosuggest li:hover,
-body .app-shell-search-autosuggest [class*="awsui_option"]:hover,
-body .app-shell-search-autosuggest [class*="awsui_selectable-item"]:hover,
-body .app-shell-search-autosuggest [class*="awsui_item-element"]:hover,
-body .app-shell-search-autosuggest [class*="awsui_option-content"]:hover,
-body .app-shell-search-autosuggest [class*="awsui_item-element"]:focus,
-body .app-shell-search-autosuggest [class*="awsui_item-element"]:focus-visible,
-body .app-shell-search-autosuggest [class*="awsui_highlighted"],
-body .app-shell-search-autosuggest [aria-selected="true"] {
-  background-color: transparent !important;
-  box-shadow: none !important;
-  border: none !important;
-  outline: none !important;
-  color: #26c6ff !important;
-}
-
-/* Autosuggest dropdown background - force dark theme */
-[class*="awsui_autosuggest"] [class*="awsui_dropdown-content-wrapper"],
-[class*="awsui_autosuggest"] [class*="awsui_dropdown-content"],
-[class*="awsui_autosuggest"] [class*="awsui_interior"],
-[class*="awsui_autosuggest"] [class*="awsui_options-list"],
-body [class*="awsui_autosuggest"] ul {
-  background-color: #171717 !important;
-  color: #f5f5f5 !important;
-}
-
-[class*="awsui_autosuggest"] li,
-[class*="awsui_autosuggest"] [class*="awsui_option"] {
-  background-color: transparent !important;
-  color: #f5f5f5 !important;
-}
-
-[class*="awsui_autosuggest"] [class*="awsui_highlighted"],
-[class*="awsui_autosuggest"] li:hover {
-  background-color: transparent !important;
-  color: #26c6ff !important;
-}
-
-/* Top navigation dropdowns (apps/search/settings/user) */
-body .awsui-context-top-navigation [class*="awsui_dropdown-content-wrapper"] {
-  background-color: #171717 !important;
-  border: none !important;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
-  border-radius: var(--dropdown-border-radius) !important;
-  overflow: hidden !important;
-  padding-block: 0 !important;
-}
-
-body .awsui-context-top-navigation [class*="awsui_dropdown-content-wrapper"]::after {
-  border: none !important;
-  border-radius: 0 !important;
-}
-
-body .awsui-context-top-navigation [class*="awsui_options-list"],
-body .awsui-context-top-navigation [class*="awsui_items-list-container"] {
-  background-color: #171717 !important;
-  color: #f5f5f5 !important;
-  border: none !important;
-  border-radius: 0 !important;
-}
-
-/* Inner content elements - no radius (container handles clipping) */
-body .awsui-context-top-navigation [class*="awsui_dropdown-content"],
-body .awsui-context-top-navigation [class*="awsui_dropdown"]::after,
-body .awsui-context-top-navigation [class*="awsui_dropdown-content-wrapper"]::after {
-  border-radius: 0 !important;
-  border: none !important;
-  box-shadow: none !important;
-}
-
-body .awsui-context-top-navigation [class*="awsui_dropdown"] [class*="awsui_focus"],
-body .awsui-context-top-navigation [class*="awsui_dropdown"] [class*="awsui_focus-ring"] {
-  box-shadow: none !important;
-  outline: none !important;
-}
-
-body .awsui-context-top-navigation [class*="awsui_item-element"],
-body .awsui-context-top-navigation [class*="awsui_option"] {
-  background-color: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  outline: none !important;
-  color: #f5f5f5 !important;
-}
-
-body .awsui-context-top-navigation [class*="awsui_item-element"]:hover,
-body .awsui-context-top-navigation [class*="awsui_item-element"]:focus,
-body .awsui-context-top-navigation [class*="awsui_item-element"]:focus-visible,
-body .awsui-context-top-navigation [class*="awsui_highlighted"] {
-  background-color: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  outline: none !important;
-  color: #26c6ff !important;
-}
-
-/* List elements inside dropdown - no radius (container handles clipping) */
-body ul[aria-label="Apps"],
-body ul[aria-label="Categories"],
-body ul[aria-label="Search"] {
-  background-color: #171717 !important;
-  color: #f5f5f5 !important;
-  border-radius: 0 !important;
-}
-
-body .app-shell-apps-dropdown li,
-body .app-shell-categories-dropdown li,
-body .app-shell-search-autosuggest li,
-body .app-shell-apps-dropdown [class*="awsui_item-element"],
-body .app-shell-categories-dropdown [class*="awsui_item-element"],
-body .app-shell-search-autosuggest [class*="awsui_item-element"] {
-  background-color: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  outline: none !important;
-  border-radius: 0 !important;
-  color: #f5f5f5 !important;
-}
-
-body ul[aria-label="Apps"] li,
-body ul[aria-label="Categories"] li,
-body ul[aria-label="Search"] li,
-body ul[aria-label="Apps"] [class*="awsui_item-element"],
-body ul[aria-label="Categories"] [class*="awsui_item-element"],
-body ul[aria-label="Search"] [class*="awsui_item-element"] {
-  background-color: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  outline: none !important;
-  border-radius: 0 !important;
-  color: #f5f5f5 !important;
-}
-
-body .app-shell-apps-dropdown [class*="awsui_item-element"]:hover,
-body .app-shell-categories-dropdown [class*="awsui_item-element"]:hover,
-body .app-shell-search-autosuggest [class*="awsui_item-element"]:hover,
-body .app-shell-apps-dropdown [class*="awsui_item-element"]:focus,
-body .app-shell-categories-dropdown [class*="awsui_item-element"]:focus,
-body .app-shell-search-autosuggest [class*="awsui_item-element"]:focus,
-body .app-shell-apps-dropdown [class*="awsui_item-element"]:focus-visible,
-body .app-shell-categories-dropdown [class*="awsui_item-element"]:focus-visible,
-body .app-shell-search-autosuggest [class*="awsui_item-element"]:focus-visible,
-body .app-shell-apps-dropdown [class*="awsui_highlighted"],
-body .app-shell-categories-dropdown [class*="awsui_highlighted"],
-body .app-shell-search-autosuggest [class*="awsui_highlighted"] {
-  background-color: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  outline: none !important;
-  color: #26c6ff !important;
-}
-
-body ul[aria-label="Apps"] [class*="awsui_item-element"]:hover,
-body ul[aria-label="Categories"] [class*="awsui_item-element"]:hover,
-body ul[aria-label="Search"] [class*="awsui_item-element"]:hover,
-body ul[aria-label="Apps"] [class*="awsui_item-element"]:focus,
-body ul[aria-label="Categories"] [class*="awsui_item-element"]:focus,
-body ul[aria-label="Search"] [class*="awsui_item-element"]:focus,
-body ul[aria-label="Apps"] [class*="awsui_item-element"]:focus-visible,
-body ul[aria-label="Categories"] [class*="awsui_item-element"]:focus-visible,
-body ul[aria-label="Search"] [class*="awsui_item-element"]:focus-visible,
-body ul[aria-label="Apps"] [class*="awsui_highlighted"],
-body ul[aria-label="Categories"] [class*="awsui_highlighted"],
-body ul[aria-label="Search"] [class*="awsui_highlighted"] {
-  background-color: transparent !important;
-  border: none !important;
-  box-shadow: none !important;
-  outline: none !important;
-  color: #26c6ff !important;
-}
-
-body ul[aria-label="Apps"] a:focus-visible,
-body ul[aria-label="Categories"] a:focus-visible,
-body ul[aria-label="Search"] a:focus-visible,
-body ul[aria-label="Apps"] button:focus-visible,
-body ul[aria-label="Categories"] button:focus-visible,
-body ul[aria-label="Search"] button:focus-visible {
-  outline: none !important;
-  box-shadow: none !important;
-}
-
-/* Make the "All services" dropdown wider + multi-column */
-body ul[aria-label="Apps"] {
-  display: block !important;
-  column-count: 4 !important;
-  column-width: 220px !important;
-  column-gap: 20px !important;
-  column-fill: balance;
-  min-width: 960px !important;
-  max-width: 1180px !important;
-  padding-block: 16px !important;
-}
-
-body ul[aria-label="Apps"] > li {
-  break-inside: avoid;
-}
-
-body ul[aria-label="Apps"] [class*="awsui_item-element"] {
-  width: 100%;
-}
-
-/* Settings and User dropdown - remove gap from header */
-body ul[aria-label="Settings"],
-body ul[aria-label="User menu"] {
-  padding: 4px 0 !important;
-  min-width: 140px !important;
-}
-
-/* Categories dropdown - match standard dropdown padding */
-body ul[aria-label="Categories"] {
-  padding: 4px 0 !important;
-  min-width: 220px !important;
-}
-
-body ul[aria-label="Categories"] [class*="awsui_item-element"] {
-  padding: 4px 12px !important;
-}
-
-/* Remove the gap between header and Settings/User dropdowns */
-#global-header [class*="awsui_menu-dropdown"] [class*="awsui_dropdown-content-wrapper"],
-body .awsui-context-top-navigation [class*="awsui_menu-dropdown"] [class*="awsui_dropdown-content-wrapper"] {
-  margin-top: -8px !important;
-  top: 100% !important;
-  padding-top: 0 !important;
-}
-
-#global-header [class*="awsui_menu-dropdown"] [class*="awsui_dropdown"],
-body .awsui-context-top-navigation [class*="awsui_menu-dropdown"] [class*="awsui_dropdown"] {
-  margin-top: -8px !important;
-  padding-top: 0 !important;
-}
-
-/* Portal dropdowns for Settings/User - force flush to header with rounded corners */
-body [class*="awsui_dropdown-content-wrapper"]:has(ul[aria-label="Settings"]),
-body [class*="awsui_dropdown-content-wrapper"]:has(ul[aria-label="User menu"]) {
-  margin-top: -8px !important;
-  transform: translateY(-8px) !important;
-  border-radius: var(--dropdown-border-radius) !important;
-  overflow: hidden !important;
-}
-
-/* Target portal-rendered Settings/User dropdowns and remove gap */
-body > div[class*="awsui"] [class*="awsui_dropdown-content-wrapper"] {
-  margin-top: 0 !important;
-}
-
-body > div[class*="awsui"][class*="awsui_dropdown"] {
-  margin-top: 0 !important;
-  padding-top: 0 !important;
-}
-
-body ul[aria-label="Settings"] [class*="awsui_item-element"],
-body ul[aria-label="User menu"] [class*="awsui_item-element"] {
-  padding: 4px 12px !important;
-}
-
-/* General top navigation dropdown list padding */
-body .awsui-context-top-navigation [class*="awsui_items-list-container"] ul {
-  padding: 4px 0 !important;
-}
-
-body .awsui-context-top-navigation [class*="awsui_items-list-container"] [class*="awsui_item-element"] {
-  padding: 4px 12px !important;
-}
-
-/*
- * Comprehensive dropdown border-radius styling
- * Targets: Apps dropdown, Autosuggest, ButtonDropdown, all menu types
- * Uses --dropdown-border-radius variable for consistent rounded corners
- */
-
-/* Autosuggest dropdown containers - apply rounded corners */
-[class*="awsui_autosuggest"] [class*="awsui_dropdown-content-wrapper"] {
-  border-radius: var(--dropdown-border-radius) !important;
-  overflow: hidden !important;
-}
-[class*="awsui_autosuggest"] [class*="awsui_interior"],
-[class*="awsui_autosuggest"] [class*="awsui_dropdown-content"],
-[class*="awsui_autosuggest"] ul,
-[class*="awsui_autosuggest"] li {
-  border-radius: 0 !important;
-}
-
-/* ButtonDropdown containers (Apps button, Settings, Profile) - apply rounded corners */
-[class*="awsui_button-dropdown"] [class*="awsui_dropdown-content-wrapper"] {
-  border-radius: var(--dropdown-border-radius) !important;
-  overflow: hidden !important;
-}
-[class*="awsui_button-dropdown"] [class*="awsui_interior"],
-[class*="awsui_button-dropdown"] [class*="awsui_dropdown-content"],
-[class*="awsui_button-dropdown"] ul,
-[class*="awsui_button-dropdown"] li {
-  border-radius: 0 !important;
-}
-
-/* Top navigation menu containers - apply rounded corners */
-[class*="awsui_menu-dropdown"] [class*="awsui_dropdown-content-wrapper"] {
-  border-radius: var(--dropdown-border-radius) !important;
-  overflow: hidden !important;
-}
-[class*="awsui_menu-dropdown"] [class*="awsui_interior"],
-[class*="awsui_menu-dropdown"] ul,
-[class*="awsui_menu-dropdown"] li {
-  border-radius: 0 !important;
-}
-
-/* Select component dropdown containers - apply rounded corners */
-[class*="awsui_select"] [class*="awsui_dropdown-content-wrapper"],
-[class*="awsui_select-dropdown"] [class*="awsui_dropdown-content-wrapper"] {
-  border-radius: var(--dropdown-border-radius) !important;
-  overflow: hidden !important;
-}
-[class*="awsui_select"] [class*="awsui_interior"],
-[class*="awsui_select"] [class*="awsui_dropdown-content"],
-[class*="awsui_select"] ul,
-[class*="awsui_select"] li,
-[class*="awsui_select-dropdown"] [class*="awsui_interior"],
-[class*="awsui_select-dropdown"] ul,
-[class*="awsui_select-dropdown"] li {
-  border-radius: 0 !important;
-}
-
-/* Multiselect component dropdown containers - apply rounded corners */
-[class*="awsui_multiselect"] [class*="awsui_dropdown-content-wrapper"] {
-  border-radius: var(--dropdown-border-radius) !important;
-  overflow: hidden !important;
-}
-[class*="awsui_multiselect"] [class*="awsui_interior"],
-[class*="awsui_multiselect"] [class*="awsui_dropdown-content"],
-[class*="awsui_multiselect"] ul,
-[class*="awsui_multiselect"] li {
-  border-radius: 0 !important;
-}
-
-/*
- * DROPDOWN PORTAL STYLES - All scoped to body > div[class*="awsui_dropdown"]
- * CRITICAL: Avoids affecting table cells which also use "interior" class patterns
- * Uses --dropdown-border-radius for consistent rounded corners on containers
- */
-
-/* Portal-rendered dropdown containers - apply rounded corners */
-body > div[class*="awsui_dropdown"] [class*="awsui_dropdown-content-wrapper"],
-body > div[class*="awsui_select"] [class*="awsui_dropdown-content-wrapper"],
-body > div[class*="awsui_multiselect"] [class*="awsui_dropdown-content-wrapper"] {
-  border-radius: var(--dropdown-border-radius) !important;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
-  outline: none !important;
-  border: none !important;
-  overflow: hidden !important;
-}
-
-/* Universal portal dropdown wrappers - ensure rounded corners for all Cloudscape dropdowns */
-body > div[class*="awsui"][class*="dropdown"] [class*="awsui_dropdown-content-wrapper"],
-body > div[class*="awsui"] > [class*="awsui_dropdown-content-wrapper"],
-body > div[class*="awsui"] [class*="awsui_dropdown-content-wrapper"] {
-  border-radius: var(--dropdown-border-radius) !important;
-  overflow: hidden !important;
-}
-
-/* Interior and list elements - no rounded corners (container handles it) */
-body > div[class*="awsui_dropdown"] [class*="awsui_interior"],
-body > div[class*="awsui_dropdown"] [class*="awsui_content-wrapper"],
-body > div[class*="awsui_dropdown"] ul[class*="awsui"],
-body > div[class*="awsui_dropdown"] li[class*="awsui"],
-body > div[class*="awsui_select"] [class*="awsui_interior"],
-body > div[class*="awsui_select"] ul[class*="awsui"],
-body > div[class*="awsui_select"] li[class*="awsui"],
-body > div[class*="awsui_multiselect"] [class*="awsui_interior"],
-body > div[class*="awsui_multiselect"] ul[class*="awsui"],
-body > div[class*="awsui_multiselect"] li[class*="awsui"] {
-  border-radius: 0 !important;
-}
-
-/* List items inside dropdown portals only */
-body > div[class*="awsui_dropdown"] [class*="awsui_list"] li,
-body > div[class*="awsui_dropdown"] ul li {
-  border-radius: 0 !important;
-}
-
-/* Interior wrapper inside dropdown portals */
-body > div[class*="awsui_dropdown"] [class*="awsui_interior"],
-body > div[class*="awsui_select"] [class*="awsui_interior"],
-body > div[class*="awsui_multiselect"] [class*="awsui_interior"] {
-  border-radius: 0 !important;
-  box-shadow: none !important;
-  outline: none !important;
-  border: none !important;
-}
-
-/* Inner elements inside dropdown portals */
-body > div[class*="awsui_dropdown"] [class*="awsui_dropdown-content-wrapper"] > *,
-body > div[class*="awsui_dropdown"] [class*="awsui_dropdown-content"],
-body > div[class*="awsui_dropdown"] [class*="awsui_dropdown-content"] > * {
-  border-radius: 0 !important;
-  box-shadow: none !important;
-  outline: none !important;
-  border: none !important;
-}
-
-/* Pseudo-elements inside dropdown portals */
-body > div[class*="awsui_dropdown"]::before,
-body > div[class*="awsui_dropdown"]::after,
-body > div[class*="awsui_dropdown"] *::before,
-body > div[class*="awsui_dropdown"] *::after {
-  border-radius: 0 !important;
-  box-shadow: none !important;
-  outline: none !important;
-  border: none !important;
-  display: none !important;
-}
-
-/* Options list inside dropdown portals */
-body > div[class*="awsui_dropdown"] [class*="awsui_optionsList"],
-body > div[class*="awsui_dropdown"] [class*="awsui_options-list"],
-body > div[class*="awsui_dropdown"] [class*="awsui_virtual-list"],
-body > div[class*="awsui_select"] [class*="awsui_optionsList"],
-body > div[class*="awsui_select"] [class*="awsui_options-list"],
-body > div[class*="awsui_select"] [class*="awsui_virtual-list"],
-body > div[class*="awsui_multiselect"] [class*="awsui_optionsList"],
-body > div[class*="awsui_multiselect"] [class*="awsui_options-list"],
-body > div[class*="awsui_multiselect"] [class*="awsui_virtual-list"] {
-  border-radius: 0 !important;
-  box-shadow: none !important;
-  border: none !important;
-}
-
-/* Focus rings inside dropdown portals */
-body > div[class*="awsui_dropdown"] *:focus,
-body > div[class*="awsui_dropdown"] *:focus-visible,
-body > div[class*="awsui_dropdown"] *:focus-within {
-  outline: none !important;
-  box-shadow: none !important;
-}
-
-/* All element types inside dropdown portals */
-body > div[class*="awsui_dropdown"] div,
-body > div[class*="awsui_dropdown"] ul,
-body > div[class*="awsui_dropdown"] li,
-body > div[class*="awsui_dropdown"] span,
-body > div[class*="awsui_dropdown"] a,
-body > div[class*="awsui_dropdown"] button {
-  border-radius: 0 !important;
-}
-
-/* Hover styling inside dropdown portals */
-body > div[class*="awsui_dropdown"] [role="option"]:hover,
-body > div[class*="awsui_dropdown"] [role="menuitem"]:hover,
-body > div[class*="awsui_dropdown"] [role="menuitemcheckbox"]:hover,
-body > div[class*="awsui_dropdown"] [role="menuitemradio"]:hover,
-body > div[class*="awsui_dropdown"] [role="option"][aria-selected="true"],
-body > div[class*="awsui_dropdown"] [role="menuitem"][aria-selected="true"] {
-  color: #26c6ff !important;
-  background-color: transparent !important;
-}
-
-body > div[class*="awsui_dropdown"] [role="option"]:hover *,
-body > div[class*="awsui_dropdown"] [role="menuitem"]:hover *,
-body > div[class*="awsui_dropdown"] [role="menuitemcheckbox"]:hover *,
-body > div[class*="awsui_dropdown"] [role="menuitemradio"]:hover *,
-body > div[class*="awsui_dropdown"] [role="option"][aria-selected="true"] *,
-body > div[class*="awsui_dropdown"] [role="menuitem"][aria-selected="true"] * {
-  color: #26c6ff !important;
-}
-
 /* ---break---
  */
 
@@ -1772,6 +955,18 @@ body > div[class*="awsui_dropdown"] [role="menuitem"][aria-selected="true"] * {
   --invert-foreground: var(--color-zinc-50);
 }
 
+/* Dark mode: ensure side navigation links are visible on dark background */
+.dark .app-shell-side-navigation a,
+.dark .app-shell-side-navigation button,
+.dark .app-shell-side-navigation [role="link"] {
+  color: #f5f5f5 !important;
+}
+
+.dark .app-shell-side-navigation [aria-current="page"] {
+  color: #26c6ff !important;
+  font-weight: 600 !important;
+}
+
 /* ---break---
  */