/* ========================================================================== ShineLife — Neumorphic UI (Phase 1: header, footer, home) Soft-UI design system: single-tone surfaces + dual offset shadows. Scoped to existing AdminLTE hooks so layout/collapse behaviour is untouched. ========================================================================== */ :root { --neu-bg: #eef1ea; --neu-surface: #eef1ea; --neu-dark: #c8ccc2; --neu-light: #ffffff; --neu-text: #2d3436; --neu-text-muted: #7a8177; --neu-accent: #2f9e44; --neu-accent-dark: #1f6e2e; --neu-accent-soft: #e1f2e3; --neu-danger: #e5533d; --neu-r-lg: 22px; --neu-r-md: 16px; --neu-r-sm: 12px; --neu-r-pill: 999px; --neu-shadow-sm: 4px 4px 9px var(--neu-dark), -4px -4px 9px var(--neu-light); --neu-shadow-md: 7px 7px 16px var(--neu-dark), -7px -7px 16px var(--neu-light); --neu-shadow-lg: 12px 12px 26px var(--neu-dark), -10px -10px 22px var(--neu-light); --neu-inset-sm: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light); --neu-inset-md: inset 5px 5px 11px var(--neu-dark), inset -5px -5px 11px var(--neu-light); } /* -------------------------------------------------------------------- Base surface -------------------------------------------------------------------- */ body, .content-wrapper { background-color: var(--neu-bg) !important; color: var(--neu-text); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--neu-bg); } ::-webkit-scrollbar-thumb { background: var(--neu-dark); border-radius: var(--neu-r-pill); border: 2px solid var(--neu-bg); } /* -------------------------------------------------------------------- Top navbar -------------------------------------------------------------------- */ .main-header.navbar { background: var(--neu-bg) !important; border: none !important; box-shadow: 0 6px 16px -8px rgba(120, 130, 110, 0.35); padding: 6px 18px; min-height: 64px; } .main-header .nav-link[data-widget="pushmenu"] { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--neu-surface); box-shadow: var(--neu-shadow-sm); color: var(--neu-text) !important; transition: box-shadow .18s ease, transform .18s ease; margin-right: 4px; } .main-header .nav-link[data-widget="pushmenu"]:hover { box-shadow: var(--neu-shadow-md); transform: translateY(-1px); } .main-header .nav-link[data-widget="pushmenu"]:active { box-shadow: var(--neu-inset-sm); transform: translateY(0); } .main-header h5.text-bold { letter-spacing: .2px; font-weight: 700 !important; color: var(--neu-text); } /* -------------------------------------------------------------------- Sidebar — width, offset and responsive behaviour AdminLTE derives these from a web of ".sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover" style multi-class selectors, keyed off several breakpoints. Depending on the exact viewport width and class combination in play, that produced both the hover-flyout-over-content bug and the expanded-sidebar-clips-content bug seen during this redesign. Rather than keep patching individual symptoms of that cascade, this block takes full, explicit ownership of sidebar sizing. Its PushMenu widget (autoCollapseSize: 992, its default) already tracks exactly which of these 4 states we're in — on click AND on window resize — via three classes on : sidebar-collapse present, sidebar-open/-closed absent -> desktop rail none of the three -> desktop full sidebar-collapse + sidebar-closed (viewport <=992) -> mobile closed sidebar-open (viewport <=992) -> mobile open (overlay) Keying off those classes directly — rather than a second, independent media query breakpoint of our own — means this layout can never drift out of sync with the JS that's actually driving it. */ :root { --sidebar-w: 260px; --sidebar-w-collapsed: 84px; } /* Base: desktop, full width, sidebar pushes content */ .main-sidebar { width: var(--sidebar-w) !important; margin-left: 0 !important; transform: translateX(0); transition: width .3s ease-in-out, transform .3s ease-in-out !important; } .content-wrapper, .main-footer, .main-header { margin-left: var(--sidebar-w) !important; transition: margin-left .3s ease-in-out !important; } /* Desktop rail: collapsed, viewport wide enough that it's not auto-hidden */ body.sidebar-collapse:not(.sidebar-closed):not(.sidebar-open) .main-sidebar { width: var(--sidebar-w-collapsed) !important; } body.sidebar-collapse:not(.sidebar-closed):not(.sidebar-open) .content-wrapper, body.sidebar-collapse:not(.sidebar-closed):not(.sidebar-open) .main-footer, body.sidebar-collapse:not(.sidebar-closed):not(.sidebar-open) .main-header { margin-left: var(--sidebar-w-collapsed) !important; } /* Narrow viewport, drawer closed: fully off-canvas, content stays full width */ body.sidebar-closed .main-sidebar { transform: translateX(-100%); } body.sidebar-closed .content-wrapper, body.sidebar-closed .main-footer, body.sidebar-closed .main-header { margin-left: 0 !important; } /* Narrow viewport, drawer open: full-width overlay — content is never pushed or clipped, it just sits underneath AdminLTE's own dimmed #sidebar-overlay (z-index 1037, below the sidebar's 1038), which already closes the drawer on click with no extra JS needed. */ body.sidebar-open .main-sidebar { transform: translateX(0); margin-left: 0 !important; box-shadow: var(--neu-shadow-lg) !important; } body.sidebar-open .content-wrapper, body.sidebar-open .main-footer, body.sidebar-open .main-header { margin-left: 0 !important; } #sidebar-overlay { background-color: rgba(20, 20, 20, .38) !important; } .main-sidebar { background: var(--neu-bg) !important; box-shadow: 6px 0 20px -12px rgba(120, 130, 110, 0.45); border: none !important; } .brand-link { border: none !important; padding: 18px 12px 14px; } .brand-link img.img-circle { padding: 4px; background: var(--neu-surface); box-shadow: var(--neu-shadow-md); border-radius: 50%; transition: box-shadow .2s ease; } .brand-text { display: block; margin-top: 10px; color: var(--neu-text) !important; font-weight: 700 !important; } .sidebar h6 { color: var(--neu-text-muted) !important; font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin: 14px 10px 8px; } .nav-sidebar .nav-item { margin: 6px 10px; } .nav-sidebar .nav-link { background: var(--neu-surface); border-radius: var(--neu-r-md); box-shadow: var(--neu-shadow-sm); color: var(--neu-text) !important; padding: .65rem .9rem; transition: box-shadow .18s ease, transform .18s ease, color .18s ease; } .nav-sidebar .nav-link:hover { box-shadow: var(--neu-shadow-md); transform: translateY(-1px); color: var(--neu-accent-dark) !important; } .nav-sidebar .nav-link.active, .nav-sidebar .nav-link.active:hover { background: var(--neu-surface) !important; box-shadow: var(--neu-inset-md) !important; color: var(--neu-accent-dark) !important; transform: translateY(0); } .nav-sidebar .nav-link .nav-icon { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--neu-bg); box-shadow: var(--neu-inset-sm); color: var(--neu-accent-dark); font-size: 13px; margin-right: 10px; flex-shrink: 0; } .nav-sidebar .nav-link img[width="25px"] { border-radius: 50%; background: var(--neu-bg); box-shadow: var(--neu-inset-sm); padding: 3px; margin-right: 6px; flex-shrink: 0; } .nav-sidebar .nav-link p { font-weight: 600; font-size: 14.5px; } /* -------------------------------------------------------------------- Sidebar — collapsed (icon rail) state AdminLTE's own collapse CSS only knows about its own markup; the hand-written "Master"
section header is invisible to it, so we hide it explicitly. Nav links become small centered neumorphic circles; labels are force-hidden (belt-and-braces alongside AdminLTE's own width:0 trick) so nothing can ever overflow the rail. sidebar-no-expand (added to