refactor: add SubNav layout and per-subsite nav placeholders; switch Base to use SubNav

src/components/AudioPlayer.jsx

@@ -2,7 +2,10 @@ import React, { useState, useEffect, useRef, Suspense, lazy, useMemo, useCallbac
 import { metaData } from "../config";
 import Play from "@mui/icons-material/PlayArrow";
 import Pause from "@mui/icons-material/Pause";
-import "@styles/player.css";
+// Load AudioPlayer CSS at runtime only when the player mounts on the client.
+// This avoids including the stylesheet in pages where the AudioPlayer never
+// gets loaded (subsidiary/whitelabel sites). We dynamically import the
+// stylesheet inside a client-only effect below.
 import { Dialog } from "primereact/dialog";
 import { AutoComplete } from "primereact/autocomplete";
 import { DataTable } from "primereact/datatable";
@@ -48,6 +51,31 @@ const STATIONS = {
 
 
 export default function Player({ user }) {
+  // Log lifecycle so we can confirm the player mounted in the browser
+  useEffect(() => {
+    // Load the player stylesheet from /public/styles/player.css so it will be
+    // requested at runtime only when the AudioPlayer mounts. This prevents the
+    // CSS from being included as a route asset for subsites.
+    try {
+      if (typeof window !== 'undefined') {
+        if (!document.getElementById('audio-player-css')) {
+          const link = document.createElement('link');
+          link.id = 'audio-player-css';
+          link.rel = 'stylesheet';
+          link.href = '/styles/player.css';
+          link.onload = () => { try { console.debug('[AudioPlayer] CSS loaded (link)'); } catch (e) { } };
+          link.onerror = (err) => { console.warn('[AudioPlayer] CSS link failed', err); };
+          document.head.appendChild(link);
+        }
+      }
+    } catch (e) {
+      // ignore
+    }
+    try { console.debug('[AudioPlayer] mounted'); } catch (e) { }
+    return () => {
+      try { console.debug('[AudioPlayer] unmounted'); } catch (e) { }
+    };
+  }, []);
   // Inject custom paginator styles
   useEffect(() => {
     const styleId = 'queue-paginator-styles';