/* ============================================================================= MOMENTS BMS — moments-theme.css Single fully-owned theme. Replaces BOTH style.css (retired vendor theme) and design-system.css (absorbed override layer). Load order: Bootstrap 5.1.3 -> plugin CSS (select2, DataTables, daterangepicker, bootstrap-multiselect) -> THIS FILE (owns tokens + layout shell + components + plugin skins + dark mode). Sources of truth: - uiaudit/PROTOTYPE-THEME-SPEC.md (visual contract — prototype wins) - uiaudit/OWN-THEME-AUDIT.md (live-app coverage map — selectors kept) Layers below (in order): 1. TOKENS 2. LAYOUT SKELETON (header / sidebar / page-wrapper — mechanics from live, visuals from prototype) 3. COMPONENT THEMING 4. PLUGIN SKINS 5. ABSORBED design-system.css content (.ds-* helpers — JS-referenced) 6. PAGE-SPECIFIC (dashboard / entry forms / login / rojmed) + RESPONSIVE ============================================================================= */ /* ============================================================================= 1. TOKENS ============================================================================= */ :root { /* --- Brand accent (Plum) --- */ --ds-accent: #8a3d6b; --ds-accent-hover: #732f58; --ds-accent-tint: #f5ebf1; --ds-on-accent: #ffffff; /* prototype aliases (same values) */ --accent: var(--ds-accent); --accent-hover: var(--ds-accent-hover); --accent-tint: var(--ds-accent-tint); --accent-ink: var(--ds-on-accent); /* --- Neutrals (magenta-biased) --- */ --ds-page: #f7f3f6; --ds-surface: #ffffff; --ds-surface-2: #fbf8fa; --ds-elevated: #ffffff; --ds-border: #ebe2e8; --ds-border-strong: #dcd0d8; --ds-ink: #241b21; --ds-ink-2: #574c53; --ds-muted: #8a7d84; /* --- Semantic status (fg + bg pairs) --- */ --ds-pos: #0f7a4d; --ds-pos-bg: #e6f4ec; --ds-due: #c0492f; --ds-due-bg: #fbe9e5; --ds-warn: #a9640c; --ds-warn-bg: #fbf0dc; --ds-info: #2f6db3; --ds-info-bg: #e7f0fa; /* --- Sidebar palette (own dark scale, independent of light/dark theme) --- */ --sidebar: #2a1622; --sidebar-2: #38202f; --sidebar-ink: #e9dde4; --sidebar-muted: #a88fa0; /* --- Shadow --- */ --ds-shadow-sm: 0 1px 2px rgba(35,20,30,.06), 0 1px 3px rgba(35,20,30,.05); --ds-shadow-md: 0 4px 12px rgba(35,20,30,.08), 0 2px 4px rgba(35,20,30,.05); /* --- Type --- */ --ds-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ds-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace; /* --- Normalized scales (kill the 38/40/chip drift) --- */ --ctl-h: 38px; /* ONE control height: btn / input / select / select2 / chip */ --ctl-h-sm: 32px; /* dense tables/toolbars */ --radius-xs: 6px; --radius-sm: 8px; --radius: 12px; --radius-pill: 20px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; } /* --- Dark theme token block (app is light-only for now; a future toggle that stamps just works) --- */ :root[data-theme="dark"] { --ds-page: #141014; --ds-surface: #1d171b; --ds-surface-2: #221a20; --ds-elevated: #241c22; --ds-border: #362b32; --ds-border-strong: #453742; --ds-ink: #f2ebef; --ds-ink-2: #c6b9c1; --ds-muted: #9c8d95; --ds-accent: #c874a3; --ds-accent-hover: #d488b3; --ds-accent-tint: #33202c; --ds-on-accent: #1a1015; --ds-pos: #4cc38a; --ds-pos-bg: #12281e; --ds-due: #f0836b; --ds-due-bg: #2e1712; --ds-warn: #e0a544; --ds-warn-bg: #2c2110; --ds-info: #6ba7e0; --ds-info-bg: #12212f; --sidebar: #120c10; --sidebar-2: #241820; --sidebar-ink: #ecdfe6; --sidebar-muted: #9d8492; --ds-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --ds-shadow-md: 0 6px 18px rgba(0,0,0,.45); } /* --- Base typography / page --- */ body { font-family: var(--ds-font); font-size: var(--fs-base); line-height: 1.5; color: var(--ds-ink); background: var(--ds-page); -webkit-font-smoothing: antialiased; } .page-wrapper, .content { background: var(--ds-page); } h1, h2, h3, h4, h5, .page-title { color: var(--ds-ink); font-weight: 700; letter-spacing: -.2px; } .text-muted, small { color: var(--ds-muted) !important; } /* tabular figures wherever money/qty line up */ td, .dataTable td, .amount, .money, .tnum { font-variant-numeric: tabular-nums; } a { color: var(--ds-accent); } a:hover { color: var(--ds-accent-hover); } .text-accent { color: var(--ds-accent) !important; } code, .code, kbd { font-family: var(--ds-mono); } /* Global list reset (ported from retired style.css `ol, ul { list-style:none }` + the universal margin/padding zero). The old vendor theme stripped ALL list chrome by default; app markup (wordset toolbars, .total-order summary, entry forms) relies on it. Plugin lists re-declare their own padding on top. */ ol, ul { list-style: none; margin: 0; padding: 0; } /* Global focus ring (prototype §5) */ :focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; border-radius: var(--radius-xs); } /* ============================================================================= 2. LAYOUT SKELETON — mechanics from live (script.js toggles), visuals from prototype. Structural DOM: .main-wrapper > (.header, .sidebar#sidebar, .page-wrapper > .content). Body toggle classes: mini-sidebar, expand-menu, slide-nav, nosidebar. Primary breakpoint 991.98px. ============================================================================= */ /* ---- Header (fixed, 60px, white) ---- */ .header { background: var(--ds-surface); border-bottom: 1px solid var(--ds-border); height: 60px; z-index: 999; position: fixed; top: 0; right: 0; left: 0; box-shadow: var(--ds-shadow-sm); } .header .header-left { float: left; height: 60px; position: relative; text-align: center; width: 200px; z-index: 1; padding: 0 20px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--ds-border); transition: all .2s ease; } .header .header-left .logo { display: inline-block; line-height: 0; } .header .header-left .logo img { width: 140px; } .header .header-left .logo-white, .header .header-left .logo-small { display: none; } :root[data-theme="dark"] .header .header-left .logo-normal { display: none; } :root[data-theme="dark"] .header .header-left .logo-white { display: inline-block; } /* Desktop sidebar collapse control (#toggle_btn) — hamburger dot marker */ @media (min-width: 991.98px) { .header #toggle_btn { display: flex; align-items: center; justify-content: center; float: left; margin-left: 15px; height: 60px; cursor: pointer; } .header #toggle_btn:before { content: ""; width: 18px; height: 18px; border: 2px solid var(--ds-muted); border-radius: 20px; } .header .header-left.active #toggle_btn { position: relative; } .header .header-left.active #toggle_btn:after { content: ""; width: 6px; height: 6px; background-color: var(--ds-surface); border: 2px solid var(--ds-muted); border-radius: 20px; position: absolute; top: 6px; left: 6px; } .mini-sidebar .header-left #toggle_btn { opacity: 0; } .mini-sidebar .header-left #toggle_btn:after { border: 0; } .mini-sidebar.expand-menu .header-left #toggle_btn { opacity: 1; } } @media (max-width: 991.98px) { .header #toggle_btn { display: none; } } /* Mobile drawer trigger (#mobile_btn) + hamburger bars */ .header .mobile_btn { display: none; float: left; } @media (max-width: 991.98px) { .header .mobile_btn { color: var(--ds-accent); font-size: 24px; height: 60px; line-height: 60px; width: 60px; z-index: 10; padding: 0 20px; position: absolute; top: 0; left: 0; display: block; } .header .header-left { position: absolute; width: 100%; } .header .header-left .logo { text-align: center; width: 100%; } } /* Mobile kebab user-menu (.mobile-user-menu) — desktop-hidden replacement for the full .user-menu (which hides <576px). Ported from retired style.css; the own-theme dropped it, leaking a stray blue ⋮ + caret next to the page title. */ .header .mobile-user-menu { display: none; float: right; } .header .mobile-user-menu > a { color: var(--ds-accent); padding: 0; } .header .mobile-user-menu > a::after { display: none; } .header .mobile-user-menu > a i { color: var(--ds-accent); } @media (max-width: 575px) { .header .mobile-user-menu { display: block; } } .bar-icon { display: inline-block; width: 31px; margin-top: 20px; } .bar-icon span { background-color: var(--ds-accent); display: block; float: left; height: 3px; margin-bottom: 7px; width: 31px; border-radius: 2px; transition: all .5s; } .bar-icon span:nth-child(2) { width: 16px; } .menu-opened .slide-nav .bar-icon span:first-child { position: relative; top: 10px; transform: rotate(45deg); } .menu-opened .slide-nav .bar-icon span:nth-child(2) { display: none; } .menu-opened .slide-nav .bar-icon span:last-child { transform: rotate(135deg); } /* Header page-title context (design-system: .ds-header-context / .ds-page-title) */ .ds-header-context { float: left; line-height: 60px; margin-left: 18px; } .ds-page-title { font-weight: 700; font-size: var(--fs-md); color: var(--ds-ink); letter-spacing: -.2px; } /* Header right cluster (theme toggle / notifications / user) */ .user-menu { float: right; margin: 0; position: relative; z-index: 99; padding-right: 15px; display: flex; align-items: center; height: 60px; list-style: none; } @media (max-width: 575px) { .user-menu { display: none; } } .user-menu .dropdown-toggle::after { border: 0; display: none; } .user-menu.nav > li > a { color: var(--ds-ink-2); font-size: 15px; height: 60px; padding: 0 12px; display: flex; align-items: center; } .user-menu.nav > li > a:hover { color: var(--ds-ink); } .user-menu.nav > li > a.dropdown-toggle.nav-link.show { background: var(--ds-surface-2); border-radius: var(--radius-sm); } .user-menu.nav > li > a .badge { color: #fff; font-weight: 700; position: absolute; top: 8px; right: 2px; background: var(--ds-due); min-width: 18px; height: 18px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; border: 2px solid var(--ds-surface); padding: 0 4px; } .user-menu.nav > li > a i, .user-menu.nav > li > a svg { color: var(--ds-ink-2); } /* user identity meta (design-system) */ .user-menu .nav-link.userset { display: flex; align-items: center; gap: 8px; } .user-menu .ds-user-meta { line-height: 1.2; margin-left: 4px; } .ds-user-meta .ds-user-name { display: block; font-size: 13px; font-weight: 600; color: var(--ds-ink); } .ds-user-meta .ds-user-role { display: block; font-size: 11px; color: var(--ds-muted); } /* ---- Sidebar (fixed, 200px, dark-plum rail) ---- */ .sidebar { background-color: var(--sidebar); margin-top: 0; z-index: 1001; position: fixed; top: 60px; bottom: 0; left: 0; width: 200px; border-right: 1px solid rgba(255,255,255,.06); transition: all .2s ease; } @media (max-width: 991.98px) { .sidebar { margin-left: -575px; transition: all .4s ease; z-index: 1041; } } @media (max-width: 575px) { .sidebar { width: 100%; } } .slide-nav .sidebar { margin-left: 0; } .sidebar .slimScrollDiv { width: 200px !important; overflow: visible !important; background: var(--sidebar); } @media (max-width: 575px) { .sidebar .slimScrollDiv { width: 100% !important; } } .sidebar .sidebar-menu { padding: 6px 12px; } .sidebar .sidebar-menu > ul { list-style: none; margin: 0; padding: 0; } .sidebar .sidebar-menu > ul > li { margin-bottom: 2px; } /* Nav link base */ .sidebar .sidebar-menu > ul > li > a { display: flex; align-items: center; gap: 11px; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; position: relative; color: var(--sidebar-ink); transition: background-color .12s ease; } .sidebar .sidebar-menu > ul > li > a span { font-size: 13.5px; font-weight: 500; color: var(--sidebar-ink); } .sidebar .sidebar-menu > ul > li > a svg, .sidebar .sidebar-menu > ul > li > a img { width: 18px; opacity: .82; color: var(--sidebar-ink); } .sidebar .sidebar-menu > ul > li > a img { filter: brightness(0) invert(1); } /* submenu caret */ .sidebar .sidebar-menu > ul > li > a .menu-arrow { display: inline-block; font-family: "Font Awesome 5 Free"; position: absolute; right: 12px; top: 11px; font-size: 14px; transition: transform .2s ease; opacity: .7; } .sidebar .sidebar-menu > ul > li > a .menu-arrow::before { content: "\f105"; font-weight: 900; } .sidebar .sidebar-menu > ul > li > a.subdrop .menu-arrow { transform: rotate(90deg); } /* nav badge (Sales 12 / Products 1.4k …) */ .sidebar .sidebar-menu > ul > li > a .badge { margin-left: auto; background: var(--sidebar-2); color: var(--sidebar-ink); font-size: 11px; font-weight: 600; border-radius: var(--radius-pill); padding: 1px 8px; } /* Hover + active — higher specificity (.main-wrapper prefix) beats index.html's inline OFFICE_SIDEBAR_COLOR