css: centralise semantic element baseline styles in common.css

TODO.md

@@ -8,3 +8,16 @@
 - [x] Redirect legacy URLs (acces-etudiante.php, file-access.php, system.php) with 301
 - [x] Update action redirects to point to new pages
 - [x] Update admin nav header (merged 3 items → 2)
+
+## CSS refactor
+
+- [x] Move semantic HTML element baseline styles into common.css
+  - `fieldset` (background, border, padding, radius)
+  - `legend` (font, weight, color, transform)
+  - `small` (size, color, display, margin)
+  - `table`, `th`, `td` (collapse, sizing, spacing)
+  - `dialog` + `::backdrop`
+  - `details > summary`
+- [x] Remove duplicated rules from admin.css, form.css, system.css, file-access.css
+- [x] Fix file-access.css to use real design tokens (was using undefined --border, --surface, --accent, etc.)
+- [x] Remove redundant @import url("./variables.css") from admin.css, system.css, file-access.css

app/public/assets/css/admin.css

@@ -2,8 +2,6 @@
    ADMIN SECTION
    ============================================================ */
 
-@import url("./variables.css");
-
 /* ── Layout ────────────────────────────────────────────────────────────── */
 .admin-body {
     display: flex;
@@ -343,28 +341,11 @@
 }
 
 /* ── Table ──────────────────────────────────────────────────────────────── */
-.admin-body table {
+/* Base table/th/td styles live in common.css */
-    width: 100%;
-    border-collapse: collapse;
-    font-size: var(--step--1);
-}
-
 .admin-body main > table {
     margin-top: var(--space-m);
 }
 
-.admin-body table th {
-    text-align: left;
-    font-size: var(--step--2);
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    padding: var(--space-3xs) var(--space-xs);
-    border-bottom: 1px solid var(--border-primary);
-    color: var(--text-secondary);
-    font-weight: 400;
-    white-space: nowrap;
-}
-
 /* Sortable column headers */
 .admin-sort-link {
     color: inherit;
@@ -379,12 +360,6 @@
     color: var(--accent-primary);
 }
 
-.admin-body table td {
-    padding: var(--space-2xs) var(--space-xs);
-    border-bottom: 1px solid var(--border-primary);
-    vertical-align: top;
-}
-
 .admin-body table tr:hover td {
     background: var(--bg-secondary);
 }
@@ -863,19 +838,10 @@
 }
 
 /* ── Dialog ───────────────────────────────────────────────────────────── */
+/* Base dialog/::backdrop styles live in common.css */
 .admin-dialog {
-    border: 1px solid var(--border-primary);
-    border-radius: 6px;
-    background: var(--bg-primary);
-    color: var(--text-primary);
-    padding: 0;
     max-width: 680px;
     width: 100%;
-    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
-}
-
-.admin-dialog::backdrop {
-    background: rgba(0,0,0,0.45);
 }
 
 .admin-dialog__header {
@@ -990,19 +956,12 @@
 }
 
 .param-form fieldset {
-    border: 1px solid var(--border-primary);
-    border-radius: 4px;
-    padding: var(--space-m);
-    background: var(--bg-secondary);
     display: flex;
     flex-direction: column;
     gap: var(--space-xs);
 }
 
 .param-form legend {
-    font-weight: 600;
-    font-size: var(--step--1);
-    color: var(--text-secondary);
     padding: 0 var(--space-xs);
 }
 
@@ -1161,16 +1120,11 @@
 }
 
 .param-danger-zone {
-    border: 1px solid var(--danger-border-muted);
+    border-color: var(--danger-border-muted);
-    border-radius: 4px;
-    padding: var(--space-m);
     margin-bottom: var(--space-m);
-    background: var(--bg-secondary);
 }
 
 .param-danger-zone legend {
-    width: auto;
-    font-weight: 600;
     color: var(--error);
     font-size: var(--step-0);
     padding: 0 var(--space-xs);
@@ -1188,16 +1142,10 @@
 
 /* ── Export zone (maintenance section) ───────────────────────────────── */
 .param-export-zone {
-    border: 1px solid var(--border-primary);
-    border-radius: 4px;
-    padding: var(--space-m);
     margin-bottom: var(--space-m);
-    background: var(--bg-secondary);
 }
 
 .param-export-zone legend {
-    width: auto;
-    font-weight: 600;
     font-size: var(--step-0);
     padding: 0 var(--space-xs);
 }
@@ -1323,16 +1271,7 @@
     -webkit-appearance: none;
     appearance: none;
 }
-.param-fieldset-inline {
-    border: 1px solid var(--border-primary);
-    border-radius: 4px;
-    padding: var(--space-m);
-    background: var(--bg-secondary);
-}
 .param-fieldset-inline legend {
-    font-weight: 600;
-    font-size: var(--step--1);
-    color: var(--text-secondary);
     padding: 0 var(--space-xs);
 }
 

app/public/assets/css/common.css

@@ -228,6 +228,76 @@ main {
   }
 }
 
+/* ============================================================
+   SEMANTIC HTML ELEMENTS — baseline styling shared everywhere
+   ============================================================ */
+
 fieldset {
-  background: unset;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-primary);
+  border-radius: 4px;
+  padding: var(--space-m);
+  margin: 0;
+}
+
+legend {
+  font-size: var(--step--1);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-secondary);
+  padding: 0 var(--space-2xs);
+}
+
+small {
+  font-size: var(--step--2);
+  color: var(--text-secondary);
+  display: block;
+  margin-top: var(--space-3xs);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--step--1);
+}
+
+th {
+  text-align: left;
+  font-size: var(--step--2);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: var(--space-3xs) var(--space-xs);
+  border-bottom: 1px solid var(--border-primary);
+  color: var(--text-secondary);
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+td {
+  padding: var(--space-2xs) var(--space-xs);
+  border-bottom: 1px solid var(--border-primary);
+  vertical-align: top;
+}
+
+dialog {
+  border: 1px solid var(--border-primary);
+  border-radius: 6px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  padding: 0;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+}
+
+dialog::backdrop {
+  background: rgba(0, 0, 0, 0.45);
+}
+
+details > summary {
+  cursor: pointer;
+  list-style: none;
+}
+
+details > summary::-webkit-details-marker {
+  display: none;
 }

app/public/assets/css/file-access.css

@@ -2,8 +2,6 @@
    FILE ACCESS REQUESTS — ADMIN PAGE
    ============================================================ */
 
-@import url("./variables.css");
-
 .access-req-stats {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
@@ -16,8 +14,8 @@
     flex-direction: column;
     align-items: center;
     padding: var(--space-m);
-    background: var(--surface);
+    background: var(--bg-secondary);
-    border: 1px solid var(--border);
+    border: 1px solid var(--border-primary);
     border-radius: 8px;
 }
 
@@ -39,7 +37,7 @@
     display: flex;
     gap: var(--space-xs);
     margin-bottom: var(--space-l);
-    border-bottom: 2px solid var(--border);
+    border-bottom: 2px solid var(--border-primary);
 }
 
 .access-req-tab {
@@ -56,15 +54,15 @@
 }
 
 .access-req-tab.active {
-    color: var(--accent);
+    color: var(--accent-primary);
-    border-bottom-color: var(--accent);
+    border-bottom-color: var(--accent-primary);
     font-weight: 600;
 }
 
 /* Empty state */
 .access-req-empty {
-    background: var(--surface);
+    background: var(--bg-secondary);
-    border: 1px solid var(--border);
+    border: 1px solid var(--border-primary);
     border-radius: 8px;
     padding: var(--space-xl);
     text-align: center;
@@ -79,8 +77,8 @@
 }
 
 .access-req-card {
-    background: var(--surface);
+    background: var(--bg-secondary);
-    border: 1px solid var(--border);
+    border: 1px solid var(--border-primary);
     border-radius: 8px;
     padding: var(--space-m);
     transition: box-shadow 0.2s;
@@ -161,7 +159,7 @@
 }
 
 .access-req-card__info a {
-    color: var(--accent);
+    color: var(--accent-primary);
     text-decoration: none;
 }
 
@@ -171,7 +169,7 @@
 
 .access-req-card__justification,
 .access-req-card__admin-notes {
-    background: var(--background);
+    background: var(--bg-primary);
     padding: var(--space-s);
     border-radius: 4px;
     font-size: var(--step--1);
@@ -208,12 +206,12 @@
 }
 
 .access-req-btn--approve {
-    background: var(--accent);
+    background: var(--accent-primary);
-    color: white;
+    color: var(--accent-foreground);
 }
 
 .access-req-btn--approve:hover {
-    background: var(--accent-dark);
+    background: var(--accent-secondary);
 }
 
 .access-req-btn--reject {
@@ -237,14 +235,14 @@
 
 .access-req-pagination__link {
     padding: var(--space-2xs) var(--space-s);
-    color: var(--accent);
+    color: var(--accent-primary);
     text-decoration: none;
     font-weight: 600;
     transition: color 0.2s;
 }
 
 .access-req-pagination__link:hover {
-    color: var(--accent-dark);
+    color: var(--accent-secondary);
     text-decoration: underline;
 }
 
@@ -253,15 +251,15 @@
     color: var(--text-secondary);
 }
 
-/* Dialog enhancements */
+/* Dialog textarea/label enhancements */
 .admin-dialog textarea {
     width: 100%;
     font-family: inherit;
     font-size: var(--step--1);
     padding: var(--space-2xs);
-    border: 1px solid var(--border);
+    border: 1px solid var(--border-primary);
     border-radius: 4px;
-    background: var(--background);
+    background: var(--bg-primary);
     color: var(--text-primary);
     resize: vertical;
     margin: var(--space-s) 0;
@@ -272,11 +270,3 @@
     font-weight: 600;
     margin-bottom: var(--space-3xs);
 }
-
-.admin-btn--danger {
-    background: #e53e3e !important;
-}
-
-.admin-btn--danger:hover {
-    background: #c53030 !important;
-}

app/public/assets/css/form.css

@@ -151,13 +151,7 @@ label:has(+ div > input:required)::after {
     margin-top: var(--space-2xs);
 }
 
-.admin-body form small,
+/* small base styles live in common.css */
-.student-body form small {
-    font-size: var(--step--2);
-    color: var(--text-secondary);
-    margin-top: var(--space-3xs);
-    display: block;
-}
 
 /* ── Checkbox groups (languages, formats) ───────────────────────────────── */
 .admin-body fieldset.admin-checkbox-group,
@@ -166,6 +160,7 @@ label:has(+ div > input:required)::after {
     padding: 0;
     margin: 0;
     background: transparent;
+    border-radius: 0;
 }
 
 .admin-body fieldset.admin-checkbox-group > ul,
@@ -199,22 +194,10 @@ label:has(+ div > input:required)::after {
 }
 
 /* ── Fieldsets & legends ────────────────────────────────────────────────── */
+/* Base fieldset/legend styles live in common.css */
 .admin-body fieldset,
 .student-body fieldset {
-    border: 1px solid var(--border-primary);
-    padding: var(--space-s) var(--space-m);
     margin: var(--space-2xs) 0 var(--space-s);
-    background: var(--bg-secondary);
-}
-
-.admin-body legend,
-.student-body legend {
-    font-size: var(--step--1);
-    font-weight: 600;
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    color: var(--text-secondary);
-    padding: 0 var(--space-2xs);
 }
 
 /* ── Form group (checkbox inline inside .admin-form) ────────────────────── */

app/public/assets/css/system.css

@@ -2,8 +2,6 @@
    SYSTEM PAGE
    ============================================================ */
 
-@import url("./variables.css");
-
 /* ── System page tabs ──────────────────────────────────────────────────── */
 .sys-tabs {
     display: flex;