@mostrom/app-shell 0.1.0

package/src/styles.css

@@ -0,0 +1,1859 @@
+/* =============================================================================
+ * Global Design System Styles
+ * =============================================================================
+ * Core styles previously in @platform/design-system, now merged into 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
+ */
+
+@import "tw-animate-css";
+
+/* ---break---
+ */
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --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;
+
+  /* Core shadcn/ui CSS variables - services import this automatically */
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+
+  /* Sidebar variables */
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  /* Alert/status variables */
+  --destructive-foreground: var(--color-red-800);
+  --success: var(--color-emerald-500);
+  --success-foreground: var(--color-emerald-900);
+  --info: var(--color-violet-500);
+  --info-foreground: var(--color-violet-900);
+  --warning: var(--color-yellow-500);
+  --warning-foreground: var(--color-yellow-900);
+  --invert: var(--color-zinc-900);
+  --invert-foreground: var(--color-zinc-50);
+}
+
+body,
+#root {
+  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;
+  position: sticky;
+  top: 0;
+  z-index: 9999;
+  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)
+ * =============================================================================
+ */
+
+.app-shell-header {
+  display: flex;
+  align-items: center;
+  height: 56px;
+  padding: 8px 16px;
+  background-color: #171717;
+  color: #f5f5f5;
+  font-family: var(--font-family-base);
+}
+
+.app-shell-header-left {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.app-shell-header-center {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+}
+
+.app-shell-header-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.app-shell-header-identity-link,
+.app-shell-header-identity {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none;
+  color: inherit;
+}
+
+.app-shell-header-identity-link:hover {
+  opacity: 0.9;
+}
+
+.app-shell-header-logo {
+  height: 24px;
+  width: auto;
+  display: block;
+}
+
+.app-shell-header-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #f5f5f5;
+}
+
+/* Header utility button base styles */
+.app-shell-header-utility-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: #f5f5f5;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.app-shell-header-utility-button:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: #26c6ff;
+}
+
+.app-shell-header-utility-button:focus-visible {
+  outline: 2px solid #26c6ff;
+  outline-offset: 2px;
+}
+
+.app-shell-header-utility-button svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* Service bar toggle buttons (navigation, copilot, settings, sidebar close) */
+.service-bar-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: inherit;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+
+.service-bar-button:hover {
+  background-color: var(--accent);
+}
+
+.service-bar-button svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* Header menu button with icon + label + chevron */
+.app-shell-header-menu-button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 10px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: #f5f5f5;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  font-family: var(--font-family-base);
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.app-shell-header-menu-button:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: #26c6ff;
+}
+
+.app-shell-header-menu-button:focus-visible {
+  outline: 2px solid #26c6ff;
+  outline-offset: 2px;
+}
+
+.app-shell-header-menu-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.app-shell-header-menu-icon svg {
+  width: 18px;
+  height: 18px;
+}
+
+.app-shell-header-menu-label {
+  white-space: nowrap;
+}
+
+.app-shell-header-menu-chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: -2px;
+}
+
+.app-shell-header-menu-chevron svg {
+  width: 16px;
+  height: 16px;
+  opacity: 0.7;
+}
+
+/* Header dropdown menu styles (Radix UI) */
+.app-shell-header-dropdown {
+  z-index: 10000;
+  min-width: 180px;
+  max-width: 280px;
+  padding: 8px 0;
+  background-color: #171717;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+  outline: none;
+  animation: fadeIn 0.15s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.app-shell-header-dropdown-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 16px;
+  color: #f5f5f5;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  transition: color 0.15s ease;
+}
+
+.app-shell-header-dropdown-item:hover,
+.app-shell-header-dropdown-item:focus,
+.app-shell-header-dropdown-item[data-highlighted] {
+  color: #26c6ff;
+  background-color: transparent;
+}
+
+.app-shell-header-dropdown-item[data-disabled] {
+  color: #6b7280;
+  cursor: not-allowed;
+}
+
+.app-shell-header-dropdown-item-text {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.app-shell-header-dropdown-item-description {
+  font-size: 12px;
+  color: #8aa0b5;
+}
+
+.app-shell-header-dropdown-item:hover .app-shell-header-dropdown-item-description,
+.app-shell-header-dropdown-item:focus .app-shell-header-dropdown-item-description,
+.app-shell-header-dropdown-item[data-highlighted] .app-shell-header-dropdown-item-description {
+  color: #a5d8ff;
+}
+
+.app-shell-header-dropdown-label {
+  padding: 8px 16px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #8aa0b5;
+}
+
+.app-shell-header-dropdown-separator {
+  height: 1px;
+  margin: 8px 0;
+  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;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  border: 1px solid #d5dbdb;
+  background-color: #ffffff;
+  color: #171717;
+  cursor: pointer;
+}
+
+.app-shell-nav-trigger:focus-visible {
+  outline: 2px solid #0073bb;
+  outline-offset: 2px;
+}
+
+.app-shell-nav-trigger[aria-expanded="true"] {
+  background-color: #171717;
+  border-color: #171717;
+  color: #ffffff;
+}
+
+/* Side navigation link color */
+.app-shell-side-navigation a,
+.app-shell-side-navigation button,
+.app-shell-side-navigation [role="link"] {
+  color: #171717 !important;
+  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"] {
+  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;
+  align-items: center;
+  gap: 12px;
+}
+
+.app-shell-header-search {
+  margin-left: 12px;
+}
+
+/* =============================================================================
+ * Services Menu Dropdown Styles (Radix UI)
+ * =============================================================================
+ * Dropdown for "All Services" button - appears below global header
+ */
+
+.app-shell-services-dropdown {
+  z-index: 9999;
+  background-color: #171717;
+  border: none;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+  outline: none;
+}
+
+.app-shell-services-dropdown[data-side="bottom"] {
+  animation: none;
+}
+
+/* Remove any arrow/pointer */
+.app-shell-services-dropdown::before,
+.app-shell-services-dropdown::after {
+  display: none !important;
+}
+
+.app-shell-services-menu {
+  display: grid;
+  grid-template-columns: auto 1px minmax(0, 1fr);
+  gap: 16px;
+  width: min(1000px, calc(100vw - 32px));
+  min-width: 800px;
+  max-height: calc(100vh - 80px);
+  overflow-y: auto;
+  padding: 16px 20px;
+  background-color: #171717;
+  color: #f5f5f5;
+  font-family: "Hanken Grotesk", sans-serif;
+}
+
+.app-shell-services-divider {
+  width: 1px;
+  background-color: #263445;
+}
+
+.app-shell-services-categories {
+  position: sticky;
+  top: 0;
+  align-self: start;
+}
+
+.app-shell-services-categories-title {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #8aa0b5;
+  margin-bottom: 12px;
+}
+
+.app-shell-services-categories ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.app-shell-services-category {
+  display: block;
+  width: 100%;
+  padding: 6px 10px;
+  color: #f5f5f5;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.15s ease;
+  white-space: nowrap;
+  font-size: 14px;
+  text-decoration: none;
+  background: transparent;
+  border: none;
+  text-align: left;
+  font: inherit;
+}
+
+.app-shell-services-category:hover {
+  background-color: rgba(255, 255, 255, 0.08);
+  color: #26c6ff;
+}
+
+/* Services list - two-column layout for the right side */
+.app-shell-services-list {
+  column-count: 2;
+  column-gap: 24px;
+}
+
+.app-shell-services-group {
+  break-inside: avoid;
+  margin-bottom: 16px;
+}
+
+.app-shell-services-group ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.app-shell-services-group-title {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #8aa0b5;
+  margin: 0 0 4px;
+  padding: 0 8px;
+}
+
+.app-shell-services-item {
+  display: block;
+  width: 100%;
+  padding: 4px 8px;
+  color: #f5f5f5;
+  text-decoration: none;
+  background: transparent;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: color 0.15s ease;
+}
+
+.app-shell-services-item:hover,
+.app-shell-services-item:focus,
+.app-shell-services-item:focus-visible {
+  color: #26c6ff;
+  outline: none;
+}
+
+.app-shell-services-item-text {
+  display: block;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.app-shell-services-item-description {
+  display: none;
+}
+
+/* Search popup rendered via Autocomplete should match ServicesMenu dropdown exactly */
+.app-shell-search-dropdown.app-shell-services-dropdown {
+  z-index: 9999;
+  background-color: #151d26;
+  border: none;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+  outline: none;
+  max-height: none;
+  overflow: visible;
+}
+
+.app-shell-search-dropdown.app-shell-services-dropdown[data-side="bottom"] {
+  animation: none;
+}
+
+.app-shell-search-dropdown.app-shell-services-dropdown::before,
+.app-shell-search-dropdown.app-shell-services-dropdown::after {
+  display: none !important;
+}
+
+.app-shell-search-positioner.app-shell-search-positioner-services {
+  width: auto;
+  min-width: 0;
+}
+
+.app-shell-search-dropdown.app-shell-services-dropdown .app-shell-search-options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: block;
+}
+
+.app-shell-search-dropdown.app-shell-services-dropdown .app-shell-search-option {
+  display: block;
+  width: 100%;
+  padding: 4px 8px;
+  color: #f5f5f5;
+  text-decoration: none;
+  background: transparent;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: color 0.15s ease;
+  outline: none;
+}
+
+.app-shell-search-dropdown.app-shell-services-dropdown .app-shell-search-option:hover,
+.app-shell-search-dropdown.app-shell-services-dropdown .app-shell-search-option[data-highlighted] {
+  color: #f5f5f5;
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+.app-shell-search-dropdown.app-shell-services-dropdown .app-shell-services-category:hover {
+  color: #f5f5f5;
+}
+
+.app-shell-separator {
+  color: #3a4a5a;
+  font-size: 20px;
+  font-weight: 300;
+  line-height: 1;
+  user-select: none;
+}
+
+/* Style the apps/categories buttons to look like icon buttons */
+button.app-shell-apps-button,
+.app-shell-categories-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  padding: 6px;
+  min-width: auto;
+  box-shadow: none;
+  cursor: pointer;
+}
+
+button.app-shell-apps-button:hover,
+.app-shell-categories-button:hover {
+  background: transparent;
+}
+
+button.app-shell-apps-button svg,
+.app-shell-categories-button svg {
+  display: block;
+}
+
+button.app-shell-apps-button .app-shell-apps-icon,
+.app-shell-categories-button .app-shell-categories-icon {
+  color: white;
+  transition: color 0.15s ease;
+}
+
+button.app-shell-apps-button:hover .app-shell-apps-icon,
+.app-shell-categories-button:hover .app-shell-categories-icon {
+  color: #26c6ff;
+}
+
+/* =============================================================================
+ * Custom Global Search Styles (non-Cloudscape)
+ * =============================================================================
+ */
+
+.app-shell-search-input-wrapper {
+  position: relative;
+  min-width: 300px;
+  max-width: 400px;
+}
+
+.app-shell-search-input-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.app-shell-search-icon {
+  position: absolute;
+  left: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  pointer-events: none;
+}
+
+.app-shell-search-input {
+  width: 100%;
+  height: 36px;
+  padding: 0 12px 0 36px;
+  background-color: #171717;
+  border: 1px solid #3a4a5a;
+  border-radius: 9999px;
+  color: #f5f5f5;
+  font-family: var(--font-family-base);
+  font-size: 14px;
+  outline: none;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.app-shell-search-input::placeholder {
+  color: #ffffff;
+  opacity: 1;
+}
+
+.app-shell-search-input:focus {
+  border-color: #9ca3af;
+  background-color: #18181b;
+}
+
+.app-shell-search-spinner {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.app-shell-search-dropdown {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  z-index: 10000;
+  max-height: 520px;
+  overflow-y: auto;
+  background: linear-gradient(180deg, #1a2533 0%, #141d29 100%);
+  border: 1px solid #2c3b4f;
+  border-radius: 12px;
+  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.48);
+}
+
+.app-shell-search-results {
+  padding: 8px 10px 10px;
+}
+
+.app-shell-search-section-label {
+  padding: 2px 8px 8px;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1.2;
+  color: #d8e4f2;
+}
+
+.app-shell-search-empty {
+  padding: 16px;
+  text-align: center;
+  color: #8aa0b5;
+  font-size: 14px;
+}
+
+/* Hide empty state when it has no content (results are showing) */
+.app-shell-search-empty:empty {
+  display: none;
+}
+
+.app-shell-search-options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.app-shell-search-option {
+  display: block;
+  padding: 0;
+  cursor: pointer;
+  border: none;
+  outline: none;
+}
+
+.app-shell-search-result-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 72px;
+  padding: 12px 14px;
+  border-radius: 12px;
+  background-color: #152131;
+  border: 1px solid #2a3a4f;
+  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.app-shell-search-option-content {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+  flex: 1;
+}
+
+.app-shell-search-result-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  color: #6ee7d2;
+  background: rgba(82, 191, 176, 0.16);
+  border: 1px solid rgba(110, 231, 210, 0.3);
+  flex-shrink: 0;
+}
+
+.app-shell-search-option-label {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 1.2;
+  color: #f5f5f5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.app-shell-search-option-description {
+  font-size: 15px;
+  font-weight: 400;
+  color: #b6c6d8;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.app-shell-search-option-tags {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.app-shell-search-option-tag {
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #d1d9e3;
+  background: rgba(208, 215, 226, 0.14);
+  border: 1px solid rgba(208, 215, 226, 0.2);
+  border-radius: 999px;
+}
+
+/* Base UI Autocomplete additional styles */
+.app-shell-search-positioner {
+  z-index: 10000;
+  outline: none;
+  width: min(720px, calc(100vw - 24px));
+  min-width: 420px;
+}
+
+@media (max-width: 640px) {
+  .app-shell-search-positioner {
+    min-width: calc(100vw - 24px);
+  }
+}
+
+.app-shell-search-clear,
+.app-shell-search-trigger {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  padding: 2px;
+  cursor: pointer;
+  color: #8aa0b5;
+  opacity: 0.7;
+  transition: opacity 0.15s ease, color 0.15s ease;
+}
+
+.app-shell-search-clear:hover,
+.app-shell-search-trigger:hover {
+  opacity: 1;
+  color: #f5f5f5;
+}
+
+.app-shell-search-clear:focus-visible,
+.app-shell-search-trigger:focus-visible {
+  outline: 2px solid #9ca3af;
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+/* Adjust input padding when clear button is visible */
+.app-shell-search-input-container:has(.app-shell-search-clear) .app-shell-search-input,
+.app-shell-search-input-container:has(.app-shell-search-trigger) .app-shell-search-input {
+  padding-right: 36px;
+}
+
+.app-shell-search-group-label {
+  padding: 8px 16px 4px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #8aa0b5;
+}
+
+/* Base UI data-highlighted state styling */
+.app-shell-search-option[data-highlighted] {
+  background-color: transparent;
+}
+
+.app-shell-search-option[data-highlighted] .app-shell-search-result-row,
+.app-shell-search-option:hover .app-shell-search-result-row {
+  background-color: #27272a;
+  border-color: #52525b;
+  box-shadow: inset 0 0 0 1px rgba(113, 113, 122, 0.4);
+}
+
+.app-shell-search-option[data-highlighted] .app-shell-search-option-label,
+.app-shell-search-option:hover .app-shell-search-option-label {
+  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---
+ */
+
+.dark {
+  /* Core shadcn/ui dark mode variables */
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+
+  /* Sidebar dark mode */
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+
+  /* Alert/status dark mode */
+  --destructive-foreground: var(--color-red-600);
+  --success: var(--color-emerald-500);
+  --success-foreground: var(--color-emerald-600);
+  --info: var(--color-violet-500);
+  --info-foreground: var(--color-violet-600);
+  --warning: var(--color-yellow-500);
+  --warning-foreground: var(--color-yellow-600);
+  --invert: var(--color-zinc-700);
+  --invert-foreground: var(--color-zinc-50);
+}
+
+/* ---break---
+ */
+
+@theme inline {
+  /* Radius mappings for Tailwind classes */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+
+  /* Core color mappings for Tailwind classes (bg-background, text-foreground, etc.) */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* Sidebar color mappings */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Status color mappings */
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-invert: var(--invert);
+  --color-invert-foreground: var(--invert-foreground);
+}
+
+/* ---break---
+ */
+
+@layer base {
+  * {
+    border-color: var(--border, currentColor);
+    outline-color: color-mix(in oklch, var(--ring, currentColor) 50%, transparent);
+  }
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+}
+
+/* ---break---
+ */
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}