/* HDR overrides.
theme_scripts.blade.php re-appends (style_dark.css) to
AFTER this file, so link order alone does not win the cascade -
verified live: index 12 is this file, index 13 is style_dark.css. Hence the
!important on the declarations that must survive that re-injection. */
/* ---------------------------------------------------------------------------
1. Sidebar logo was cropped.
.sidebar-header is height:60px with 14px vertical padding, leaving 32px of
content box. The brand image was sized `width: 80%` with no height limit, so
a wide wordmark (398x210) resolved to a height far taller than 32px and was
clipped by the header. Constrain by HEIGHT and let width follow, with
object-fit:contain so it is never stretched.
--------------------------------------------------------------------------- */
.sidebar .sidebar-header {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
.sidebar .sidebar-header .sidebar-brand {
display: flex;
align-items: center !important;
height: 100% !important;
min-width: 0 !important; /* allow the flex item to shrink instead of overflow */
overflow: hidden !important;
}
.sidebar .sidebar-header .sidebar-brand img {
width: auto !important;
height: auto !important;
max-width: 100% !important;
max-height: 44px !important; /* 60px header - 2x8px padding, with a little breathing room */
object-fit: contain !important; /* fill the box without distorting the wordmark */
display: block !important;
}
/* When the sidebar is folded to icons, the wordmark has no room; shrink it
rather than letting it overflow the narrow rail. */
.sidebar-folded .sidebar .sidebar-header .sidebar-brand img {
max-height: 34px !important;
}
/* Company logos are supplied as dark artwork on a transparent background,
which disappears against the dark sidebar. Knock the wordmark out to solid
white in dark mode - a predictable result whatever colours the source uses,
where a plain invert() would just shift a coloured logo to its complement. */
:root[data-theme="dark"] .sidebar .sidebar-header .sidebar-brand img {
filter: brightness(0) invert(1);
}
/* ---------------------------------------------------------------------------
2. Two scrollbars on the sidebar, and page-wide lag when moving the cursor
between the content area and the sidebar.
.sidebar-body carried `overflow-y: scroll` (a permanent native scrollbar)
AND template.js attached a PerfectScrollbar to the same element, so the
element had a native scrollbar plus a JS-driven one. PerfectScrollbar binds
mousemove/scroll/resize handlers and recalculates geometry, which is what
made crossing into the sidebar janky.
Native scrolling is compositor-driven and costs nothing on hover, so keep it
and drop the JS scrollbar (see template.js). `auto` also means the bar only
appears when the menu actually overflows, and overscroll-behavior stops
scroll chaining from bubbling out to the page.
--------------------------------------------------------------------------- */
/* The menu is genuinely taller than the space it has (measured: 942px of items
in an 850px box on a 900px viewport), so it must stay scrollable. What it
must NOT do is render its own visible bar right beside the page's, which is
what read as "two sliders" - the sidebar's overlay bar appearing on hover,
next to the document scrollbar.
Keep the scrolling, drop the bar. A fade at the bottom edge (below) keeps the
affordance that there is more menu to reach. */
.sidebar .sidebar-body {
overflow-y: auto !important;
overscroll-behavior: contain !important;
scrollbar-width: none !important; /* Firefox */
-ms-overflow-style: none !important; /* legacy Edge */
}
.sidebar .sidebar-body::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
display: none !important;
}
/* style.css caps the menu at calc(100% - 50px) while .sidebar-header is 60px
tall, so the menu box overhung its container by 10px. Match the real header
height and reclaim the difference. */
.sidebar .sidebar-body {
max-height: calc(100% - 60px) !important;
}
/* Soft fade at the bottom edge so a cut-off menu still looks scrollable
without a scrollbar. Non-interactive so it never eats a click. */
.sidebar .sidebar-body {
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
}
/* Sidebar icons sat on top of their own labels in Arabic, on 6 of 19 items.
style.css gives .link-icon `position: absolute` with NO left/right offset, so
it falls back to its static position - where it would have sat in the flex
row. That resolves differently depending on whether the item has a
.link-arrow chevron: measured live, items WITH a chevron computed
right: 25px (correct for RTL) while items WITHOUT computed left: 25px, i.e.
the LTR corner, directly under the label. rtl_style.css flips the title's
margin for every item but never repositions the icon, so the plain items had
nothing pushing them across.
Pin the offset explicitly to the value the working items already resolve to,
rather than leaving it to static position. Arabic only - LTR is unaffected. */
:is(html[lang="ar"], html[lang="fa"], html[lang="he"], html[lang="ur"])
.sidebar .sidebar-body .nav .nav-item .nav-link .link-icon {
right: 25px !important;
left: auto !important;
}
/* Neutralise any PerfectScrollbar rails left in the DOM from a cached script. */
.sidebar .sidebar-body > .ps__rail-x,
.sidebar .sidebar-body > .ps__rail-y {
display: none !important;
}
/* PerfectScrollbar sets `overflow: hidden` on elements it manages; make sure a
stale instance cannot leave the menu unscrollable. */
.sidebar .sidebar-body.ps {
overflow-y: auto !important;
}
/* ---------------------------------------------------------------------------
3. Dropdown menu rows only responded to clicks on the text itself.
The markup is
above it stays right - so numeric columns detached from their own
headers. Only .text-center was guarded, leaving the ~1088 cells that carry no
alignment class to drift.
Pin the physical edge so direction resolution and alignment are decoupled.
Specificity (0,1,3) beats style_dark.css's `th { text-align: -webkit-match-parent }`
without !important, even though that sheet is re-appended last. Bootstrap's
.text-center / .text-end still win, as they are !important. */
:is(html[lang="ar"], html[lang="fa"]) table td,
:is(html[lang="ar"], html[lang="fa"]) table th {
text-align: right;
}