WIP: dark mode Modale

.env.development

@@ -6,6 +6,6 @@ NEXT_PUBLIC_USE_MOCK_BACKEND_LOOP_START=false
 NEXT_PUBLIC_EXPORT_STATIC=false
 NEXT_PUBLIC_USE_CGI=false
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.877
+NEXT_PUBLIC_APP_VERSION=1.6.878
 NEXT_PUBLIC_CPL_MODE=json   # json (Entwicklungsumgebung) oder jsSimulatedProd (CPL ->CGI-Interface-Simulator) oder production (CPL-> CGI-Interface Platzhalter)
 

.env.production

@@ -5,5 +5,5 @@ NEXT_PUBLIC_CPL_API_PATH=/CPL
 NEXT_PUBLIC_EXPORT_STATIC=true
 NEXT_PUBLIC_USE_CGI=true
 # App-Versionsnummer
-NEXT_PUBLIC_APP_VERSION=1.6.877
+NEXT_PUBLIC_APP_VERSION=1.6.878
 NEXT_PUBLIC_CPL_MODE=production

CHANGELOG.md

@@ -1,3 +1,8 @@
+## [1.6.878] – 2025-09-08
+
+- WIP: dark mode Berichte
+
+---
 ## [1.6.877] – 2025-09-08
 
 - WIP: dark mode Modale

components/footer/Footer.tsx

@@ -55,14 +55,16 @@ function Footer() {
   }, [showSlider]);
 
   return (
-  <footer className="relative bg-[var(--color-surface-alt)] border-t border-base p-4 xl:p-2 2xl:p-4 overflow-hidden text-[var(--color-fg)] laptop:h-[5vh] theme-transition">
+    <footer className="relative bg-[var(--color-surface-alt)] border-t border-base p-4 xl:p-2 2xl:p-4 overflow-hidden text-[var(--color-fg)] laptop:h-[5vh] theme-transition">
       <div className="container mx-auto flex justify-between">
         <div className="flex flex-row space-x-2 items-center">
           <Icon
             icon="material-symbols:factory-outline"
             className="text-xl text-accent"
           />
-          <p className="text-sm text-fg-muted">Littwin Systemtechnik GmbH & Co. KG</p>
+          <p className="text-sm text-fg-muted">
+            Littwin Systemtechnik GmbH & Co. KG
+          </p>
         </div>
         <div className="flex flex-row space-x-2 items-center">
           <Icon icon="charm:phone" className="text-xl text-accent" />
@@ -70,14 +72,21 @@ function Footer() {
         </div>
         <div className="flex flex-row space-x-2 items-center">
           <Icon icon="mdi:email-outline" className="text-xl text-accent" />
-          <p className="text-sm text-fg-muted">kontakt@littwin-systemtechnik.de</p>
+          <p className="text-sm text-fg-muted">
+            kontakt@littwin-systemtechnik.de
+          </p>
         </div>
         <div
           className="flex flex-row space-x-2 cursor-pointer items-center group"
           onClick={() => setShowSlider(true)}
         >
-          <Icon icon="bi:book" className="text-xl text-accent group-hover:brightness-110 transition" />
-          <p className="text-sm text-fg-muted group-hover:text-[var(--color-fg)] transition">Handbücher</p>
+          <Icon
+            icon="bi:book"
+            className="text-xl text-accent group-hover:brightness-110 transition"
+          />
+          <p className="text-sm text-fg-muted group-hover:text-[var(--color-fg)] transition">
+            Handbücher
+          </p>
         </div>
       </div>
 
@@ -88,7 +97,9 @@ function Footer() {
         }`}
       >
         <div className="p-4 flex justify-between items-center border-b border-base">
-          <h3 className="text-base font-semibold text-[var(--color-fg)]">PDF Handbücher</h3>
+          <h3 className="text-base font-semibold text-[var(--color-fg)]">
+            PDF Handbücher
+          </h3>
           <button
             className="text-[var(--color-muted)] hover:text-[var(--color-fg)] transition"
             onClick={() => setShowSlider(false)}

components/header/Header.tsx

@@ -145,7 +145,7 @@ function Header() {
   }, []);
 
   return (
-  <header className="bg-[var(--color-surface)] dark:bg-[var(--color-surface)]/90 backdrop-blur flex justify-between items-center w-full h-[13vh] laptop:h-[10vh] relative text-[var(--color-fg)] dark:text-[var(--color-fg)] shadow-sm border-b border-[var(--color-border)]">
+    <header className="bg-[var(--color-surface)] dark:bg-[var(--color-surface)]/90 backdrop-blur flex justify-between items-center w-full h-[13vh] laptop:h-[10vh] relative text-[var(--color-fg)] dark:text-[var(--color-fg)] shadow-sm border-b border-[var(--color-border)]">
       <div
         className="absolute transform -translate-y-1/2 
                 left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[6%] 2xl:left-[2%] laptop:left-[4%] laptop:
@@ -195,9 +195,15 @@ function Header() {
             title={isDark ? "Light Mode" : "Dark Mode"}
           >
             {isDark ? (
-              <Icon icon="mdi:weather-night" className="text-xl text-yellow-300" />
+              <Icon
+                icon="mdi:weather-night"
+                className="text-xl text-yellow-300"
+              />
             ) : (
-              <Icon icon="mdi:white-balance-sunny" className="text-xl text-yellow-500" />
+              <Icon
+                icon="mdi:white-balance-sunny"
+                className="text-xl text-yellow-500"
+              />
             )}
           </button>
         </div>
@@ -218,7 +224,7 @@ function Header() {
 
       {/* Warnhinweis, wenn der Admin angemeldet ist */}
       {isAdminLoggedIn && (
-  <div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-full xl:w-1/4 2xl:w-1/4 h-8 bg-[var(--color-warning)] text-center py-2 text-black font-bold tracking-wide">
+        <div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-full xl:w-1/4 2xl:w-1/4 h-8 bg-[var(--color-warning)] text-center py-2 text-black font-bold tracking-wide">
           Admin-Modus aktiv
         </div>
       )}

components/main/analogInputs/AnalogInputsView.tsx

@@ -36,7 +36,7 @@ function AnalogInputsView() {
       }`}
     >
       <div className="grid grid-cols-1 gap-4 justify-items-start">
-  <div className="rounded-lg p-4 max-w-3xl text-[var(--color-fg)] bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border border-[var(--color-border)] shadow-sm">
+        <div className="rounded-lg p-4 max-w-3xl text-[var(--color-fg)] bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border border-[var(--color-border)] shadow-sm">
           <h2 className="text-xl font-semibold mb-4 text-[var(--color-fg)] tracking-wide">
             Messwerteingänge
           </h2>

components/main/dashboard/DashboardView.tsx

@@ -25,7 +25,7 @@ const DashboardView: React.FC = () => {
   }, [dispatch]);
   //-------------------------------------
   return (
-  <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0 bg-[var(--color-background)] text-[var(--color-fg)]">
+    <div className="flex flex-col gap-3 p-4 h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-5vh)] xl:h-[calc(100vh-10vh-6vh)] laptop:gap-0 bg-[var(--color-background)] text-[var(--color-fg)]">
       {/* Header */}
       <div className="flex justify-between items-center w-full lg:w-2/3">
         <div className="flex justify-between gap-1">

components/main/dashboard/NetworkInfo.tsx

@@ -38,7 +38,7 @@ const NetworkInfo: React.FC = () => {
 
   return (
     <div className="w-full flex-direction: row flex">
-  <div className=" flex-grow flex justify-between items-center mt-1 p-2 rounded-lg shadow-sm bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border border-[var(--color-border)] laptop:m-0 laptop:scale-y-75 2xl:scale-y-75">
+      <div className=" flex-grow flex justify-between items-center mt-1 p-2 rounded-lg shadow-sm bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border border-[var(--color-border)] laptop:m-0 laptop:scale-y-75 2xl:scale-y-75">
         <div className="flex items-center space-x-4">
           <Image
             src="/images/IP-icon.svg"
@@ -49,12 +49,8 @@ const NetworkInfo: React.FC = () => {
             priority
           />
           <div>
-            <p className="text-xs text-[var(--color-fg-muted)]">
-              IP-Adresse
-            </p>
-            <p className="text-sm font-medium text-[var(--color-fg)]">
-              {ip}
-            </p>
+            <p className="text-xs text-[var(--color-fg-muted)]">IP-Adresse</p>
+            <p className="text-sm font-medium text-[var(--color-fg)]">{ip}</p>
           </div>
         </div>
 
@@ -68,9 +64,7 @@ const NetworkInfo: React.FC = () => {
             priority
           />
           <div>
-            <p className="text-xs text-[var(--color-fg-muted)]">
-              Subnet-Maske
-            </p>
+            <p className="text-xs text-[var(--color-fg-muted)]">Subnet-Maske</p>
             <p className="text-sm font-medium text-[var(--color-fg)]">
               {subnet}
             </p>

components/main/dashboard/VersionInfo.tsx

@@ -23,14 +23,14 @@ const VersionInfo: React.FC<VersionInfoProps> = ({ className = "" }) => {
         <li className="flex items-start gap-2">
           <Icon icon="bx:code-block" className="text-xl text-accent" />
           <p className="text-sm text-fg-muted">
-            Applikationsversion: {" "}
+            Applikationsversion:{" "}
             <span className="text-[var(--color-fg)]">{appVersion}</span>
           </p>
         </li>
         <li className="flex items-start gap-2">
           <Icon icon="mdi:web" className="text-xl text-accent" />
           <p className="text-sm text-fg-muted">
-            Webversion: {" "}
+            Webversion:{" "}
             <span className="text-[var(--color-fg)]">{webVersion}</span>
           </p>
         </li>

components/main/digitalInputs/DigitalInputsWidget.tsx

@@ -30,7 +30,7 @@ export default function DigitalInputsWidget({
   //console.log("DigitalInputs", inputs);
 
   return (
-  <div className="text-[var(--color-fg)] bg-[var(--color-surface)] dark:bg-[var(--color-surface)] shadow-sm border border-[var(--color-border)] p-3 rounded-lg w-full laptop:p-1 xl:p-1">
+    <div className="text-[var(--color-fg)] bg-[var(--color-surface)] dark:bg-[var(--color-surface)] shadow-sm border border-[var(--color-border)] p-3 rounded-lg w-full laptop:p-1 xl:p-1">
       <h2 className="laptop:text-sm  md:text-base 2xl:text-lg font-bold mb-3 flex items-center">
         <Icon
           icon={inputIcon}

components/main/reports/MeldungenTabelle.tsx

@@ -17,11 +17,21 @@ export default function MeldungenTabelle({
       <table className="min-w-full border border-base table-surface text-fg">
         <thead className="text-left sticky top-0 z-10 bg-surface-alt/90 backdrop-blur supports-[backdrop-filter]:bg-surface-alt/70">
           <tr>
-            <th className="p-2 border border-base bg-surface-alt text-fg font-medium">Prio</th>
-            <th className="p-2 border border-base bg-surface-alt text-fg font-medium">Zeitstempel</th>
-            <th className="p-2 border border-base bg-surface-alt text-fg font-medium">Quelle</th>
-            <th className="p-2 border border-base bg-surface-alt text-fg font-medium">Meldung</th>
-            <th className="p-2 border border-base bg-surface-alt text-fg font-medium">Status</th>
+            <th className="p-2 border border-base bg-surface-alt text-fg font-medium">
+              Prio
+            </th>
+            <th className="p-2 border border-base bg-surface-alt text-fg font-medium">
+              Zeitstempel
+            </th>
+            <th className="p-2 border border-base bg-surface-alt text-fg font-medium">
+              Quelle
+            </th>
+            <th className="p-2 border border-base bg-surface-alt text-fg font-medium">
+              Meldung
+            </th>
+            <th className="p-2 border border-base bg-surface-alt text-fg font-medium">
+              Status
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -46,9 +56,15 @@ export default function MeldungenTabelle({
                   second: "2-digit",
                 })}
               </td>
-              <td className="border border-base p-2 bg-surface text-fg">{msg.i}</td>
-              <td className="border border-base p-2 bg-surface text-fg">{msg.m}</td>
-              <td className="border border-base p-2 bg-surface text-fg">{msg.v}</td>
+              <td className="border border-base p-2 bg-surface text-fg">
+                {msg.i}
+              </td>
+              <td className="border border-base p-2 bg-surface text-fg">
+                {msg.m}
+              </td>
+              <td className="border border-base p-2 bg-surface text-fg">
+                {msg.v}
+              </td>
             </tr>
           ))}
         </tbody>

components/main/settingsPageComponents/DatabaseSettings.tsx

@@ -10,7 +10,7 @@ import { useAdminAuth } from "./hooks/useAdminAuth";
 const DatabaseSettings: React.FC = () => {
   const { isAdminLoggedIn } = useAdminAuth(true);
   return (
-  <div className="p-6 bg-[var(--color-surface-alt)] max-w-5xl mr-auto rounded shadow text-[var(--color-fg)]">
+    <div className="p-6 bg-[var(--color-surface-alt)] max-w-5xl mr-auto rounded shadow text-[var(--color-fg)]">
       <h2 className="text-lg font-bold mb-6">Datenbank Einstellungen</h2>
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">

components/main/settingsPageComponents/GeneralSettings.tsx

@@ -63,10 +63,11 @@ const GeneralSettings: React.FC = () => {
     setMac1(systemSettings.mac1 || "");
   }, [systemSettings]);
 
-  const inputCls = "border border-base focus:border-accent rounded h-8 p-1 w-full text-xs bg-[var(--color-surface)] text-[var(--color-fg)] placeholder-[var(--color-muted)] transition-colors duration-150 focus:outline-none";
+  const inputCls =
+    "border border-base focus:border-accent rounded h-8 p-1 w-full text-xs bg-[var(--color-surface)] text-[var(--color-fg)] placeholder-[var(--color-muted)] transition-colors duration-150 focus:outline-none";
 
   return (
-  <div className="p-6 md:p-3 bg-[var(--color-surface-alt)] max-w-5xl mr-auto overflow-y-auto max-h-[calc(100vh-200px)] text-[var(--color-fg)]">
+    <div className="p-6 md:p-3 bg-[var(--color-surface-alt)] max-w-5xl mr-auto overflow-y-auto max-h-[calc(100vh-200px)] text-[var(--color-fg)]">
       <h2 className="text-sm md:text-md font-bold mb-2">
         Allgemeine Einstellungen
       </h2>
@@ -86,12 +87,7 @@ const GeneralSettings: React.FC = () => {
           <label className="block text-xs md:text-sm font-medium">
             MAC Adresse 1:
           </label>
-          <input
-            type="text"
-            className={inputCls}
-            value={mac1}
-            disabled
-          />
+          <input type="text" className={inputCls} value={mac1} disabled />
         </div>
         {/* Systemzeit */}
         <div className="col-span-2">

components/main/settingsPageComponents/NTPSettings.tsx

@@ -27,7 +27,7 @@ const NTPSettings: React.FC = () => {
   }
 
   return (
-  <div className="p-6 md:p-3 bg-[var(--color-surface-alt)] max-w-5xl mr-auto text-[var(--color-fg)]">
+    <div className="p-6 md:p-3 bg-[var(--color-surface-alt)] max-w-5xl mr-auto text-[var(--color-fg)]">
       <h2 className="text-sm md:text-md font-bold mb-4">NTP Einstellungen</h2>
 
       <div className="grid md:grid-cols-2 gap-3">

components/main/settingsPageComponents/OPCUAInterfaceSettings.tsx

@@ -76,7 +76,7 @@ export default function OPCUAInterfaceSettings() {
       {/* ✅ OPCUA Zustand */}
       <div className="mb-3">
         <label className="block font-medium text-sm mb-1">OPCUA Zustand</label>
-  <div className="p-1 border border-base rounded-md bg-[var(--color-surface)] text-sm text-[var(--color-fg)]">
+        <div className="p-1 border border-base rounded-md bg-[var(--color-surface)] text-sm text-[var(--color-fg)]">
           {opcuaSettings.opcUaZustand}
         </div>
       </div>
@@ -108,7 +108,7 @@ export default function OPCUAInterfaceSettings() {
         <label className="block font-medium text-sm mb-1">
           Aktuelle OPC-Clients
         </label>
-  <div className="p-1 border border-base rounded-md bg-[var(--color-surface)] text-sm text-[var(--color-fg)]">
+        <div className="p-1 border border-base rounded-md bg-[var(--color-surface)] text-sm text-[var(--color-fg)]">
           {opcUaActiveClientCount}
         </div>
       </div>

components/main/settingsPageComponents/modals/ProgressModal.tsx

@@ -13,7 +13,7 @@ const ProgressModal: React.FC<Props> = ({ visible, progress, slot }) => {
 
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 ">
-  <div className="p-6 rounded shadow-sm text-center w-80 bg-[var(--color-surface)] dark:bg-[var(--color-surface)] text-[var(--color-fg)] border border-[var(--color-border)]">
+      <div className="p-6 rounded shadow-sm text-center w-80 bg-[var(--color-surface)] dark:bg-[var(--color-surface)] text-[var(--color-fg)] border border-[var(--color-border)]">
         {/* 
                 <h2 className="text-lg font-bold mb-4">
           Firmwareupdate

components/main/system/DetailModal.tsx

@@ -481,7 +481,7 @@ export const DetailModal = ({
           isLoading={isLoading}
         />
 
-  <div className="h-[85%] rounded shadow border p-2 bg-[var(--color-surface)] border-[var(--color-border)]">
+        <div className="h-[85%] rounded shadow border p-2 bg-[var(--color-surface)] border-[var(--color-border)]">
           <Line ref={chartRef} data={chartData} options={chartOptions} />
         </div>
       </div>

components/main/system/SystemView.tsx

@@ -71,8 +71,8 @@ const SystemPage = () => {
   };
 
   return (
-  <div className="p-4 bg-[var(--color-background)] text-[var(--color-fg)]">
-  <h1 className="text-xl font-bold mb-4 tracking-wide">
+    <div className="p-4 bg-[var(--color-background)] text-[var(--color-fg)]">
+      <h1 className="text-xl font-bold mb-4 tracking-wide">
         System Spannungen & Temperaturen
       </h1>
 

components/navigation/Navigation.tsx

@@ -36,7 +36,7 @@ const Navigation: React.FC<NavigationProps> = ({ className }) => {
   ];
 
   return (
-  <aside className="h-full bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border-r border-[var(--color-border)]">
+    <aside className="h-full bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border-r border-[var(--color-border)]">
       <nav className={`h-full flex-shrink-0 mt-16 ${className || "w-48"}`}>
         {menuItems.map((item) => (
           <div key={item.name}>
@@ -50,9 +50,11 @@ const Navigation: React.FC<NavigationProps> = ({ className }) => {
                 prefetch={false}
                 onClick={() => setActiveLink(item.path)}
                 className={`block px-4 py-2 mb-4 font-semibold whitespace-nowrap transition duration-200 rounded-r-full pr-6 relative text-[1rem] sm:text-[1rem] md:text-[1rem] lg:text-[1rem] xl:text-sm 2xl:text-lg
-                ${activeLink.startsWith(item.path)
-                  ? 'bg-[var(--color-accent)] text-white shadow-sm xl:mr-4 xl:w-full'
-                  : 'text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] hover:bg-[var(--color-surface-alt)]/80 dark:hover:bg-[var(--color-surface-alt)]/40'}
+                ${
+                  activeLink.startsWith(item.path)
+                    ? "bg-[var(--color-accent)] text-white shadow-sm xl:mr-4 xl:w-full"
+                    : "text-[var(--color-fg-muted)] hover:text-[var(--color-fg)] hover:bg-[var(--color-surface-alt)]/80 dark:hover:bg-[var(--color-surface-alt)]/40"
+                }
                 `}
               >
                 {item.name}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.877",
+  "version": "1.6.878",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cpl-v4",
-      "version": "1.6.877",
+      "version": "1.6.878",
       "dependencies": {
         "@fontsource/roboto": "^5.1.0",
         "@headlessui/react": "^2.2.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cpl-v4",
-  "version": "1.6.877",
+  "version": "1.6.878",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3000",

pages/_app.tsx

@@ -148,11 +148,11 @@ function AppContent({
   }, [pathname, dispatch]);
 
   return (
-  <div className="flex flex-col h-screen overflow-hidden bg-[var(--color-background)] text-[var(--color-fg)]">
+    <div className="flex flex-col h-screen overflow-hidden bg-[var(--color-background)] text-[var(--color-fg)]">
       <Header />
       <div className="flex flex-grow w-full">
         <Navigation className="w-56" />
-  <main className="w-full flex-grow bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border-l border-[var(--color-border)]">
+        <main className="w-full flex-grow bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border-l border-[var(--color-border)]">
           {sessionExpired && (
             <div className="bg-red-500 text-white p-4 text-center">
               ❌ Ihre Sitzung ist abgelaufen oder die Verbindung ist

styles/globals.css

@@ -58,11 +58,13 @@ body {
 
 /* Smooth theme transitions (respect reduced motion) */
 @media (prefers-reduced-motion: no-preference) {
-  html, body {
-    transition: background-color .25s ease, color .25s ease;
+  html,
+  body {
+    transition: background-color 0.25s ease, color 0.25s ease;
   }
   .theme-transition {
-    transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
+    transition: background-color 0.25s ease, color 0.25s ease,
+      border-color 0.25s ease, box-shadow 0.25s ease;
   }
 }
 
@@ -71,18 +73,42 @@ body {
     text-wrap: balance;
   }
   /* Semantic shortcut utilities */
-  .bg-background { background-color: var(--color-background); }
-  .bg-surface { background-color: var(--color-surface); }
-  .bg-surface-alt { background-color: var(--color-surface-alt); }
-  .text-fg { color: var(--color-fg); }
-  .text-fg-muted { color: var(--color-fg-muted); }
-  .text-muted { color: var(--color-muted); }
-  .border-base { border-color: var(--color-border); }
-  .ring-accent { --tw-ring-color: var(--color-ring); }
-  .bg-accent { background-color: var(--color-accent); }
-  .bg-accent-soft { background-color: var(--color-accent-soft); }
-  .text-success { color: var(--color-success); }
-  .text-danger { color: var(--color-danger); }
+  .bg-background {
+    background-color: var(--color-background);
+  }
+  .bg-surface {
+    background-color: var(--color-surface);
+  }
+  .bg-surface-alt {
+    background-color: var(--color-surface-alt);
+  }
+  .text-fg {
+    color: var(--color-fg);
+  }
+  .text-fg-muted {
+    color: var(--color-fg-muted);
+  }
+  .text-muted {
+    color: var(--color-muted);
+  }
+  .border-base {
+    border-color: var(--color-border);
+  }
+  .ring-accent {
+    --tw-ring-color: var(--color-ring);
+  }
+  .bg-accent {
+    background-color: var(--color-accent);
+  }
+  .bg-accent-soft {
+    background-color: var(--color-accent-soft);
+  }
+  .text-success {
+    color: var(--color-success);
+  }
+  .text-danger {
+    color: var(--color-danger);
+  }
 
   /* Component abstractions (no @apply to avoid processing issues in global layer) */
   .card {
@@ -90,14 +116,15 @@ body {
     color: var(--color-fg);
     border: 1px solid var(--color-border);
     border-radius: 0.375rem; /* rounded-md */
-    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
   }
   .card-elevated {
     background: var(--color-surface);
     color: var(--color-fg);
     border: 1px solid var(--color-border);
     border-radius: 0.375rem;
-    box-shadow: 0 4px 10px -2px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15);
+    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.25),
+      0 2px 4px rgba(0, 0, 0, 0.15);
   }
   .table-surface {
     background: var(--color-surface);
@@ -113,7 +140,11 @@ body {
     border-bottom: 1px solid var(--color-border);
   }
   .table-row-hover:hover {
-    background-color: color-mix(in srgb,var(--color-surface-alt) 85%,transparent);
+    background-color: color-mix(
+      in srgb,
+      var(--color-surface-alt) 85%,
+      transparent
+    );
   }
   .btn-accent {
     background: var(--color-accent);
@@ -121,21 +152,66 @@ body {
     border-radius: 0.375rem;
     padding: 0.5rem 1rem;
     font-weight: 500;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
-    transition: filter .2s ease, box-shadow .2s ease;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+    transition: filter 0.2s ease, box-shadow 0.2s ease;
+  }
+  .btn-accent:hover {
+    filter: brightness(1.1);
+  }
+  .btn-accent:focus {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
   }
-  .btn-accent:hover { filter: brightness(1.1); }
-  .btn-accent:focus { outline: 2px solid var(--color-ring); outline-offset: 2px; }
   /* Button Variants */
-  .btn-primary { @media (prefers-reduced-motion: no-preference) { transition: background-color .2s ease, filter .2s ease; } background: var(--color-accent); color:#fff; border-radius:.375rem; font-weight:500; padding:.5rem 1rem; }
-  .btn-primary:hover { filter:brightness(1.1); }
-  .btn-primary:focus { outline:2px solid var(--color-ring); outline-offset:2px; }
-  .btn-muted { background: var(--color-muted); color: var(--color-fg); border-radius:.375rem; font-weight:500; padding:.5rem 1rem; }
-  .btn-muted:hover { background: var(--color-fg); color: var(--color-background); }
-  .btn-outline { background: transparent; color: var(--color-fg); border:1px solid var(--color-border); border-radius:.375rem; font-weight:500; padding:.5rem 1rem; }
-  .btn-outline:hover { background: var(--color-surface-alt); }
-  .btn-danger { background: var(--color-danger); color:#fff; border-radius:.375rem; font-weight:500; padding:.5rem 1rem; }
-  .btn-danger:hover { filter:brightness(1.1); }
+  .btn-primary {
+    @media (prefers-reduced-motion: no-preference) {
+      transition: background-color 0.2s ease, filter 0.2s ease;
+    }
+    background: var(--color-accent);
+    color: #fff;
+    border-radius: 0.375rem;
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+  }
+  .btn-primary:hover {
+    filter: brightness(1.1);
+  }
+  .btn-primary:focus {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+  .btn-muted {
+    background: var(--color-muted);
+    color: var(--color-fg);
+    border-radius: 0.375rem;
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+  }
+  .btn-muted:hover {
+    background: var(--color-fg);
+    color: var(--color-background);
+  }
+  .btn-outline {
+    background: transparent;
+    color: var(--color-fg);
+    border: 1px solid var(--color-border);
+    border-radius: 0.375rem;
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+  }
+  .btn-outline:hover {
+    background: var(--color-surface-alt);
+  }
+  .btn-danger {
+    background: var(--color-danger);
+    color: #fff;
+    border-radius: 0.375rem;
+    font-weight: 500;
+    padding: 0.5rem 1rem;
+  }
+  .btn-danger:hover {
+    filter: brightness(1.1);
+  }
   .input-base {
     background: var(--color-input-bg);
     color: var(--color-fg);
@@ -149,22 +225,30 @@ body {
     outline: 1px solid var(--color-ring);
     outline-offset: 2px;
   }
-  .input-base:disabled { opacity: 0.6; cursor: not-allowed; }
+  .input-base:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
 }
 
 /* Form elements use tokens */
-input, select, textarea {
+input,
+select,
+textarea {
   background-color: var(--color-input-bg) !important;
   color: var(--color-fg) !important;
   border: 1px solid var(--color-input-border);
 }
 
-input::placeholder, textarea::placeholder {
+input::placeholder,
+textarea::placeholder {
   color: var(--color-muted);
   opacity: 1; /* ensure consistent visibility */
 }
 
-input:focus, select:focus, textarea:focus {
+input:focus,
+select:focus,
+textarea:focus {
   outline: 2px solid var(--color-ring);
   outline-offset: 2px;
   border-color: var(--color-ring);