Replace the two undefined variables that had crept in:
- var(--admin-border) → #555 (in .log-output border)
- var(--admin-text-muted) → #969696 (inline style on log toolbar label,
in both system.php and system-fragment.php)
Revert the incorrect intermediate attempt that mapped dark-UI hex values
to light-theme tokens (--bg-primary: #fff, --border-primary: #ddd, etc.)
and also revert the .admin-body override block that was added to
variables.css — variables.css is shared and must not have per-component
overrides.
All remaining var() calls in system.css now reference tokens that exist
in variables.css:
--accent-primary, --accent-green, --error, --warning, --success,
--text-tertiary
The dark surface colours (#1a1a1a, #242424, #0d0d0d, #555, #969696, etc.)
stay as literal hex values, consistent with how admin.css handles them.
Add system-fragment.php — a thin authenticated endpoint that returns only
the tab-panel HTML (toolbar + meta + log/nginx-config output) for a given
?tab=&n= combination. No page shell, no status section, no DB queries.
system.php changes:
- Tab <a> elements gain data-tab= attributes used by JS to identify the
target without parsing hrefs.
- Tab panel content wrapped in <div id=sys-tab-panel data-tab= data-n=>
which JS uses as both the swap target and its own state store.
- JS rewritten: tab clicks and lines-select changes call loadPanel()
which fetch()es system-fragment.php, swaps innerHTML, updates active
tab ARIA attributes, and pushes state via history.pushState.
- Browser back/forward handled via popstate listener.
- bindPanelControls() re-wires the lines-select and copy-to-clipboard
button after every innerHTML swap (event delegation not feasible here
because log-output is replaced wholesale).
- fetch() failure falls back to window.location.href (full page load).
- Tabs without JS still work: <a href> links go to system.php?tab=…
as before.
system-fragment.php:
- Requires AdminAuth::isAuthenticated(); returns 403 on failure.
- Validates tab and n params against the same whitelist as system.php.
- All helper functions namespaced with frag_ prefix to avoid redeclaration
if PHP ever includes both files in the same process.
- Renders identical HTML to the corresponding section in system.php.
system.css:
- #sys-tab-panel gets min-height:8rem and position:relative to prevent
layout jump during fetch.
- .sys-panel-loading: opacity 0.4 + pointer-events:none + subtle
diagonal-stripe ::after overlay with shimmer animation.
