Overhaul for Tabbed Interfaces

Data/Engine/web-interface/src/Devices/Device_Details.jsx

@@ -49,6 +49,8 @@ const MAGIC_UI = {
   accentC: "#34d399",
 };
 
+const TAB_HOVER_GRADIENT = "linear-gradient(120deg, rgba(125,211,252,0.18), rgba(192,132,252,0.22))";
+
 const gridFontFamily = '"IBM Plex Sans", "Helvetica Neue", Arial, sans-serif';
 const iconFontFamily = '"Quartz Regular"';
 
@@ -1668,14 +1670,30 @@ export default function DeviceDetails({ device, onBack, onQuickJobLaunch }) {
           },
         }}
         sx={{
-          borderBottom: `1px solid rgba(148,163,184,0.35)`,
+          borderBottom: `1px solid ${MAGIC_UI.panelBorder}`,
           mb: 2,
           "& .MuiTab-root": {
             color: MAGIC_UI.textMuted,
             textTransform: "none",
             fontWeight: 600,
+            fontFamily: '"IBM Plex Sans","Helvetica Neue",Arial,sans-serif',
+            fontSize: 15,
+            minHeight: 44,
+            opacity: 1,
+            borderRadius: 1,
+            transition: "background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease",
+            "&:hover": {
+              color: MAGIC_UI.textBright,
+              backgroundImage: TAB_HOVER_GRADIENT,
+              boxShadow: "0 0 0 1px rgba(148,163,184,0.25) inset",
+            },
+          },
+          "& .Mui-selected": {
+            color: MAGIC_UI.textBright,
+            "&:hover": {
+              backgroundImage: TAB_HOVER_GRADIENT,
+            },
           },
-          "& .Mui-selected": { color: MAGIC_UI.textBright },
         }}
       >
         {TOP_TABS.map((label) => (

Data/Engine/web-interface/src/GUI_STYLING_GUIDE.md

@@ -1,3 +0,0 @@
-# This guide moved
-
-The MagicUI styling language and AG Grid rules now live in `Docs/Codex/Shared/ui/README.md` alongside references to `Data/Engine/web-interface/src/Admin/Page_Template.jsx`. Use that doc as the single source of truth for UI patterns and AG Grid behavior.

Data/Engine/web-interface/src/Scheduling/Create_Job.jsx

@@ -338,6 +338,8 @@ const TAB_SECTION_SX = {
   py: { xs: 1.25, md: 1.75 },
 };
 
+const TAB_HOVER_GRADIENT = "linear-gradient(120deg, rgba(125,211,252,0.18), rgba(192,132,252,0.22))";
+
 const PRIMARY_CTA_SX = {
   borderRadius: 999,
   px: 3,
@@ -2700,14 +2702,21 @@ const heroTiles = useMemo(() => {
             color: MAGIC_UI.textMuted,
             textTransform: "none",
             fontWeight: 600,
-            transition: "background 0.2s ease, color 0.2s ease",
+            opacity: 1,
+            borderRadius: 1,
+            transition: "background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease",
             "&:hover": {
-              color: MAGIC_UI.accentA,
-              backgroundColor: "rgba(30,64,175,0.35)",
+              color: MAGIC_UI.textBright,
+              backgroundImage: TAB_HOVER_GRADIENT,
+              opacity: 1,
+              boxShadow: "0 0 0 1px rgba(148,163,184,0.25) inset",
             },
           },
           "& .Mui-selected": {
             color: MAGIC_UI.textBright,
+            "&:hover": {
+              backgroundImage: TAB_HOVER_GRADIENT,
+            },
           },
         }}
       >

Docs/Codex/USER_INTERFACE.md

@@ -25,6 +25,63 @@ Applies to all Borealis frontends. Use `Data/Engine/web-interface/src/Admin/Page
 - Default grid cell padding: keep roughly 18px on the left edge and 12px on the right for standard cells (12px/9px for `auto-col-tight`) so text never hugs a column edge. Target the center + pinned containers so both regions stay aligned.
 - Overlays/menus: `rgba(8,12,24,0.96)` canvas, blurred backdrops, thin steel borders; bright typography; deep blue glass inputs; cyan confirm, mauve destructive accents.
 
+## Aurora Tabs (MagicUI Tabbed Interfaces)
+- Placement: sit directly below the hero title/subtitle band (8–16px gap). Tabs span the full width of the content column and anchor secondary hero metrics (see `Scheduling/Create_Job.jsx` and `Devices/Device_Details.jsx`).
+- Typography: IBM Plex Sans, `fontSize: 15`, mixed case labels (`textTransform: "none"`). Use `fontWeight: 600` for emphasis, but avoid uppercase that crowds the aurora glow.
+- Indicator: 3px tall bar with rounded corners that uses the cyan→violet aurora gradient `linear-gradient(90deg,#7dd3fc,#c084fc)`. Keep it flush with the bottom border so it looks like a light strip under the active tab.
+- Hover/active treatment: tabs float on a translucent aurora panel `linear-gradient(120deg, rgba(125,211,252,0.18), rgba(192,132,252,0.22))` with a 1px inset steel outline. This gradient applies on hover for both selected and non-selected tabs to keep parity.
+- Colors: base text `MAGIC_UI.textMuted` (`#94a3b8`). Hovering switches to `MAGIC_UI.textBright` (`#e2e8f0`). Always force `opacity: 1` to avoid MUI’s default faded text on unfocused tabs.
+- Shape/spacing: tabs are pill-like with `borderRadius: 4` (MUI unit `1`). Maintain `minHeight: 44px` so targets are touchable. Provide `borderBottom: 1px solid MAGIC_UI.panelBorder` to anchor the rail.
+- CSS/SX snippet to copy into new tab stacks:
+  ```jsx
+  const TAB_HOVER_GRADIENT = "linear-gradient(120deg, rgba(125,211,252,0.18), rgba(192,132,252,0.22))";
+
+  <Tabs
+    value={tab}
+    onChange={(_, v) => setTab(v)}
+    variant="scrollable"
+    scrollButtons="auto"
+    TabIndicatorProps={{
+      style: {
+        height: 3,
+        borderRadius: 3,
+        background: "linear-gradient(90deg,#7dd3fc,#c084fc)",
+      },
+    }}
+    sx={{
+      borderBottom: `1px solid ${MAGIC_UI.panelBorder}`,
+      "& .MuiTab-root": {
+        color: MAGIC_UI.textMuted,
+        fontFamily: "\"IBM Plex Sans\", \"Helvetica Neue\", Arial, sans-serif",
+        fontSize: 15,
+        textTransform: "none",
+        fontWeight: 600,
+        minHeight: 44,
+        opacity: 1,
+        borderRadius: 1,
+        transition: "background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease",
+        "&:hover": {
+          color: MAGIC_UI.textBright,
+          backgroundImage: TAB_HOVER_GRADIENT,
+          boxShadow: "0 0 0 1px rgba(148,163,184,0.25) inset",
+        },
+      },
+      "& .Mui-selected": {
+        color: MAGIC_UI.textBright,
+        "&:hover": {
+          backgroundImage: TAB_HOVER_GRADIENT,
+        },
+      },
+    }}
+  >
+    {TABS.map((t) => (
+      <Tab key={t} label={t} />
+    ))}
+  </Tabs>
+  ```
+- Interaction rules: tabs should never scroll vertically; rely on horizontal scroll for overflow. Always align the tab rail with the first section header on the page so the aurora indicator lines up with hero metrics.
+- Accessibility: keep `aria-label`/`aria-controls` pairs when the panes hold complex content, and ensure the gradient backgrounds preserve 4.5:1 contrast for the text (the current cyan on dark meets this).
+
 ## AG Grid Column Behavior (All Tables)
 - Auto-size value columns and let the last column absorb remaining width so views span available space.
 - Declare `AUTO_SIZE_COLUMNS` near the grid component (exclude the fill column).