Bugfix: Keep the button reset from overriding Tailwind utilities

The active and hover highlight disappeared from the sidebar items after the
switch to native buttons.

.btn-bare was declared outside any cascade layer while Tailwind emits its
utilities inside @layer utilities. An unlayered rule outranks every layered one
whatever its specificity, so the reset won against the utilities sitting on the
same element and its background, padding, colour, font and text-align were
applied instead of theirs. Moving the rule into the components layer, which the
generated stylesheet orders before utilities, restores the intended precedence.

The sidebar was the visible symptom, but the same reset was quietly beating
utilities on all twelve elements using it: padding on the upload button and the
slot cards, background and border on the interview process card, colour and
weight on the login and registration links, alignment in the document dialog.

Confirmed from the compiled stylesheet rather than by eye: .btn-bare now resolves
inside the components layer while .bg-primary-hover-outlined stays in utilities.

Added a guard on the declaration, since nothing else can catch this. The class is
applied either way, so a component test still passes while the styling is gone,
and the failure is only visible on screen. The guard was checked to fail with the
rule moved back out of the layer.

Verified: 2028 client tests, typecheck, eslint with no errors, a11y lint, the
production build and prettier.

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

Author: az108

src/main/webapp/content/scss/global.scss

@@ -11,17 +11,24 @@
 
 /* Visual reset for native <button> elements used purely as clickable containers
    (cards, list rows, icon triggers). Strips default chrome so they inherit
-   surrounding typography and layout, while keeping their accessibility benefits. */
-.btn-bare {
-  appearance: none;
-  background: transparent;
-  border: 0;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  text-align: inherit;
-  cursor: pointer;
+   surrounding typography and layout, while keeping their accessibility benefits.
+
+   Declared in the components layer on purpose. Unlayered rules outrank every layered
+   one no matter their specificity, so leaving this outside a layer would let the reset
+   beat the Tailwind utilities on the same element and silently drop their background,
+   padding and colour. The components layer sits before utilities, so utilities win. */
+@layer components {
+  .btn-bare {
+    appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    text-align: inherit;
+    cursor: pointer;
+  }
 }
 
 /* -------------------------------

src/test/webapp/app/shared/styles/btn-bare-layer.spec.ts

@@ -0,0 +1,20 @@
+import { readFileSync } from 'node:fs';
+import { describe, it, expect } from 'vitest';
+
+/**
+ * `.btn-bare` resets native button chrome on elements that also carry Tailwind utilities for
+ * background, padding, colour and alignment. Unlayered rules outrank every layered one regardless
+ * of specificity, so declaring it outside a layer makes the reset beat those utilities and silently
+ * strips the styling from every element using it. Keeping it in the components layer, which sits
+ * before utilities, is what lets the utilities win.
+ */
+describe('btn-bare global style', () => {
+  const globalScss = readFileSync('src/main/webapp/content/scss/global.scss', 'utf8');
+
+  it('should declare btn-bare inside the components layer so utilities can override it', () => {
+    const componentsLayer = /@layer\s+components\s*\{([\s\S]*?)\n\}/.exec(globalScss);
+
+    expect(componentsLayer).not.toBeNull();
+    expect(componentsLayer?.[1]).toContain('.btn-bare');
+  });
+});