/* ===================================================================== sk-sidebar.css — Skyline ERP sidebar standard (2026-07 program) SINGLE SOURCE OF TRUTH for the admin sidebar look & feel. docs/superpowers/plans/2026-07-19-sidebar-standardization.md = spec. Load order: after vendor.css / custom_backend.css (both copies) / sk-themes.css. The legacy skin lives in FROZEN minified vendor.css (lines 24 & 141) — never edit those; this file mirrors its selector shapes (ul#box_menu_list …) so every tie breaks on document order. All new geometry uses LOGICAL properties: mirrors under dir=rtl free. ===================================================================== */ /* ---- 1. Tokens (never on bare :root — tailwindcss.css clobbers it) -- */ body.sidebar-mini, .main-sidebar { --sk-sidebar-w: 260px; --sk-sidebar-w-rail: 56px; --sk-sidebar-flyout-w: 220px; --sk-sidebar-bg: #011530; --sk-sidebar-surface: #1d2a47; --sk-sidebar-surface-2: #131b2c; --sk-sidebar-text: #e8e8e9; --sk-sidebar-text-muted: #aab4c4; --sk-sidebar-icon: #c2c7d1; --sk-sidebar-heading: #c8dbfc; --sk-sidebar-border: rgba(255, 255, 255, 0.08); --sk-sidebar-accent: color-mix(in srgb, var(--sk-primary, #1b6dc1) 60%, #fff); --sk-sidebar-ring: #7cc0ff; --sk-sidebar-font: var(--sk-font, 'Segoe UI', Tahoma, sans-serif); --sk-sidebar-item-h: 40px; --sk-sidebar-subitem-h: 36px; --sk-sidebar-radius: 8px; --sk-sidebar-dur: 200ms; } /* ---- 1b. RTL direction repair --------------------------------------- public/css/email_attachment.css ships `* { direction: ltr !important }` (built for its own PDF/email templates) but is linked UNSCOPED on every backend page (layouts/partials/css.blade.php) — since it's `!important` on the universal selector, it silently forces every element in the DOM to direction:ltr even under . The CSS `direction` PROPERTY (not just the `dir` ATTRIBUTE — [dir='rtl'] attribute selectors elsewhere in this file, e.g. section 5 chevrons, are unaffected) is what every inset-inline-start, margin-inline-end, padding-inline-start (etc) logical property below resolves against per-element; without this repair every logical property in this file silently resolves LTR regardless of dir="rtl". NOTE: no literal asterisk-slash sequences in this comment on purpose — that combination closes a CSS comment early. Any non-zero-specificity selector already outranks a bare `*`, so this also needs !important only to match the competing rule's importance, not to out-rank it further. Root cause is intentionally NOT fixed here (out of scope: not this file, not frozen either — email_attachment.css should be scoped to email/attachment views only) — flagged in the Task 11 report as an app-wide follow-up. Scope kept to what this file owns: the sidebar subtree (needs every descendant's own direction fixed, since the offending rule matches each element directly, not just inherited) and the content-offset targets from §2 (their own box only — deliberately NOT `.content-wrapper *`, so arbitrary page content elsewhere in the app keeps its current [pre-existing, unrelated to this task] LTR rendering; only the sidebar chrome and the offset geometry sk-sidebar.css already owns are corrected here). */ [dir='rtl'] .main-sidebar, [dir='rtl'] .main-sidebar *, [dir='rtl'] .content-wrapper, [dir='rtl'] .right-side, [dir='rtl'] .main-footer { direction: rtl !important; } /* ---- 2. Frame ------------------------------------------------------- */ .main-sidebar { width: var(--sk-sidebar-w) !important; background: var(--sk-sidebar-bg) !important; box-shadow: none !important; } ul#box_menu_list { background: var(--sk-sidebar-bg) !important; padding-block: 6px 16px; } /* content offset — logical, kills the RTL double-margin class of bugs */ body.sidebar-mini:not(.sidebar-collapse) .content-wrapper, body.sidebar-mini:not(.sidebar-collapse) .right-side, body.sidebar-mini:not(.sidebar-collapse) .main-footer { margin-inline-start: var(--sk-sidebar-w) !important; margin-inline-end: 0 !important; } @media (min-width: 768px) { body.sidebar-mini.sidebar-collapse .content-wrapper, body.sidebar-mini.sidebar-collapse .right-side, body.sidebar-mini.sidebar-collapse .main-footer { margin-inline-start: var(--sk-sidebar-w-rail) !important; margin-inline-end: 0 !important; } body.sidebar-mini.sidebar-collapse .main-sidebar { width: var(--sk-sidebar-w-rail) !important; } } /* ---- 3. Items (top level) ------------------------------------------ */ ul#box_menu_list > li { margin: 2px 8px !important; transition: none !important; } ul#box_menu_list > li > a { display: flex !important; align-items: center; gap: 10px; min-height: var(--sk-sidebar-item-h); padding: 8px 10px !important; border: 0 !important; border-radius: var(--sk-sidebar-radius) !important; background: transparent !important; color: var(--sk-sidebar-text) !important; font-family: var(--sk-sidebar-font) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.35 !important; transition: background-color var(--sk-sidebar-dur) ease, color var(--sk-sidebar-dur) ease; } /* the legacy skin styles the inner span directly — neutralize it */ ul#box_menu_list li a span { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; color: inherit !important; } ul#box_menu_list li a i { flex: 0 0 20px; width: 20px !important; margin: 0 !important; font-size: 16px !important; text-align: center; color: var(--sk-sidebar-icon) !important; } ul#box_menu_list li:hover > a { background: var(--sk-sidebar-surface) !important; color: #fff !important; } ul#box_menu_list li:hover > a i { color: #fff !important; } /* ---- 4. Active state (replaces sk-themes.css:55-89 + amber legacy) -- */ ul#box_menu_list li.active > a, [data-sk-theme] ul#box_menu_list li.active > a { position: relative; background: var(--sk-sidebar-surface) !important; color: #fff !important; border: 0 !important; box-shadow: none !important; font-weight: 600 !important; } ul#box_menu_list li.active > a i, [data-sk-theme] ul#box_menu_list li.active > a i { color: #fff !important; } /* the legacy skin paints li.active>a span #1f2937 !important at (1,1,4) — invisible on the surface pill; §3's span rule is (1,0,4) and loses on active items only. Tie it at (1,1,4) so later load order wins. */ ul#box_menu_list li.active > a span, [data-sk-theme] ul#box_menu_list li.active > a span { color: #fff !important; } ul#box_menu_list li.active > a::before, [data-sk-theme] ul#box_menu_list li.active > a::before { content: ''; position: absolute; inset-inline-start: 0; inset-block: 8px; width: 3px; border-radius: 2px; background: var(--sk-sidebar-accent, var(--sk-primary, #1b6dc1)); } /* open-but-not-active parent keeps resting bg */ ul#box_menu_list li.treeview.menu-open:not(.active) > a { background: transparent !important; } /* ---- 5. Chevron (logical: mirrors; closed points toward reading dir) */ ul#box_menu_list li.treeview > a .pull-right-container { position: static !important; float: none !important; inset-inline-end: auto !important; margin-inline-start: auto !important; margin-inline-end: 0 !important; display: flex; align-items: center; } ul#box_menu_list li.treeview > a .pull-right-container > .fa-angle-left { float: none !important; font-size: 14px !important; transform: rotate(180deg); /* points right (LTR closed) */ transition: transform var(--sk-sidebar-dur) ease; } ul#box_menu_list li.treeview.menu-open > a .pull-right-container > .fa-angle-left { transform: rotate(270deg); /* points down (open) */ } [dir='rtl'] ul#box_menu_list li.treeview > a .pull-right-container > .fa-angle-left { transform: rotate(0deg); /* points left (RTL closed) */ } [dir='rtl'] ul#box_menu_list li.treeview.menu-open > a .pull-right-container > .fa-angle-left { transform: rotate(-90deg); /* points down (open) */ } /* ---- 6. Submenus ---------------------------------------------------- */ ul#box_menu_list li ul.treeview-menu { background: transparent !important; margin: 0 !important; padding: 2px 0 6px !important; } ul#box_menu_list li ul.treeview-menu li { margin: 1px 0 !important; } ul#box_menu_list li ul.treeview-menu li a { display: flex !important; align-items: center; gap: 10px; min-height: var(--sk-sidebar-subitem-h); padding: 6px 10px !important; padding-inline-start: 38px !important; border: 0 !important; border-radius: var(--sk-sidebar-radius) !important; background: transparent !important; /* kills the always-on pill */ color: var(--sk-sidebar-text-muted) !important; font-size: 13px !important; font-weight: 400 !important; } ul#box_menu_list li ul.treeview-menu li a i { flex: 0 0 18px; width: 18px !important; font-size: 13px !important; color: var(--sk-sidebar-icon) !important; opacity: 0.75; } ul#box_menu_list li ul.treeview-menu li a:hover { background: var(--sk-sidebar-surface-2) !important; color: #fff !important; } ul#box_menu_list li ul.treeview-menu li.active > a, [data-sk-theme] #box_menu_list li ul.treeview-menu li.active > a { background: var(--sk-sidebar-surface) !important; color: #fff !important; border: 0 !important; border-radius: var(--sk-sidebar-radius) !important; box-shadow: none !important; } /* level 3 */ ul#box_menu_list li ul.treeview-menu li ul.treeview-menu li a { padding-inline-start: 54px !important; } /* ---- 7. Section dividers ------------------------------------------- */ ul#box_menu_list li.custom_divider { display: flex !important; align-items: center; gap: 8px; margin: 12px 8px 2px !important; padding: 10px 4px 4px !important; border-top: 1px solid var(--sk-sidebar-border) !important; } ul#box_menu_list li.custom_divider .rect { width: 4px !important; height: 14px !important; border-radius: 2px; margin: 0 !important; /* was margin-right: 8px (physical) */ } ul#box_menu_list li.custom_divider span { font-family: var(--sk-sidebar-font) !important; font-size: 11px !important; font-weight: 600 !important; font-style: normal !important; letter-spacing: 0.06em; line-height: 1.6 !important; text-transform: uppercase; color: var(--sk-sidebar-heading) !important; opacity: 1 !important; } /* submenu group labels + AdminLTE li.header */ ul#box_menu_list .treeview-menu > li.header, ul#box_menu_list > li.header { padding: 8px 10px 4px !important; background: transparent !important; font-family: var(--sk-sidebar-font) !important; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sk-sidebar-text-muted) !important; border: 0 !important; pointer-events: none; } ul#box_menu_list .treeview-menu > li.header { padding-inline-start: 38px !important; } /* badge rows (menu-badge-item) — presenter drops its inline styles in T8 */ ul#box_menu_list li.menu-badge-item { padding: 0 !important; margin: -6px 8px 4px !important; list-style: none; pointer-events: none; } ul#box_menu_list li.menu-badge-item > span { margin-inline-start: 40px; display: inline-block; } /* ---- 8. Focus visibility (WCAG 2.4.7 / 2.4.13-friendly) ------------- */ ul#box_menu_list li a:focus { outline: 0; } ul#box_menu_list li a:focus-visible { outline: 2px solid var(--sk-sidebar-ring) !important; outline-offset: -2px; border-radius: var(--sk-sidebar-radius); } /* ---- 9. Collapsed rail (desktop) ------------------------------------ */ @media (min-width: 768px) { body.sidebar-mini.sidebar-collapse ul#box_menu_list > li { margin: 2px 6px !important; } body.sidebar-mini.sidebar-collapse ul#box_menu_list > li > a { justify-content: center; padding: 8px !important; } body.sidebar-mini.sidebar-collapse ul#box_menu_list > li > a .pull-right-container { display: none; } /* divider collapses to a hairline in the SIDEBAR palette (was #e2e8f0 light-gray on navy) */ body.sidebar-mini.sidebar-collapse ul#box_menu_list li.custom_divider { margin: 8px 12px !important; padding: 0 !important; height: 0; border-top: 1px solid var(--sk-sidebar-border) !important; background: transparent !important; overflow: hidden; } body.sidebar-mini.sidebar-collapse ul#box_menu_list li.custom_divider .rect, body.sidebar-mini.sidebar-collapse ul#box_menu_list li.custom_divider span { display: none; } /* flyout panel: shown via :hover (legacy CSS) in Phase 1, and via .sk-flyout-open (JS, keyboard-reachable) from Task 9 on. */ body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu, body.sidebar-mini.sidebar-collapse .sidebar-menu > li.sk-flyout-open > .treeview-menu { display: block !important; position: absolute; inset-inline-start: var(--sk-sidebar-w-rail) !important; inset-inline-end: auto !important; top: var(--sk-sidebar-item-h) !important; width: var(--sk-sidebar-flyout-w) !important; padding: 6px !important; background: var(--sk-sidebar-bg) !important; border: 1px solid var(--sk-sidebar-border); border-start-end-radius: 8px; border-end-end-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); z-index: 900; } body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu li a, body.sidebar-mini.sidebar-collapse .sidebar-menu > li.sk-flyout-open > .treeview-menu li a { padding-inline-start: 10px !important; } /* label shown as flyout title (legacy vendor rule restyled) */ body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right-container), body.sidebar-mini.sidebar-collapse .sidebar-menu > li.sk-flyout-open > a > span:not(.pull-right-container) { display: block !important; position: absolute; inset-inline-start: var(--sk-sidebar-w-rail); top: 0; width: var(--sk-sidebar-flyout-w); padding: 10px 12px !important; background: var(--sk-sidebar-surface) !important; color: #fff !important; border-start-end-radius: 8px; z-index: 901; } } /* ---- 10. Mobile drawer backdrop (element injected by sk-sidebar.js) - */ .sk-sidebar-backdrop { display: none; } @media (max-width: 767px) { body.sidebar-open .sk-sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(1, 21, 48, 0.5); z-index: 1035; /* below .main-sidebar, above content */ } body.sidebar-open .main-sidebar { z-index: 1040 !important; } body.sk-scroll-lock { overflow: hidden; } } /* ---- 11. Print + reduced motion ------------------------------------- */ @media print { .main-sidebar, .sk-sidebar-backdrop { display: none !important; } body.sidebar-mini:not(.sidebar-collapse) .content-wrapper, body.sidebar-mini.sidebar-collapse .content-wrapper, body.sidebar-mini:not(.sidebar-collapse) .right-side, body.sidebar-mini.sidebar-collapse .right-side, body.sidebar-mini:not(.sidebar-collapse) .main-footer, body.sidebar-mini.sidebar-collapse .main-footer { margin-inline-start: 0 !important; } } @media (prefers-reduced-motion: reduce) { .main-sidebar, ul#box_menu_list li a, ul#box_menu_list li.treeview > a .pull-right-container > .fa-angle-left { transition: none !important; } } /* ---- 12. Fixed frame + internal scroll (Task 7) --------------------- */ @media (min-width: 768px) { body.sidebar-mini .main-sidebar { position: fixed !important; inset-block: 0; inset-inline-start: 0; display: flex; flex-direction: column; padding-block-start: 62px; /* clears the app header strip */ min-height: 0 !important; height: 100%; } body.sidebar-mini .main-sidebar .sidebar { flex: 1; min-height: 0; display: flex; flex-direction: column; padding-bottom: 0 !important; } .sk-sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; } .sk-sidebar-scroll::-webkit-scrollbar { width: 8px; } .sk-sidebar-scroll::-webkit-scrollbar-track { background: transparent; } .sk-sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); border-radius: 4px; } /* the collapsed-rail flyout is positioned relative to the li; give the scroll region a positioning context that doesn't clip it */ body.sidebar-mini.sidebar-collapse .sk-sidebar-scroll { overflow: visible; } } /* ---- 13. Mobile off-canvas distance follows the width token --------- */ @media (max-width: 767px) { .main-sidebar { width: var(--sk-sidebar-w) !important; transform: translate(calc(-1 * var(--sk-sidebar-w)), 0); } [dir='rtl'] .main-sidebar { transform: translate(var(--sk-sidebar-w), 0); } body.sidebar-open .main-sidebar, [dir='rtl'] body.sidebar-open .main-sidebar { transform: translate(0, 0); } /* overlay drawer standard: content stays put (backdrop from Task 9 signals modality) — neutralize the legacy push */ body.sidebar-open .content-wrapper, body.sidebar-open .main-footer, [dir='rtl'] body.sidebar-open .content-wrapper, [dir='rtl'] body.sidebar-open .main-footer { transform: none !important; } } /* RESTORED 2026-08-23 — this section was lost when the 2026-08-15 font-size sweep rewrote this file from a copy that predated it (the only surviving copy was sk-sidebar.css.bak-fontfix). BoxCustomPresenter kept emitting inside .sk-ico with nothing left to size it, so every sidebar icon rendered at its intrinsic size. Keep .sk-ico styling in THIS file. */ /* ---- 14. Icon tiles + frame polish (2026-07-30) ---------------------- Every item used to render a flat white Font Awesome glyph, so all 58 top-level entries were visually identical and the nav read as one undifferentiated column. FA glyphs also disagree on optical weight — fa-cubes is dense, fa-wrench is thin and diagonal — which is most of why the sidebar looked older than the rest of the app. BoxCustomPresenter now wraps every icon in .sk-ico and swaps in an inline SVG where App\Http\SidebarIcons has one (78 icons; 287 distinct classes render here, so the FA fallback is the normal path, not an edge case). Depth decides the treatment — a tinted tile at top level, a small muted mark in submenus — so both icon systems land in the same geometry and the presenter never has to know how deep it is. */ /* Specificity note — .sk-ico is a , so two §3 rules outrank a bare .sk-ico class selector and both had to be answered here rather than loosened there: · `ul#box_menu_list li a span { color: inherit !important }` (1,1,3 + !important) repainted every tile in the label colour, which is why the first build rendered 44 icons in two greys instead of ten hues. · treeview rows give their spans `flex: 1 1 0%` so the chevron is pushed to the end, which stretched the tile to the full label width — 158px on Sale. Matching (1,1,3) + !important on just those two properties. */ ul#box_menu_list li a .sk-ico { flex: 0 0 var(--sk-ico-size, 28px) !important; inline-size: var(--sk-ico-size, 28px); block-size: var(--sk-ico-size, 28px); min-inline-size: var(--sk-ico-size, 28px); display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; /* the hue arrives per item as --ic from the presenter. 15% over #011530 was nearly invisible; 26% plus a hairline ring of the same hue reads as a deliberate chip without becoming a second colour competing with the label. */ background: color-mix(in srgb, var(--ic, #94a3b8) 26%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic, #94a3b8) 30%, transparent); color: var(--ic, #c2c7d1) !important; transition: background-color var(--sk-sidebar-dur) ease, color var(--sk-sidebar-dur) ease, transform var(--sk-sidebar-dur) ease; } .sk-ico > svg { inline-size: 17px; block-size: 17px; display: block; } /* FA fallback: same box, same alignment, so a mapped and an unmapped item sit on the identical baseline and the column edge never wobbles. */ ul#box_menu_list li a .sk-ico--fa { background: transparent; box-shadow: none; color: var(--sk-sidebar-icon) !important; } ul#box_menu_list li a .sk-ico > i { flex: none; inline-size: auto !important; width: auto !important; margin: 0 !important; font-size: 15px !important; color: inherit !important; } /* hover / active — the tile carries the state, not just the label */ ul#box_menu_list > li:hover > a .sk-ico, ul#box_menu_list > li.active > a .sk-ico { background: color-mix(in srgb, var(--ic, #94a3b8) 26%, transparent); color: color-mix(in srgb, var(--ic, #c2c7d1) 82%, #fff); } ul#box_menu_list > li.active > a .sk-ico { transform: scale(1.04); } /* §4 paints every descendant of an active row #fff !important. That is right for the label and wrong for the tile — a white glyph in a tinted box loses the identity the tile exists to give it. Re-assert at matching weight. */ ul#box_menu_list li.active > a .sk-ico, [data-sk-theme] ul#box_menu_list li.active > a .sk-ico, ul#box_menu_list li:hover > a .sk-ico, [data-sk-theme] ul#box_menu_list li:hover > a .sk-ico { color: color-mix(in srgb, var(--ic, #c2c7d1) 82%, #fff) !important; } ul#box_menu_list li.active > a .sk-ico--fa, ul#box_menu_list li:hover > a .sk-ico--fa { color: #fff !important; } /* submenus — same hue family, lower rank. Colour is kept (a leaf that shares its section's hue is easier to scan than 728 identical grey marks) but the tile and the ring are dropped and the mark is smaller, so section identity still outranks leaf identity. Opacity stays high enough for the hue to actually read — the first pass used .62 and the colour disappeared into the navy. */ ul#box_menu_list .treeview-menu li a .sk-ico { --sk-ico-size: 20px; border-radius: 5px; background: transparent !important; box-shadow: none !important; opacity: .88; } ul#box_menu_list .treeview-menu .sk-ico > svg { inline-size: 15px; block-size: 15px; } ul#box_menu_list .treeview-menu li:hover > a .sk-ico, ul#box_menu_list .treeview-menu li.active > a .sk-ico { opacity: 1; transform: none; } /* unmapped leaves keep their FA glyph — hold them at the muted icon colour so a grey glyph beside a coloured sibling reads as "no icon assigned", not "broken" */ ul#box_menu_list .treeview-menu li a .sk-ico--fa { color: var(--sk-sidebar-icon) !important; opacity: .7; } /* collapsed rail — the tile IS the affordance here: with the label hidden, hue is the ONLY thing telling one of 58 items from another, so it must survive. Two inherited rules fight it, both because .sk-ico is a and AdminLTE's rail was written when the icon was an : · vendor.css hides `.sidebar-collapse .sidebar-menu > li > a > span` outright, which blanked the icon on plain (non-treeview) rows; · §9 re-shows that span on hover as the ABSOLUTELY POSITIONED flyout label — so hovering a rail item would have turned its icon into the 220px title panel. Both are excluded by name rather than by loosening §9, which still needs to catch the real label span. */ body.sidebar-mini.sidebar-collapse ul#box_menu_list > li > a > .sk-ico, body.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .sk-ico, body.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > .sk-ico, body.sidebar-mini.sidebar-collapse .sidebar-menu > li.sk-flyout-open > a > .sk-ico { display: inline-flex !important; position: static !important; inset-inline-start: auto !important; top: auto !important; margin-inline: auto !important; inline-size: var(--sk-ico-size, 28px) !important; width: var(--sk-ico-size, 28px) !important; block-size: var(--sk-ico-size, 28px) !important; padding: 0 !important; border-radius: 8px !important; background: color-mix(in srgb, var(--ic, #94a3b8) 26%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic, #94a3b8) 30%, transparent) !important; color: var(--ic, #c2c7d1) !important; } body.sidebar-mini.sidebar-collapse ul#box_menu_list > li > a > .sk-ico--fa { background: transparent !important; box-shadow: none !important; color: var(--sk-sidebar-icon) !important; } /* ---- section headers: tie the rule to the group's own hue ------------- */ ul#box_menu_list > li.header { font-size: 11px !important; font-weight: 700 !important; letter-spacing: .07em; text-transform: uppercase; color: var(--sk-sidebar-heading) !important; opacity: .75; } /* (sidebar scrollbar painting lives in sk-scrollbar.css — the app-wide Signature Line standard's dark+thin variant) */ @media (prefers-reduced-motion: reduce) { .sk-ico { transition: none; } ul#box_menu_list > li.active > a .sk-ico { transform: none; } }