Merge toolbar-fixes.css and user-theme.css into globals.css

Consolidate two override CSS files into globals.css to reduce the number
of separate stylesheets. Both files were primarily overriding rules
already in globals.css (81% and 55% overlap respectively).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/app/globals.css

@@ -3388,3 +3388,248 @@ button:disabled {
   padding: 6px 7px !important;
   font-size: 12px !important;
 }
+
+/* --- Toolbar Fixes (merged from toolbar-fixes.css) --- */
+
+.editToolbar .button:first-child,
+.editToolbar button:first-child {
+  display: inline-flex !important;
+}
+
+.editToolbar button,
+.editToolbar .button {
+  visibility: visible !important;
+  opacity: 1 !important;
+  pointer-events: auto !important;
+}
+
+.editToolbar .topEditModeButton,
+.editToolbar button[aria-label="Bearbeitungsmodus aktivieren"],
+.editToolbar button[aria-label="Bearbeitungsmodus deaktivieren"] {
+  display: none !important;
+}
+
+.topBar {
+  position: relative;
+  z-index: 5000;
+}
+
+.topBar .profileMenu {
+  position: relative;
+  z-index: 5400;
+}
+
+.topBar .profileDropdown {
+  z-index: 5500;
+}
+
+.topBar .topEditModeButton {
+  position: absolute;
+  top: 50%;
+  right: 78px;
+  z-index: 5350;
+  transform: translateY(-50%);
+}
+
+.topEditModeButton {
+  width: 42px;
+  height: 42px;
+  display: inline-grid;
+  place-items: center;
+  padding: 0;
+  color: var(--text);
+  background: var(--surface-strong);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  cursor: pointer;
+  box-shadow: var(--shadow);
+  font-size: 0;
+}
+
+.topEditModeButton:hover {
+  border-color: var(--accent);
+}
+
+.topEditModeButtonActive {
+  color: var(--accent-text);
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.lockIcon {
+  position: relative;
+  width: 22px;
+  height: 24px;
+  display: block;
+  color: currentColor;
+}
+
+.lockIconBody {
+  position: absolute;
+  left: 3px;
+  bottom: 2px;
+  width: 16px;
+  height: 13px;
+  background: transparent;
+  border: 2px solid currentColor;
+  border-radius: 4px;
+}
+
+.lockIconBody::before {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 4px;
+  width: 3px;
+  height: 3px;
+  background: currentColor;
+  border-radius: 999px;
+  transform: translateX(-50%);
+}
+
+.lockIconBody::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 7px;
+  width: 2px;
+  height: 4px;
+  background: currentColor;
+  border-radius: 999px;
+  transform: translateX(-50%);
+}
+
+.lockIconShackle {
+  position: absolute;
+  width: 12px;
+  height: 11px;
+  background: transparent;
+  border: 2px solid currentColor;
+  border-bottom: 0;
+  border-radius: 10px 10px 0 0;
+}
+
+.lockIconClosed .lockIconShackle {
+  left: 5px;
+  top: 1px;
+  transform: none;
+}
+
+.lockIconOpen .lockIconShackle {
+  left: 9px;
+  top: 1px;
+  transform: rotate(35deg);
+  transform-origin: left bottom;
+}
+
+.dashboardWorkspace,
+.widgetGridShell,
+.emptyDashboard,
+.react-grid-layout,
+.react-grid-item {
+  z-index: auto;
+}
+
+.react-grid-item.react-draggable-dragging,
+.react-grid-item.resizing {
+  z-index: 300;
+}
+
+.gridItemMenuOpen {
+  z-index: 400 !important;
+}
+
+@media (max-width: 760px) {
+  .topBar .topEditModeButton {
+    right: 72px;
+  }
+
+  .topEditModeButton {
+    width: 38px;
+    height: 38px;
+  }
+
+  .lockIcon {
+    transform: scale(0.9);
+  }
+}
+
+/* --- User Theme (merged from user-theme.css) --- */
+
+:root {
+  --accent-text-fallback: #ffffff;
+}
+
+.app {
+  --accent-text: var(--accent-text, var(--accent-text-fallback));
+}
+
+.button,
+.adminInlineButton,
+.favoriteAddButton,
+.searchWidgetForm .button {
+  border-color: color-mix(in srgb, var(--accent) 70%, var(--border) 30%);
+}
+
+.button:not(.buttonSecondary):not(.favoriteRemoveButton):not(.logoutButton),
+.adminInlineButton,
+.favoriteAddButton,
+.searchWidgetForm .button {
+  color: var(--accent-text, #ffffff);
+  background: var(--accent);
+}
+
+.button:not(.buttonSecondary):not(.favoriteRemoveButton):not(.logoutButton):hover,
+.adminInlineButton:hover,
+.favoriteAddButton:hover,
+.searchWidgetForm .button:hover {
+  border-color: var(--accent);
+  filter: brightness(1.05);
+}
+
+.buttonSecondary,
+.profileDropdown .button,
+.widgetMenuButton,
+.widgetDragHandle {
+  color: var(--text);
+  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface-strong) 58%);
+  border-color: color-mix(in srgb, var(--accent) 28%, var(--border) 72%);
+}
+
+.buttonSecondary:hover,
+.profileDropdown .button:hover,
+.widgetMenuButton:hover,
+.widgetDragHandle:hover {
+  border-color: var(--accent);
+}
+
+.input:focus,
+.select:focus,
+textarea:focus,
+.fileInput:focus,
+.colorInput:focus {
+  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
+  border-color: var(--accent);
+}
+
+.topEditModeButtonActive {
+  color: var(--accent-text, #ffffff);
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.favoriteTile:hover,
+.widgetCard:hover {
+  border-color: color-mix(in srgb, var(--accent) 65%, var(--border) 35%);
+}
+
+.favoriteIconPlaceholder {
+  color: var(--accent-text, #ffffff);
+  background: var(--accent);
+}
+
+.equalsButton {
+  color: var(--accent-text, #ffffff) !important;
+  background: var(--accent) !important;
+  border-color: var(--accent) !important;
+}

src/app/layout.tsx

@@ -8,8 +8,6 @@ import "./favorites-widget.css";
 import "./admin.css";
 import "./note-widget.css";
 import "./calendar-scale.css";
-import "./toolbar-fixes.css";
-import "./user-theme.css";
 import "./widget-density.css";
 import "./clock-widget.css";
 import "./search-widget.css";

src/app/toolbar-fixes.css

@@ -1,162 +0,0 @@
-.editToolbar .button:first-child,
-.editToolbar button:first-child {
-  display: inline-flex !important;
-}
-
-.editToolbar button,
-.editToolbar .button {
-  visibility: visible !important;
-  opacity: 1 !important;
-  pointer-events: auto !important;
-}
-
-.editToolbar .topEditModeButton,
-.editToolbar button[aria-label="Bearbeitungsmodus aktivieren"],
-.editToolbar button[aria-label="Bearbeitungsmodus deaktivieren"] {
-  display: none !important;
-}
-
-.topBar {
-  position: relative;
-  z-index: 5000;
-}
-
-.topBar .profileMenu {
-  position: relative;
-  z-index: 5400;
-}
-
-.topBar .profileDropdown {
-  z-index: 5500;
-}
-
-.topBar .topEditModeButton {
-  position: absolute;
-  top: 50%;
-  right: 78px;
-  z-index: 5350;
-  transform: translateY(-50%);
-}
-
-.topEditModeButton {
-  width: 42px;
-  height: 42px;
-  display: inline-grid;
-  place-items: center;
-  padding: 0;
-  color: var(--text);
-  background: var(--surface-strong);
-  border: 1px solid var(--border);
-  border-radius: 999px;
-  cursor: pointer;
-  box-shadow: var(--shadow);
-  font-size: 0;
-}
-
-.topEditModeButton:hover {
-  border-color: var(--accent);
-}
-
-.topEditModeButtonActive {
-  color: var(--accent-text);
-  background: var(--accent);
-  border-color: var(--accent);
-}
-
-.lockIcon {
-  position: relative;
-  width: 22px;
-  height: 24px;
-  display: block;
-  color: currentColor;
-}
-
-.lockIconBody {
-  position: absolute;
-  left: 3px;
-  bottom: 2px;
-  width: 16px;
-  height: 13px;
-  background: transparent;
-  border: 2px solid currentColor;
-  border-radius: 4px;
-}
-
-.lockIconBody::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  top: 4px;
-  width: 3px;
-  height: 3px;
-  background: currentColor;
-  border-radius: 999px;
-  transform: translateX(-50%);
-}
-
-.lockIconBody::after {
-  content: "";
-  position: absolute;
-  left: 50%;
-  top: 7px;
-  width: 2px;
-  height: 4px;
-  background: currentColor;
-  border-radius: 999px;
-  transform: translateX(-50%);
-}
-
-.lockIconShackle {
-  position: absolute;
-  width: 12px;
-  height: 11px;
-  background: transparent;
-  border: 2px solid currentColor;
-  border-bottom: 0;
-  border-radius: 10px 10px 0 0;
-}
-
-.lockIconClosed .lockIconShackle {
-  left: 5px;
-  top: 1px;
-  transform: none;
-}
-
-.lockIconOpen .lockIconShackle {
-  left: 9px;
-  top: 1px;
-  transform: rotate(35deg);
-  transform-origin: left bottom;
-}
-
-.dashboardWorkspace,
-.widgetGridShell,
-.emptyDashboard,
-.react-grid-layout,
-.react-grid-item {
-  z-index: auto;
-}
-
-.react-grid-item.react-draggable-dragging,
-.react-grid-item.resizing {
-  z-index: 300;
-}
-
-.gridItemMenuOpen {
-  z-index: 400 !important;
-}
-
-@media (max-width: 760px) {
-  .topBar .topEditModeButton {
-    right: 72px;
-  }
-
-  .topEditModeButton {
-    width: 38px;
-    height: 38px;
-  }
-
-  .lockIcon {
-    transform: scale(0.9);
-  }
-}

src/app/user-theme.css

@@ -1,77 +0,0 @@
-:root {
-  --accent-text-fallback: #ffffff;
-}
-
-.app {
-  --accent-text: var(--accent-text, var(--accent-text-fallback));
-}
-
-.button,
-.adminInlineButton,
-.favoriteAddButton,
-.searchWidgetForm .button {
-  border-color: color-mix(in srgb, var(--accent) 70%, var(--border) 30%);
-}
-
-.button:not(.buttonSecondary):not(.favoriteRemoveButton):not(.logoutButton),
-.adminInlineButton,
-.favoriteAddButton,
-.searchWidgetForm .button {
-  color: var(--accent-text, #ffffff);
-  background: var(--accent);
-}
-
-.button:not(.buttonSecondary):not(.favoriteRemoveButton):not(.logoutButton):hover,
-.adminInlineButton:hover,
-.favoriteAddButton:hover,
-.searchWidgetForm .button:hover {
-  border-color: var(--accent);
-  filter: brightness(1.05);
-}
-
-.buttonSecondary,
-.profileDropdown .button,
-.widgetMenuButton,
-.widgetDragHandle {
-  color: var(--text);
-  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface-strong) 58%);
-  border-color: color-mix(in srgb, var(--accent) 28%, var(--border) 72%);
-}
-
-.buttonSecondary:hover,
-.profileDropdown .button:hover,
-.widgetMenuButton:hover,
-.widgetDragHandle:hover {
-  border-color: var(--accent);
-}
-
-.input:focus,
-.select:focus,
-textarea:focus,
-.fileInput:focus,
-.colorInput:focus {
-  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
-  border-color: var(--accent);
-}
-
-.topEditModeButtonActive {
-  color: var(--accent-text, #ffffff);
-  background: var(--accent);
-  border-color: var(--accent);
-}
-
-.favoriteTile:hover,
-.widgetCard:hover {
-  border-color: color-mix(in srgb, var(--accent) 65%, var(--border) 35%);
-}
-
-.favoriteIconPlaceholder {
-  color: var(--accent-text, #ffffff);
-  background: var(--accent);
-}
-
-.equalsButton {
-  color: var(--accent-text, #ffffff) !important;
-  background: var(--accent) !important;
-  border-color: var(--accent) !important;
-}