/* ============================================================================ OneClickPOSWeb — Order-module design language, layered over SB Admin 2. Pure visual override: every selector below targets classes/ids/attributes that already exist in the shipped markup and in sb-admin-2.min.css — no HTML structure, class names, data-toggle attributes, or JS behavior is touched by this file. Loaded after sb-admin-2.min.css in _Layout.cshtml's , so same-specificity rules win by source order; #-prefixed selectors are used wherever a class-only SB Admin 2 rule needs outranking. Token values match OneClickPOSOrder/wwwroot/css/app.css's :root block. ============================================================================ */ :root { --ocp-page: #F3F6F8; --ocp-surface: #FFFFFF; --ocp-ink: #16202A; --ocp-ink-soft: #47576A; --ocp-muted: #7E8FA0; --ocp-line: #E1E8ED; --ocp-brand: #0B6E9E; --ocp-brand-dark: #075277; --ocp-brand-soft: #DCEEF6; --ocp-nav-bg: #16202A; --ocp-nav-bg-2: #101822; --ocp-nav-line: rgba(255, 255, 255, .08); --ocp-nav-text: rgba(255, 255, 255, .68); --ocp-nav-text-dim: rgba(255, 255, 255, .38); --ocp-shadow: 0 1px 2px rgba(26, 25, 23, .04), 0 3px 10px rgba(26, 25, 23, .05); --ocp-success: #0a7a53; --ocp-success-soft: #DCFCE7; --ocp-warning: #B45309; --ocp-warning-soft: #FEF3C7; --ocp-danger: #B91C1C; --ocp-danger-soft: #FDECEC; --ocp-plum: #6D28D9; --ocp-plum-soft: #EFE9FE; --ocp-teal: #0E7490; --ocp-teal-soft: #E0F7FA; } /* ---- Base: page background + typography, site-wide ---- */ body { background-color: var(--ocp-page) !important; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif !important; } #wrapper #content-wrapper { background-color: var(--ocp-page) !important; } /* ---- Sidebar shell ---- */ #accordionSidebar { background: linear-gradient(180deg, var(--ocp-nav-bg) 0%, var(--ocp-nav-bg-2) 100%) !important; } #accordionSidebar .sidebar-brand-icon { color: #fff; } #accordionSidebar .sidebar-brand-text { font-weight: 700; letter-spacing: .01em; } #accordionSidebar hr.sidebar-divider { border-top: 1px solid var(--ocp-nav-line); opacity: 1; } #accordionSidebar .sidebar-heading { color: var(--ocp-nav-text-dim); font-weight: 800; letter-spacing: .06em; } /* Nav links — text/icon color, hover, active pill (inset via margin so the existing full-width reads as a rounded chip without changing markup). */ #accordionSidebar .nav-item .nav-link { color: var(--ocp-nav-text); font-weight: 600; margin: 1px 10px; width: calc(100% - 20px); border-radius: 12px; } #accordionSidebar .nav-item .nav-link i { color: var(--ocp-nav-text); opacity: .9; } #accordionSidebar .nav-item .nav-link:hover, #accordionSidebar .nav-item .nav-link:focus { color: #fff; background-color: rgba(255, 255, 255, .06); } #accordionSidebar .nav-item .nav-link:hover i, #accordionSidebar .nav-item .nav-link:focus i { color: #fff; } #accordionSidebar .nav-item.active .nav-link { background-color: rgba(255, 255, 255, .06); color: #fff; font-weight: 800; box-shadow: inset 3px 0 0 var(--ocp-brand); } #accordionSidebar .nav-item.active .nav-link i { color: #fff; } #accordionSidebar .nav-item .nav-link[data-toggle="collapse"]:not(.collapsed) { background-color: rgba(255, 255, 255, .06); } /* SB Admin 2 only floats a submenu (position:absolute, doesn't disturb layout) when the sidebar is toggled down to icon-only width; at full width/desktop it defaults to an inline accordion instead, which pushes the sidebar's own height (and, once its min-width from .collapse-inner below exceeds the space Flexbox gave it, the sidebar's width too) every time a submenu opens. Floating it unconditionally at desktop keeps the sidebar's box fixed no matter what's expanded, same as the icon-only/old-theme behavior. */ @media (min-width: 768px) { #accordionSidebar .nav-item .collapse { position: absolute !important; left: 100% !important; top: 0 !important; z-index: 1030 !important; margin-left: 4px; } #accordionSidebar .nav-item .collapsing { display: none !important; transition: none !important; } } /* Collapsed submenu panels — a floating card, so it gets the heavier "float" shadow rather than the flatter one inline cards use, plus real breathing room instead of SB Admin 2's tight .5rem/0.85rem defaults. */ #accordionSidebar .collapse-inner { background-color: var(--ocp-surface) !important; box-shadow: 0 4px 16px rgba(16, 32, 42, .12), 0 12px 32px rgba(16, 32, 42, .10); border: 1px solid var(--ocp-line); border-radius: 14px !important; padding: 10px 0 !important; min-width: 13rem !important; } #accordionSidebar .collapse-header { color: var(--ocp-muted); font-weight: 800; font-size: .68rem; letter-spacing: .06em; padding: .6rem 1.15rem .3rem !important; } #accordionSidebar .collapse-divider { height: 1px; background: var(--ocp-line); margin: .5rem .9rem; } #accordionSidebar .collapse-item { color: var(--ocp-ink-soft); font-weight: 600; font-size: .86rem; border-radius: 9px; margin: 1px 8px; width: calc(100% - 16px); padding: .55rem .85rem !important; } #accordionSidebar .collapse-item:hover, #accordionSidebar .collapse-item:active { background-color: var(--ocp-brand-soft); color: var(--ocp-brand-dark); } #accordionSidebar .collapse-item.active { color: var(--ocp-brand) !important; font-weight: 700; } /* Sidebar collapse toggle (desktop icon-only mode) */ #accordionSidebar #sidebarToggle { background-color: rgba(255, 255, 255, .08); } #accordionSidebar #sidebarToggle::after { color: #fff; } #accordionSidebar #sidebarToggle:hover { background-color: rgba(255, 255, 255, .16); } /* ---- Topbar ---- */ .topbar { background-color: var(--ocp-surface) !important; box-shadow: var(--ocp-shadow) !important; border-bottom: 1px solid var(--ocp-line); } .topbar .dropdown-item { color: var(--ocp-ink-soft); } .topbar .dropdown-item:hover { background-color: var(--ocp-brand-soft); color: var(--ocp-brand-dark); } /* The language picker's items are