/*
File: /public_html/admin/css/admin-cyberpunk.css
Purpose: High‑Tech "Top‑Secret/Spy" cyberpunk visual layer for Brit‑Buy Admin
Scope: Applies only when has class="theme-cyberpunk"
Version: 2.0.0
Date: 2025-09-15
─────────────────────────────────────────────────────────────────────────────
INDEX
01) Tokens (Spy Theme)
02) Global Base & Background (grid, noise, scan)
03) Typography & Links (HUD)
04) Surfaces & HUD Corners (panels, cards, toolbars, sidebar)
05) Forms & Inputs (precision underline)
06) Buttons (stealth outline → armed)
07) Tables (intel list)
08) Chips/Badges (status codes)
09) Alerts/Toasts (classified ribbons)
10) Modals/Overlays (secure glass)
11) Pagination (locator)
12) Utilities (glitch, redacted, watermark)
13) Animations (scan, decrypt, glitch)
14) A11y & Fallbacks
─────────────────────────────────────────────────────────────────────────────
CHANGELOG
- 2.0.0 (2025-09-15): Spy aesthetic refresh. Monochrome + neon‑green/cyan, HUD corners,
scanlines, redacted utility, stealth buttons.
- 1.0.0 (2025-09-15): Initial neon theme.
*/
/* ────────────────────────────────────────────────────────────────────────────
01) Tokens (Spy Theme)
─────────────────────────────────────────────────────────────────────────── */
body.theme-cyberpunk {
/* palette */
--sp-bg: #05070b; /* page background: near‑black */
--sp-surface: #0a0e14; /* cards/panels */
--sp-surface-2: #0a0d12; /* deeper layers */
--sp-border: #1a2130; /* subtle divider */
--sp-line: #27324a; /* hairlines */
--sp-text: #e7f0ff; /* primary text */
--sp-text-dim: #8ea2c7; /* secondary */
--sp-text-invert: #080a0e;
/* accents (stealthy, pro) */
--sp-accent: #00ff6a; /* primary neon (intel/ok) */
--sp-cyan: #00eaff; /* secondary neon (action) */
--sp-amber: #ffd24a; /* warn */
--sp-red: #ff4569; /* danger */
--sp-blue: #2bb0ff; /* info */
/* effects */
--sp-glow-a: 0 0 16px rgba(0, 255, 106, .35);
--sp-glow-b: 0 0 18px rgba(0, 234, 255, .28);
--sp-inner: 0 0 0 1px rgba(0,0,0,.45) inset, 0 0 22px rgba(0,0,0,.25) inset;
/* radii & rhythm */
--sp-radius: 12px;
--sp-pad: 14px;
--sp-gap: 10px;
--sp-speed-fast: 110ms;
--sp-speed: 240ms;
--sp-speed-slow: 1200ms;
--sp-ease: cubic-bezier(.22,.61,.36,1);
/* type */
--sp-font-ui: "Rajdhani", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Noto Sans", Arial, sans-serif;
--sp-font-mono: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
/* z-index */
--sp-z-base: 0;
--sp-z-above: 10;
--sp-z-toolbar: 50;
--sp-z-sidebar: 60;
--sp-z-dropdown: 200;
--sp-z-modal: 1000;
--sp-z-toast: 1100;
--sp-z-overlay: 900;
}
/* ────────────────────────────────────────────────────────────────────────────
02) Global Base & Background (grid, noise, scan)
─────────────────────────────────────────────────────────────────────────── */
body.theme-cyberpunk {
background:
/* cyber grid */
radial-gradient(1200px 600px at 70% -10%, rgba(0,234,255,.04), transparent 70%),
radial-gradient(1000px 500px at -20% 20%, rgba(0,255,106,.04), transparent 60%),
linear-gradient(180deg, #04060a 0%, #070a10 60%, #06080d 100%);
color: var(--sp-text);
font-family: var(--sp-font-ui);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-position: var(--cp-parallax-x, 0) var(--cp-parallax-y, 0), 0 0, 0 0;
}
/* ultra subtle scanlines */
@media (prefers-reduced-motion: no-preference) {
body.theme-cyberpunk::before {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: var(--sp-z-base);
background: repeating-linear-gradient(transparent, transparent 2px, rgba(255,255,255,.012) 3px);
mix-blend-mode: overlay;
}
}
/* optional SVG noise (safe if missing) */
body.theme-cyberpunk::after {
content: ""; position: fixed; inset: 0; pointer-events: none; z-index: var(--sp-z-base);
filter: url('#cp-noise');
}
/* Scrollbars */
.theme-cyberpunk ::-webkit-scrollbar { width: 10px; height: 10px; }
.theme-cyberpunk ::-webkit-scrollbar-track { background: rgba(255,255,255,.03); }
.theme-cyberpunk ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(0,255,106,.32), rgba(0,234,255,.22)); border-radius: 10px; }
.theme-cyberpunk ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(0,255,106,.5), rgba(0,234,255,.38)); }
/* ────────────────────────────────────────────────────────────────────────────
03) Typography & Links (HUD)
─────────────────────────────────────────────────────────────────────────── */
.theme-cyberpunk h1, .theme-cyberpunk h2, .theme-cyberpunk h3, .theme-cyberpunk h4 { text-transform: uppercase; letter-spacing: .045em; }
.theme-cyberpunk h1 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.2rem); }
.theme-cyberpunk h2 { font-size: clamp(1.3rem, 1rem + 1.3vw, 1.7rem); }
.theme-cyberpunk h3 { font-size: 1.08rem; }
.theme-cyberpunk small { color: var(--sp-text-dim); }
.theme-cyberpunk a { color: var(--sp-cyan); text-decoration: none; }
.theme-cyberpunk a:hover { text-shadow: var(--sp-glow-b); }
.theme-cyberpunk code, .theme-cyberpunk kbd, .theme-cyberpunk pre { font-family: var(--sp-font-mono); }
.theme-cyberpunk :focus-visible { outline: 2px solid var(--sp-cyan); outline-offset: 2px; border-radius: 6px; }
/* HUD label style */
.theme-cyberpunk .hud-label { font-family: var(--sp-font-mono); letter-spacing: .08em; color: var(--sp-text-dim); text-transform: uppercase; font-size:.78rem; }
/* ────────────────────────────────────────────────────────────────────────────
04) Surfaces & HUD Corners
─────────────────────────────────────────────────────────────────────────── */
.theme-cyberpunk .panel,
.theme-cyberpunk .card,
.theme-cyberpunk .table-wrap,
.theme-cyberpunk .modal,
.theme-cyberpunk .filter-bar,
.theme-cyberpunk .toolbar {
position: relative;
background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.01)) padding-box,
linear-gradient(130deg, rgba(0,255,106,.38), rgba(0,234,255,.28)) border-box;
border: 1px solid transparent;
border-radius: var(--sp-radius);
box-shadow: var(--sp-inner), var(--sp-glow-b);
-webkit-backdrop-filter: saturate(115%) blur(6px);
backdrop-filter: saturate(115%) blur(6px);
}
/* HUD corners (decorative) */
.theme-cyberpunk .panel::before,
.theme-cyberpunk .panel::after {
content: ""; position: absolute; width: 26px; height: 26px; pointer-events:none;
border: 1px solid var(--sp-line); opacity: .7;
}
.theme-cyberpunk .panel::before { left: 6px; top: 6px; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.theme-cyberpunk .panel::after { right: 6px; bottom: 6px; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
/* Topbar */
.theme-cyberpunk .topbar { display:flex; align-items:center; gap: var(--sp-gap); background: linear-gradient(180deg, rgba(0,0,0,.32), rgba(255,255,255,.015)); border-bottom: 1px solid var(--sp-border); padding: 10px 14px; position: sticky; top: 0; z-index: var(--sp-z-toolbar); }
/* Sidebar */
.theme-cyberpunk .sidebar,
.theme-cyberpunk .admin-sidebar { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.18)); border-right: 1px solid var(--sp-border); padding: 14px; width: 260px; min-height: 100vh; position: sticky; top: 0; z-index: var(--sp-z-sidebar); transition: width var(--sp-speed-fast) var(--sp-ease), padding var(--sp-speed-fast) var(--sp-ease); }
.theme-cyberpunk .sidebar a,
.theme-cyberpunk .admin-sidebar a { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius: 10px; color: var(--sp-text-dim); }
.theme-cyberpunk .sidebar a:hover,
.theme-cyberpunk .sidebar a[aria-current="page"],
.theme-cyberpunk .sidebar .active,
.theme-cyberpunk .admin-sidebar a:hover,
.theme-cyberpunk .admin-sidebar a.active,
.theme-cyberpunk .admin-sidebar a[aria-current="page"] { color: var(--sp-text); background: rgba(0,234,255,.06); box-shadow: var(--sp-glow-b); }
/* Collapsed sidebar (desktop) → fully hidden to avoid squashing content */
.theme-cyberpunk .admin-sidebar.collapsed { display: none !important; }
/* Collapse button styling */
.theme-cyberpunk .admin-sidebar #collapseSidebarBtn {
display: inline-flex; align-items: center; justify-content: center;
margin-left: auto; margin-right: 6px; margin-bottom: 8px;
background: transparent; border: 1px solid rgba(255,255,255,.12);
color: var(--sp-text); border-radius: 8px; width: 36px; height: 32px;
cursor: pointer; transition: background var(--sp-speed) var(--sp-ease);
}
.theme-cyberpunk .admin-sidebar #collapseSidebarBtn:hover { background: rgba(255,255,255,.06); }
/* Base layout (desktop): sidebar + content side-by-side */
.theme-cyberpunk .admin-layout { display: flex; align-items: stretch; }
.theme-cyberpunk .admin-sidebar { flex: 0 0 260px; }
.theme-cyberpunk .page-content { flex: 1; min-width: 0; }
/* Ensure on desktop the sidebar never overlays content */
@media (min-width: 769px) {
.theme-cyberpunk .admin-sidebar { position: sticky; top: 0; z-index: auto; }
.theme-cyberpunk .page-content { margin-left: 0; position: relative; z-index: 1; }
}
/* Toolbars */
.theme-cyberpunk .toolbar, .theme-cyberpunk .filter-bar { display:flex; flex-wrap:wrap; align-items:center; gap: var(--sp-gap); padding: 10px; }
.theme-cyberpunk .card { padding: var(--sp-pad); }
/* ────────────────────────────────────────────────────────────────────────────
05) Forms & Inputs (precision underline)
─────────────────────────────────────────────────────────────────────────── */
.theme-cyberpunk input[type="text"],
.theme-cyberpunk input[type="number"],
.theme-cyberpunk input[type="email"],
.theme-cyberpunk input[type="password"],
.theme-cyberpunk input[type="search"],
.theme-cyberpunk select,
.theme-cyberpunk textarea {
background: var(--sp-surface);
color: var(--sp-text);
border: 1px solid var(--sp-border);
border-radius: calc(var(--sp-radius) - 6px);
padding: 10px 12px;
outline: none;
transition: border var(--sp-speed) var(--sp-ease), box-shadow var(--sp-speed) var(--sp-ease), transform var(--sp-speed-fast) var(--sp-ease);
caret-color: var(--sp-accent);
}
.theme-cyberpunk input::placeholder, .theme-cyberpunk textarea::placeholder { color: rgba(231,240,255,.45); }
.theme-cyberpunk input:focus,
.theme-cyberpunk select:focus,
.theme-cyberpunk textarea:focus { border-color: var(--sp-cyan); box-shadow: 0 0 0 2px rgba(0,234,255,.14), var(--sp-glow-b); }
.theme-cyberpunk .form-row { display:flex; flex-wrap:wrap; gap: var(--sp-gap); align-items:center; }
.theme-cyberpunk .form-row > label { color: var(--sp-text-dim); text-transform: uppercase; letter-spacing:.06em; font-size:.8rem; }
.theme-cyberpunk input[type="checkbox"], .theme-cyberpunk input[type="radio"] { accent-color: var(--sp-accent); }
.theme-cyberpunk .is-error { border-color: var(--sp-red) !important; box-shadow: 0 0 0 2px rgba(255,69,105,.14) !important; }
.theme-cyberpunk .is-warn { border-color: var(--sp-amber) !important; box-shadow: 0 0 0 2px rgba(255,210,74,.16) !important; }
.theme-cyberpunk .is-ok { border-color: var(--sp-accent) !important; box-shadow: 0 0 0 2px rgba(0,255,106,.16) !important; }
/* ────────────────────────────────────────────────────────────────────────────
06) Buttons (stealth outline → armed)
─────────────────────────────────────────────────────────────────────────── */
.theme-cyberpunk .btn { position: relative; isolation: isolate; padding: 10px 14px; border-radius: calc(var(--sp-radius) - 6px); border: 1px solid var(--sp-border); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); color: var(--sp-text); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; transition: transform var(--sp-speed-fast) var(--sp-ease), box-shadow var(--sp-speed) var(--sp-ease), border var(--sp-speed) var(--sp-ease), opacity var(--sp-speed) var(--sp-ease); will-change: transform; cursor: pointer; }
.theme-cyberpunk .btn:hover { transform: translateY(-1px); border-color: var(--sp-accent); box-shadow: var(--sp-glow-a); }
.theme-cyberpunk .btn:active { transform: translateY(0); }
.theme-cyberpunk .btn[disabled], .theme-cyberpunk .btn.disabled { opacity: .6; cursor: not-allowed; }
.theme-cyberpunk .btn.primary { background: linear-gradient(180deg, rgba(0,255,106,.16), rgba(0,255,106,.05)); border-color: rgba(0,255,106,.36); }
.theme-cyberpunk .btn.secondary { background: linear-gradient(180deg, rgba(0,234,255,.16), rgba(0,234,255,.05)); border-color: rgba(0,234,255,.36); }
.theme-cyberpunk .btn.danger { background: linear-gradient(180deg, rgba(255,69,105,.18), rgba(255,69,105,.06)); border-color: rgba(255,69,105,.4); }
.theme-cyberpunk .btn.warning { background: linear-gradient(180deg, rgba(255,210,74,.18), rgba(255,210,74,.06)); border-color: rgba(255,210,74,.4); }
.theme-cyberpunk .btn.sm { padding: 6px 10px; font-size: .8rem; }
.theme-cyberpunk .btn.lg { padding: 12px 18px; font-size: 1rem; }
/* aim‑reticle hover (optional, subtle) */
@media (prefers-reduced-motion: no-preference) {
.theme-cyberpunk .btn:hover { box-shadow: var(--sp-glow-a), 0 0 0 2px rgba(0,255,106,.12) inset; }
}
/* ────────────────────────────────────────────────────────────────────────────
07) Tables (intel list)
─────────────────────────────────────────────────────────────────────────── */
.theme-cyberpunk table { width: 100%; border-collapse: collapse; }
.theme-cyberpunk thead th { background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(255,255,255,.02)); text-transform: uppercase; letter-spacing: .05em; font-size: .84rem; border-bottom: 1px solid var(--sp-border); position: sticky; top: 0; z-index: 1; }
.theme-cyberpunk td, .theme-cyberpunk th { padding: 10px 12px; }
.theme-cyberpunk tbody tr { transition: background var(--sp-speed) var(--sp-ease); }
.theme-cyberpunk tbody tr:hover { background: rgba(0,234,255,.04); }
.theme-cyberpunk tbody tr + tr td { border-top: 1px dashed rgba(255,255,255,.055); }
.theme-cyberpunk tbody tr:nth-child(odd) { background: rgba(255,255,255,.01); }
.theme-cyberpunk td[contenteditable="true"] { box-shadow: inset 0 0 0 1px rgba(0,234,255,.22); }
/* row selection helper */
.theme-cyberpunk .row-selected td { background: rgba(0,255,106,.04) !important; box-shadow: inset 0 0 0 1px rgba(0,255,106,.18); }
/* ────────────────────────────────────────────────────────────────────────────
08) Chips/Badges (status codes)
─────────────────────────────────────────────────────────────────────────── */
.theme-cyberpunk .chip { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font: 600 .74rem/1 var(--sp-font-ui); border:1px solid var(--sp-border); background: var(--sp-surface); }
.theme-cyberpunk .chip.ok { color: var(--sp-accent); border-color: rgba(0,255,106,.36); box-shadow: 0 0 12px rgba(0,255,106,.2); }
.theme-cyberpunk .chip.warn { color: var(--sp-amber); border-color: rgba(255,210,74,.4); box-shadow: 0 0 12px rgba(255,210,74,.2); }
.theme-cyberpunk .chip.err { color: var(--sp-red); border-color: rgba(255,69,105,.4); box-shadow: 0 0 12px rgba(255,69,105,.2); }
.theme-cyberpunk .chip.info { color: var(--sp-blue); border-color: rgba(43,176,255,.35); box-shadow: 0 0 12px rgba(43,176,255,.2); }
/* ────────────────────────────────────────────────────────────────────────────
09) Alerts/Toasts (classified ribbons)
─────────────────────────────────────────────────────────────────────────── */
.theme-cyberpunk .alert, .theme-cyberpunk .toast { background: var(--sp-surface); border: 1px solid var(--sp-border); box-shadow: var(--sp-inner), var(--sp-glow-b); border-radius: var(--sp-radius); padding: 12px 14px; display:flex; align-items:center; gap:10px; color: var(--sp-text); }
.theme-cyberpunk .toast { position: fixed; right: 16px; bottom: 16px; z-index: var(--sp-z-toast); }
/* classified ribbon */
.theme-cyberpunk .alert.classified { position: relative; overflow: hidden; }
.theme-cyberpunk .alert.classified::after { content: "CLASSIFIED"; position: absolute; top: 10px; right: -28px; transform: rotate(12deg); font: 700 .78rem/1 var(--sp-font-mono); letter-spacing:.2em; color: var(--sp-text-invert); background: var(--sp-accent); padding: 4px 10px; box-shadow: var(--sp-glow-a); }
/* ────────────────────────────────────────────────────────────────────────────
10) Modals/Overlays (secure glass)
─────────────────────────────────────────────────────────────────────────── */
.theme-cyberpunk .modal-backdrop, .theme-cyberpunk .overlay { display: none; position: fixed; inset: 0; z-index: var(--sp-z-overlay); background: rgba(4,6,10,.58); -webkit-backdrop-filter: blur(4px) saturate(120%); backdrop-filter: blur(4px) saturate(120%); }
.theme-cyberpunk .modal-backdrop.active, .theme-cyberpunk .overlay.active { display: flex; }
.theme-cyberpunk .modal {
position: fixed; z-index: var(--sp-z-modal);
left: 50%; top: 50%; transform: translate(-50%, -50%);
width: min(96vw, 980px);
max-height: 90vh;
overflow: auto;
/* Remove backdrop blur on modal itself to keep text crisp */
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
/* Products edit modal backdrop (hidden by default, shown when .active) */
.theme-cyberpunk .modal-bg { display: none; position: fixed; inset: 0; z-index: var(--sp-z-overlay); background: rgba(4,6,10,.58); -webkit-backdrop-filter: blur(4px) saturate(120%); backdrop-filter: blur(4px) saturate(120%); }
.theme-cyberpunk .modal-bg.active { display: block; }
/* Edit modal image preview constraints */
.theme-cyberpunk .modal .preview-image {
display: block;
max-width: 100%;
height: auto;
max-height: 280px;
border-radius: 10px;
}
/* Drop-zone content spacing inside modal */
.theme-cyberpunk .drop-zone .drop-zone-content { text-align: center; }
.theme-cyberpunk .drop-zone .subtext { opacity: .75; font-size: .92em; }
@media (max-width: 768px) {
.theme-cyberpunk .modal { width: 96vw; max-height: 92vh; }
}
/* Thumbnail strip for quick image previews */
.theme-cyberpunk .preview-strip {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.theme-cyberpunk .preview-strip img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 8px;
}
.theme-cyberpunk .modal .modal-header { border-bottom: 1px solid var(--sp-border); text-transform: uppercase; letter-spacing: .06em; padding-bottom: 8px; margin-bottom: 10px; }
.theme-cyberpunk .modal .modal-actions { display:flex; justify-content:flex-end; gap:var(--sp-gap); }
.theme-cyberpunk dialog[open] { display:block; }
/* ────────────────────────────────────────────────────────────────────────────
11) Pagination (locator)
─────────────────────────────────────────────────────────────────────────── */
.theme-cyberpunk .pagination { display:flex; gap:6px; align-items:center; }
.theme-cyberpunk .pagination .page { min-width: 34px; text-align:center; padding:8px 10px; border:1px solid var(--sp-border); border-radius:10px; background: var(--sp-surface); cursor:pointer; user-select:none; transition: box-shadow var(--sp-speed) var(--sp-ease), border var(--sp-speed) var(--sp-ease), transform var(--sp-speed-fast) var(--sp-ease); }
.theme-cyberpunk .pagination .page:hover { box-shadow: var(--sp-glow-b); border-color: var(--sp-cyan); transform: translateY(-1px); }
.theme-cyberpunk .pagination .page.active { color: var(--sp-text); border-color: var(--sp-accent); box-shadow: 0 0 0 2px rgba(0,255,106,.2); }
/* ────────────────────────────────────────────────────────────────────────────
12) Utilities (glitch, redacted, watermark)
─────────────────────────────────────────────────────────────────────────── */
/* subtle glitch for headings */
.theme-cyberpunk .glitch { position: relative; display:inline-block; text-shadow: 0 0 1px rgba(255,255,255,.2); }
.theme-cyberpunk .glitch::before, .theme-cyberpunk .glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width:100%; clip-path: inset(0 0 0 0); opacity:.8; pointer-events:none; mix-blend-mode:screen; }
@media (prefers-reduced-motion: no-preference) {
.theme-cyberpunk .glitch::before { color: var(--sp-cyan); transform: translate(1px,0); animation: spGlitch 3s infinite steps(20) alternate-reverse; }
.theme-cyberpunk .glitch::after { color: var(--sp-accent); transform: translate(-1px,0); animation: spGlitch 2.7s infinite steps(20) alternate; }
}
/* redacted utility */
.theme-cyberpunk .redacted { color: transparent !important; position: relative; }
.theme-cyberpunk .redacted::before { content: ""; position: absolute; inset: .1em 0 .2em 0; background: repeating-linear-gradient(90deg, #0b0f16 0 6px, #0d121a 6px 12px); border-radius: 4px; }
@media (prefers-reduced-motion: no-preference) { .theme-cyberpunk .redacted::before { animation: spFlicker 2.4s infinite steps(40); } }
/* watermark (page‑level) */
.theme-cyberpunk .watermark { position: fixed; inset: 0; pointer-events: none; z-index: var(--sp-z-base); background-image: repeating-linear-gradient(45deg, rgba(0,234,255,.02) 0 40px, rgba(0,255,106,.02) 40px 80px); }
/* selection */
.theme-cyberpunk ::selection { background: rgba(0,234,255,.35); color: var(--sp-text-invert); }
/* ────────────────────────────────────────────────────────────────────────────
13) Animations (scan, decrypt, glitch)
─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
@keyframes spScan { 0% { transform: translateY(-100%); opacity: 0; } 10% { opacity: .22; } 100% { transform: translateY(100%); opacity: 0; } }
@keyframes spDecrypt { 0% { filter: blur(6px); letter-spacing: .4em; opacity:.4; } 100% { filter: blur(0); letter-spacing: .02em; opacity:1; } }
@keyframes spFlicker { 0%,19%,21%,23%,80%,100% { opacity: 1 } 20%,22% { opacity: .5 } 81% { opacity:.7 } }
@keyframes spGlitch { 0% { clip-path: inset(0 0 0 0); } 1.5%, 2.5% { clip-path: inset(6% 0 58% 0); transform: skew(.25deg); } 3.5% { clip-path: inset(78% 0 6% 0); transform: skew(-.25deg); } 6% { clip-path: inset(0 0 0 0); } }
}
/* Button ripple child safety (if JS adds ) */
.theme-cyberpunk .btn > span { pointer-events:none; }
/* panel scanline helper (add .cp-scan to a .panel for moving scan aura) */
.theme-cyberpunk .cp-scan { overflow:hidden; }
.theme-cyberpunk .cp-scan::after { content:""; position:absolute; left:0; right:0; top:-100%; height:140%; background: linear-gradient(180deg, rgba(0,234,255,0) 0%, rgba(0,234,255,.06) 10%, rgba(0,234,255,0) 20%); pointer-events:none; }
@media (prefers-reduced-motion: no-preference) { .theme-cyberpunk .cp-scan::after { animation: spScan 6s linear infinite; } }
/* ────────────────────────────────────────────────────────────────────────────
14) A11y & Fallbacks
─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) { body.theme-cyberpunk::before { display: none; } }
@media (prefers-contrast: more) {
.theme-cyberpunk .panel,
.theme-cyberpunk .card,
.theme-cyberpunk .table-wrap,
.theme-cyberpunk .modal,
.theme-cyberpunk .filter-bar,
.theme-cyberpunk .toolbar { border-color: #3a4464; box-shadow: none; }
.theme-cyberpunk a { text-decoration: underline; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.theme-cyberpunk .panel,
.theme-cyberpunk .card,
.theme-cyberpunk .table-wrap,
.theme-cyberpunk .modal,
.theme-cyberpunk .filter-bar,
.theme-cyberpunk .toolbar { background: var(--sp-surface); }
}
/* ────────────────────────────────────────────────────────────────────────────
15) Mobile (≤ 768px)
─────────────────────────────────────────────────────────────────────────── */
/* Hide the explicit page-level sidebar toggle by default (desktop) */
.theme-cyberpunk .sidebar-toggle { display: none; }
@media (max-width: 768px) {
/* Layout stacks; sidebar becomes overlay */
.theme-cyberpunk .admin-layout { display: flex; flex-direction: column; }
.theme-cyberpunk .admin-sidebar {
position: fixed; left: 0; top: 0; bottom: 0; min-height: 100vh;
width: 78%; max-width: 320px; transform: translateX(-100%);
background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.28));
border-right: 1px solid var(--sp-border);
z-index: calc(var(--sp-z-sidebar) + 100);
}
.theme-cyberpunk .admin-sidebar.active { transform: translateX(0); }
/* Mobile menu button */
.theme-cyberpunk .sidebar-toggle {
display: inline-flex;
position: fixed; left: 12px; top: 12px; z-index: calc(var(--sp-z-sidebar) + 120);
appearance: none; background: rgba(5,7,11,.85);
border: 1px solid var(--sp-border); color: var(--sp-text);
border-radius: 10px; padding: .45em .7em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.theme-cyberpunk .page-content { padding: 16px; margin-top: 48px; }
/* Tables → cards */
.theme-cyberpunk table,
.theme-cyberpunk thead,
.theme-cyberpunk tbody,
.theme-cyberpunk tr,
.theme-cyberpunk td,
.theme-cyberpunk th { display: block; width: 100%; }
.theme-cyberpunk thead { display: none; }
.theme-cyberpunk tbody tr { background: var(--sp-surface); border-radius: 10px; margin: 10px 0; padding: 10px; }
.theme-cyberpunk td { padding: 8px 0; }
.theme-cyberpunk td::before { content: attr(data-label); display: block; color: var(--sp-text-dim); font-weight: 700; margin-bottom: 4px; }
/* Grid helpers */
.theme-cyberpunk .grid.cols-2,
.theme-cyberpunk .grid.cols-3,
.theme-cyberpunk .grid.cols-4 { grid-template-columns: 1fr; }
}