/* ═══════════════════════════════════════════════════════════ X-FIELD DESIGN SYSTEM — overlay for HiggsLand Fonts: Inter (body) · Space Grotesk (headings) ═══════════════════════════════════════════════════════════ */ /* ── Design tokens: dark (default) ── */ :root { --xf-bg: #0e0b1d; --xf-surface: #16122c; --xf-s2: #1f1a3d; --xf-s3: #2d2552; --xf-accent: #6c5fc7; --xf-accent2: #9b8ee8; --xf-accent3: #5448a8; --xf-border: #261f49; --xf-bs: #3a2f6b; --xf-text: #f0ecff; --xf-t2: #b5acd9; --xf-t3: #7a719e; --xf-sidebar-w: 220px; --xf-topbar-h: 0px; /* topbar removed */ } /* ── Design tokens: light ── */ html[data-theme="light"] { --xf-bg: #f8f6ff; --xf-surface: #ffffff; --xf-s2: #ede9fc; --xf-s3: #d4ccf5; --xf-accent: #6c5fc7; --xf-accent2: #a89ce8; --xf-accent3: #c4b8f5; --xf-border: #e4dff5; --xf-bs: #c8bfea; --xf-text: #1a1825; --xf-t2: #5a5470; --xf-t3: #9a93b8; } /* ── Typography (global) ── */ body { font-family: 'Inter', 'DM Sans', 'Poppins', sans-serif !important; background: var(--xf-bg) !important; color: var(--xf-text) !important; } /* ── Layout shell — only when the app layout is mounted ── */ /* Layout.jsx adds this class to on mount, removes on unmount */ body.xf-layout { overflow: hidden !important; height: 100%; } body.xf-layout #root { display: flex; height: 100vh; overflow: hidden; } /* Kill the old Bootstrap/NiceAdmin header inside the app layout */ body.xf-layout #header { display: none !important; } /* ══════════════════════════════════════════════════════════ SIDEBAR ══════════════════════════════════════════════════════════ */ .xf-sidebar { width: var(--xf-sidebar-w) !important; background: var(--xf-surface) !important; border-right: 1px solid var(--xf-border) !important; display: flex !important; flex-direction: column; flex-shrink: 0; height: 100vh; overflow: hidden !important; position: relative !important; left: auto !important; top: auto !important; bottom: auto !important; margin: 0 !important; padding: 0 !important; z-index: 100; box-shadow: none !important; transition: transform 0.25s ease; } .xf-logo-row { padding: 20px 18px 16px; border-bottom: 1px solid var(--xf-border); display: flex; align-items: center; gap: 10px; cursor: pointer; flex-shrink: 0; text-decoration: none; } .xf-logo-row:hover { text-decoration: none; } .xf-logo-mark { width: 32px; height: 32px; background: var(--xf-accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s; } .xf-logo-mark svg { width: 16px; height: 16px; fill: #fff; } .xf-logo-name { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -0.4px; color: var(--xf-text); } /* Nav scrollable area */ .xf-nav { flex: 1; overflow-y: auto; padding: 10px 10px 6px; } .xf-nav::-webkit-scrollbar { width: 3px; } .xf-nav::-webkit-scrollbar-thumb { background: var(--xf-bs); border-radius: 3px; } .xf-nav-lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.85px; text-transform: uppercase; color: var(--xf-t3); padding: 14px 8px 4px; user-select: none; } /* Nav item */ .xf-ni { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px; cursor: pointer; color: var(--xf-t2); font-size: 13px; text-decoration: none !important; transition: background 0.15s, color 0.15s; user-select: none; border: none; background: none; width: 100%; text-align: left; font-family: inherit; line-height: 1.4; } .xf-ni:hover { background: var(--xf-s2); color: var(--xf-text); } .xf-ni.xf-ni-sec { font-weight: 500; color: var(--xf-text); } .xf-ni.active, .xf-ni.xf-ni-active { background: var(--xf-accent) !important; color: #fff !important; } .xf-ni svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.65; stroke: currentColor; fill: none; stroke-width: 1.5; } .xf-ni.xf-ni-sec > svg, .xf-ni.active > svg, .xf-ni.xf-ni-active > svg { opacity: 1; } .xf-badge { margin-left: auto; font-size: 9px; background: var(--xf-s2); color: var(--xf-accent); padding: 2px 6px; border-radius: 10px; font-weight: 700; letter-spacing: 0.3px; flex-shrink: 0; } .xf-ni.active .xf-badge, .xf-ni.xf-ni-active .xf-badge { background: rgba(255,255,255,.22); color: #fff; } /* Sidebar footer */ .xf-sfoot { padding: 12px 14px; border-top: 1px solid var(--xf-border); flex-shrink: 0; } .xf-sfoot-user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; text-decoration: none; cursor: pointer; } .xf-sfoot-user:hover .xf-user-name { color: var(--xf-accent2); } .xf-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--xf-accent); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .xf-avatar img { width: 100%; height: 100%; object-fit: cover; } .xf-user-info { min-width: 0; flex: 1; } .xf-user-name { font-size: 12px; font-weight: 500; color: var(--xf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.15s; } .xf-user-bal { font-size: 11px; color: var(--xf-t3); margin-top: 1px; } .xf-sfoot-controls { display: flex; align-items: center; gap: 6px; } .xf-ctrl-btn { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--xf-border); background: none; color: var(--xf-t2); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; transition: border-color 0.15s, color 0.15s, background 0.15s; flex-shrink: 0; } .xf-ctrl-btn:hover { border-color: var(--xf-bs); color: var(--xf-text); background: var(--xf-s2); } .xf-ctrl-btn i { line-height: 1; } .xf-lang-select { flex: 1; font-size: 11px; font-weight: 600; background: var(--xf-s2); border: 1px solid var(--xf-border); border-radius: 7px; padding: 5px 8px; color: var(--xf-t2); cursor: pointer; appearance: none; -webkit-appearance: none; font-family: inherit; outline: none; transition: border-color 0.15s, color 0.15s; } .xf-lang-select:hover { border-color: var(--xf-bs); color: var(--xf-text); } .xf-lang-select option { background: var(--xf-surface); color: var(--xf-text); } /* ══════════════════════════════════════════════════════════ MAIN AREA ══════════════════════════════════════════════════════════ */ .xf-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; background: var(--xf-bg); /* reset NiceAdmin margin */ margin-left: 0 !important; margin-top: 0 !important; padding: 0 !important; } /* Topbar */ .xf-topbar { background: var(--xf-surface); border-bottom: 1px solid var(--xf-border); height: var(--xf-topbar-h); padding: 0 20px 0 24px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 12px; } .xf-topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .xf-hamburger { display: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--xf-border); background: none; align-items: center; justify-content: center; cursor: pointer; color: var(--xf-t2); font-size: 18px; flex-shrink: 0; transition: border-color 0.15s, color 0.15s; } .xf-hamburger:hover { border-color: var(--xf-bs); color: var(--xf-text); } .xf-hamburger i { line-height: 1; } .xf-topbar-title { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -0.3px; color: var(--xf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .xf-topbar-right { display: flex; align-items: center; gap: 7px; flex-shrink: 0; } .xf-topbar-icon-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--xf-border); background: var(--xf-surface); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--xf-t2); font-size: 15px; transition: border-color 0.15s, color 0.15s, background 0.15s; } .xf-topbar-icon-btn:hover { border-color: var(--xf-bs); color: var(--xf-text); background: var(--xf-s2); } .xf-topbar-icon-btn i { line-height: 1; } .xf-topbar-lang { font-size: 11px; font-weight: 600; appearance: none; -webkit-appearance: none; background: var(--xf-s2); border: 1px solid var(--xf-border); border-radius: 20px; padding: 5px 10px; color: var(--xf-t2); cursor: pointer; font-family: inherit; outline: none; transition: border-color 0.15s, color 0.15s; } .xf-topbar-lang:hover { border-color: var(--xf-bs); color: var(--xf-text); } .xf-topbar-lang option { background: var(--xf-surface); color: var(--xf-text); } .xf-topbar-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--xf-accent); color: #fff; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; flex-shrink: 0; } .xf-topbar-avatar img { width: 100%; height: 100%; object-fit: cover; } /* Dropdown overrides for topbar */ .xf-topbar .dropdown-menu { background: var(--xf-surface) !important; border: 1px solid var(--xf-border) !important; border-radius: 12px !important; padding: 6px !important; box-shadow: 0 12px 32px rgba(0,0,0,.35) !important; min-width: 180px; } .xf-topbar .dropdown-item { color: var(--xf-t2) !important; border-radius: 7px !important; padding: 8px 10px !important; font-size: 13px !important; display: flex; align-items: center; gap: 8px; transition: background 0.15s, color 0.15s; } .xf-topbar .dropdown-item:hover { background: var(--xf-s2) !important; color: var(--xf-text) !important; } .xf-topbar .dropdown-divider { border-color: var(--xf-border) !important; margin: 4px 0 !important; } /* Content area */ .xf-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; } /* Older pages that used calc(100vh - 60px) — now topbar is gone so full height */ .xf-content .pg-wrap { height: 100vh !important; } /* ══════════════════════════════════════════════════════════ DROPDOWN overrides (Bootstrap + X-Field palette) ══════════════════════════════════════════════════════════ */ .dropdown-menu, .dropdown-menu-arrow.profile { background: var(--xf-surface) !important; border: 1px solid var(--xf-border) !important; box-shadow: 0 12px 32px rgba(0,0,0,.4) !important; border-radius: 12px !important; padding: 6px !important; } .dropdown-menu-arrow::before { background: var(--xf-surface) !important; border-color: var(--xf-border) !important; } .dropdown-item { color: var(--xf-t2) !important; border-radius: 8px !important; padding: 8px 12px !important; font-size: 13px !important; transition: background 0.15s, color 0.15s !important; display: flex !important; align-items: center !important; gap: 8px !important; } .dropdown-item:hover, .dropdown-item:focus { background: var(--xf-s2) !important; color: var(--xf-text) !important; } .dropdown-divider { border-color: var(--xf-border) !important; margin: 4px 0 !important; } /* ══════════════════════════════════════════════════════════ MOBILE (≤ 900px) ══════════════════════════════════════════════════════════ */ @media (max-width: 900px) { .xf-hamburger { display: flex; } .xf-sidebar { position: fixed !important; left: 0 !important; top: 0 !important; bottom: 0 !important; transform: translateX(-100%); box-shadow: 4px 0 32px rgba(0,0,0,.5) !important; z-index: 500 !important; } .xf-sidebar-open .xf-sidebar { transform: translateX(0) !important; } .xf-sidebar-open::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 499; cursor: pointer; } } /* ══════════════════════════════════════════════════════════ MOBILE HAMBURGER (floating, no topbar) ══════════════════════════════════════════════════════════ */ .xf-mob-menu-btn { display: none; position: fixed; top: 14px; left: 14px; z-index: 497; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--xf-border); background: var(--xf-surface); color: var(--xf-t2); font-size: 20px; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,.35); transition: border-color .15s, color .15s; } .xf-mob-menu-btn:hover { border-color: var(--xf-bs); color: var(--xf-text); } .xf-mob-menu-btn i { line-height: 1; } @media (max-width: 900px) { .xf-mob-menu-btn { display: flex; } } /* ══════════════════════════════════════════════════════════ SCROLLBAR (global reset to X-Field style) ══════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--xf-bs); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--xf-accent2); }