/* =====================================================================
   HRKLIX Design System — Navigation
   ---------------------------------------------------------------------
   Default everywhere:
       [ 184px module rail (icon + LABEL) ] [ 236px screens panel ]

   The hamburger collapses that to an icon-only rail (68px, panel hidden)
   and the choice is remembered. Expanded is the default.

   Additionally, ONLY on master-data / Settings screens (any nav path
   containing a "Settings" segment), a horizontal strip appears under the
   topbar listing that group's sibling screens. The vertical menu stays —
   the strip is an extra row, never a replacement.

   #SidebarMenu is reused in place, never rebuilt, so hrefs, permission
   filtering and .active state still come from LeftNavigation.cshtml.
   Scoped to body.hx-nav-dual so the sidebar degrades to stock AdminLTE.
   ===================================================================== */

body.hx-nav-dual {
  --hx-rail-w: 184px;
  --hx-rail-collapsed-w: 68px;
  --hx-modnav-w: 236px;
  --hx-topbar-h: 72px;
  --hx-tabbar-h: 46px;
  --hx-nav-w: calc(var(--hx-rail-w) + var(--hx-modnav-w));
}
body.hx-nav-dual.hx-nav-collapsed { --hx-nav-w: var(--hx-rail-collapsed-w); }

/* ---------- 1. sidebar shell ---------- */
body.hx-nav-dual .main-sidebar,
body.hx-nav-dual.sidebar-mini.sidebar-collapse .main-sidebar {
  width: var(--hx-nav-w) !important;
  transform: none !important;
  display: flex !important;
  flex-direction: row !important;
  padding-top: 0 !important;
  overflow: visible !important;
  z-index: 1100;
  transition: width .18s ease;
}
body.hx-nav-dual .content-wrapper,
body.hx-nav-dual .main-footer,
body.hx-nav-dual .main-header {
  margin-inline-start: var(--hx-nav-w) !important;
  margin-inline-end: 0 !important;
  transition: margin-inline-start .18s ease;
}
/* AdminLTE's brand block duplicated the rail's mark — the rail owns it. */
body.hx-nav-dual .main-header .logo { display: none !important; }
/* ...and site.css:196 leaves `.main-header .navbar { margin-left:230px }`
   behind to make room for that logo, which pushed the hamburger and the
   breadcrumbs far to the right once it was hidden. */
body.hx-nav-dual .main-header .navbar {
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  padding-inline-start: 4px !important;
}
body.hx-nav-dual .main-header .sidebar-toggle {
  padding: 0 14px !important;
  display: flex !important;
  align-items: center;
}
body.hx-nav-dual .hx-crumbs { padding-inline-start: 6px; }

/* collapsed: rail only */
body.hx-nav-dual.hx-nav-collapsed .hx-modnav { display: none !important; }

/* ---------- 2. module rail ---------- */
.hx-rail {
  width: 100%;
  flex: 0 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 10px 10px 14px;
  background: linear-gradient(190deg, var(--hx-navy) 0%, var(--hx-navy-2) 85%);
  border-inline-end: 1px solid rgba(255, 255, 255, .07);
  overflow: visible;
  box-sizing: border-box;
}
body.hx-nav-dual .hx-rail { width: var(--hx-rail-w); }
body.hx-nav-dual.hx-nav-collapsed .hx-rail {
  width: var(--hx-rail-collapsed-w);
  align-items: center;
  padding-inline: 0;
}

.hx-rail-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 6px 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  text-decoration: none !important;
}
.hx-rail-mark {
  width: 40px; height: 40px;
  border-radius: 12px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--hx-sky), #7ED0F0);
  color: var(--hx-navy-2);
  font-family: var(--hx-font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -.02em;
  box-shadow: 0 8px 18px -6px rgba(73, 179, 228, .65);
}
.hx-rail-wordmark {
  font-family: var(--hx-font-display);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
}
body.hx-nav-dual.hx-nav-collapsed .hx-rail-brand {
  justify-content: center;
  padding-inline: 0;
}
body.hx-nav-dual.hx-nav-collapsed .hx-rail-wordmark { display: none; }

/* ---------- 2a. Rail search (relocated form.sidebar-form / #SidebarSearch) ----------
   hrklix-nav.js pulls the existing search form out of the screens panel and
   drops it here, right under the brand and above the module list, since it
   filters the whole menu tree (all modules), not just whichever module's
   panel happens to be open -- see build() in hrklix-nav.js. Styled for the
   rail's dark navy background rather than the light chrome the form's
   AdminLTE markup was built for. Hidden when the rail collapses to
   icons-only: a text input doesn't fit a 68px column, and search doesn't
   apply to a single lit-up icon anyway. */
.hx-rail-search {
  padding: 0 4px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.hx-rail-search .sidebar-form {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.hx-rail-search .sidebar-form .input-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px;
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 999px !important;
  padding: 0 6px 0 12px;
  height: 38px;
}
.hx-rail-search .sidebar-form .input-group input#SidebarSearch,
.hx-rail-search .sidebar-form .input-group input.form-control {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  height: 36px !important;
  padding: 0 !important;
  font-size: 13px !important;
  color: #fff !important;
  border-radius: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
}
.hx-rail-search .sidebar-form .input-group input#SidebarSearch::placeholder {
  color: #93A2C4;
}
.hx-rail-search .sidebar-form .input-group-btn {
  width: auto !important;
  flex: 0 0 auto;
}
.hx-rail-search .sidebar-form .input-group-btn > .btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #93A2C4 !important;
  padding: 0 6px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
}
.hx-rail-search .sidebar-form .input-group-btn > .btn:hover { color: #fff !important; }

body.hx-nav-dual.hx-nav-collapsed .hx-rail-search { display: none; }

.hx-rail-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: none;
  background: transparent;
  border-radius: 11px;
  color: #C7D3EE;
  cursor: pointer;
  text-align: start;
  font-family: inherit;
  transition: background .15s ease, color .15s ease;
}
.hx-rail-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
/* set by hrklix-nav.js while the sidebar search box has text in it, on any
   module whose screens don't match -- see syncRailWithSearch() */
.hx-rail-item.hx-rail-hidden { display: none !important; }
.hx-rail-item.is-active {
  background: linear-gradient(to right, rgba(73, 179, 228, .26), rgba(73, 179, 228, .06));
  color: #fff;
}
body.rtl .hx-rail-item.is-active {
  background: linear-gradient(to left, rgba(73, 179, 228, .26), rgba(73, 179, 228, .06));
}
.hx-rail-item.is-active::before {
  content: "";
  position: absolute;
  inset-inline-start: -10px;
  top: 9px; bottom: 9px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--hx-sky);
}
body.rtl .hx-rail-item.is-active::before { border-radius: 3px 0 0 3px; }
.hx-rail-item .icon {
  width: 19px; height: 19px;
  flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.hx-rail-label {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* collapsed: icons only, with a hover tooltip for the name */
body.hx-nav-dual.hx-nav-collapsed .hx-rail-item {
  width: 46px;
  justify-content: center;
  padding: 0;
  margin: 0 auto;
}
body.hx-nav-dual.hx-nav-collapsed .hx-rail-label { display: none; }
body.hx-nav-dual.hx-nav-collapsed .hx-rail-item::after {
  content: attr(data-label);
  position: absolute;
  inset-inline-start: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--hx-navy-2);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 1300;
  box-shadow: var(--hx-shadow-pop);
}
body.hx-nav-dual.hx-nav-collapsed .hx-rail-item:hover::after { opacity: 1; }

/* ---------- 3. screens panel ---------- */
body.hx-nav-dual .hx-modnav {
  width: var(--hx-modnav-w);
  flex: 0 0 auto;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hx-modnav-title {
  padding: 20px 18px 12px;
  font-family: var(--hx-font-display);
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  flex: 0 0 auto;
}
body.hx-nav-dual section.sidebar {
  display: block !important;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}
body.hx-nav-dual section.sidebar::-webkit-scrollbar { width: 6px; }
body.hx-nav-dual section.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .18);
  border-radius: 3px;
}
body.hx-nav-dual section.sidebar::-webkit-scrollbar-track { background: transparent; }
body.hx-nav-dual section.sidebar > form.sidebar-form { display: none !important; }

body.hx-nav-dual #SidebarMenu > li { display: none !important; }
body.hx-nav-dual #SidebarMenu > li.hx-mod-shown { display: block !important; }
body.hx-nav-dual #SidebarMenu > li.hx-mod-shown > a { display: none !important; }
body.hx-nav-dual #SidebarMenu > li.hx-mod-shown > .treeview-menu {
  display: block !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  background: transparent !important;
}
body.hx-nav-dual #SidebarMenu .treeview-menu > li > a {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 9px 12px !important;
  margin: 2px 0;
  border-radius: 10px;
  color: #C7D3EE !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
body.hx-nav-dual #SidebarMenu .treeview-menu > li > a:hover {
  background: rgba(255, 255, 255, .08) !important;
  color: #fff !important;
}
body.hx-nav-dual #SidebarMenu .treeview-menu > li.active > a {
  background: linear-gradient(to right, rgba(73, 179, 228, .22), rgba(73, 179, 228, .05)) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
body.rtl.hx-nav-dual #SidebarMenu .treeview-menu > li.active > a {
  background: linear-gradient(to left, rgba(73, 179, 228, .22), rgba(73, 179, 228, .05)) !important;
}
body.hx-nav-dual #SidebarMenu .treeview-menu .treeview-menu {
  display: block !important;
  padding-inline-start: 12px !important;
  margin: 2px 0 6px !important;
  border-inline-start: 1px solid rgba(255, 255, 255, .10);
}
body.hx-nav-dual #SidebarMenu .treeview-menu > li.treeview > a {
  color: #7C8CB4 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .09em;
  text-transform: uppercase;
  pointer-events: none;
  padding-bottom: 4px !important;
}
body.hx-nav-dual #SidebarMenu .treeview-menu > li.treeview > a .fa-angle-left { display: none !important; }
body.hx-nav-dual #SidebarMenu .nav-icon,
body.hx-nav-dual #SidebarMenu .nav-icon-svg { flex: 0 0 auto; }

/* ---------- 4. horizontal strip (Settings screens only) ---------- */
.hx-tabbar {
  position: sticky;
  top: var(--hx-topbar-h);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--hx-tabbar-h);
  padding: 0 12px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hx-line);
}
.hx-tabbar-module {
  flex: 0 0 auto;
  font-family: var(--hx-font-display);
  font-size: 13px;
  font-weight: 800;
  color: var(--hx-navy);
  padding-inline-end: 12px;
  margin-inline-end: 2px;
  border-inline-end: 1px solid var(--hx-line);
  white-space: nowrap;
}
.hx-tabbar-scroll {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hx-tabbar-scroll::-webkit-scrollbar { display: none; }
.hx-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--hx-ink-2) !important;
  text-decoration: none !important;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.hx-tab:hover { background: var(--hx-surface-soft); color: var(--hx-navy) !important; }
.hx-tab.is-active {
  background: rgba(73, 179, 228, .12);
  border-color: rgba(73, 179, 228, .35);
  color: var(--hx-sky-deep) !important;
  font-weight: 700;
}
.hx-tab .icon {
  width: 15px; height: 15px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .75;
}
.hx-tab.is-active .icon { opacity: 1; }
.hx-tabbar-arrow {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid var(--hx-line);
  background: var(--hx-surface);
  color: var(--hx-ink-2);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.hx-tabbar-arrow.is-shown { display: inline-flex; }
.hx-tabbar-arrow:hover {
  border-color: var(--hx-sky);
  color: var(--hx-sky-deep);
  background: rgba(73, 179, 228, .08);
}
.hx-tabbar-arrow .icon {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
body.rtl .hx-tabbar-arrow .icon { transform: scaleX(-1); }

/* ---------- 5. column picker: RTL icon placement ----------
   serenity.css pins i.js-show / i.js-hide with a physical `right: 8px`
   and uses margin-right on the drag handle and the h5 eye icon, so in
   Arabic all three flipped onto the same side and overlapped the grip. */
.s-ColumnPickerDialog i.js-show,
.s-ColumnPickerDialog i.js-hide {
  right: auto !important;
  left: auto !important;
  inset-inline-end: 8px !important;
}
.s-ColumnPickerDialog .drag-handle {
  margin-right: 0 !important;
  margin-inline-end: 6px !important;
}
.s-ColumnPickerDialog h5 i {
  margin-right: 0 !important;
  margin-inline-end: 4px !important;
}
.s-ColumnPickerDialog li { padding-inline-end: 28px !important; }

/* ---------- 6. responsive ---------- */
@media (max-width: 1199px) {
  body.hx-nav-dual { --hx-rail-w: var(--hx-rail-collapsed-w); }
  body.hx-nav-dual .hx-rail { width: var(--hx-rail-collapsed-w); align-items: center; padding-inline: 0; }
  body.hx-nav-dual .hx-rail-label, body.hx-nav-dual .hx-rail-wordmark { display: none; }
  body.hx-nav-dual .hx-rail-item { width: 46px; justify-content: center; padding: 0; margin: 0 auto; }
  body.hx-nav-dual .hx-rail-brand { justify-content: center; padding-inline: 0; }
}
@media (max-width: 991px) {
  body.hx-nav-dual { --hx-nav-w: var(--hx-rail-collapsed-w); }
  body.hx-nav-dual .hx-modnav { display: none !important; }
}
@media (max-width: 767px) {
  .hx-tabbar-module { display: none; }
  .hx-tab { height: 30px; padding: 0 10px; font-size: 12.5px; }
}

/* A module that is a single page (Analytics, Dashboard) has no child screens;
   showing an empty navy column for it just wastes 236px. */
body.hx-nav-dual.hx-nav-noscreens { --hx-nav-w: var(--hx-rail-w); }
body.hx-nav-dual.hx-nav-noscreens .hx-modnav { display: none !important; }
body.hx-nav-dual.hx-nav-noscreens.hx-nav-collapsed { --hx-nav-w: var(--hx-rail-collapsed-w); }


/* ---------- Navigation feedback ----------
   Shown while a screen is loading: a top progress bar, plus a spinner on
   the item that was picked. Clicks on the panel are suppressed meanwhile,
   because the navigation is already committed and a second click just
   queues another full page load. */
.hx-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  z-index: 2000;
  pointer-events: none;
  background: transparent;
}
.hx-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  border-start-end-radius: 3px;
  border-end-end-radius: 3px;
  background: linear-gradient(90deg, var(--hx-sky, #49B3E4), var(--hx-navy, #12285C));
  box-shadow: 0 0 10px rgba(73, 179, 228, .55);
  transition: width 9s cubic-bezier(.05, .8, .2, 1);
}
.hx-progress.is-on .hx-progress-bar { width: 92%; }

.hx-modnav li.hx-nav-loading > a { opacity: .75; }
.hx-modnav li.hx-nav-loading > a::after {
  content: "";
  width: 13px;
  height: 13px;
  margin-inline-start: auto;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .28);
  border-top-color: #fff;
  animation: hx-nav-spin .7s linear infinite;
  flex: 0 0 auto;
}
@keyframes hx-nav-spin { to { transform: rotate(360deg); } }

body.hx-nav-navigating .hx-modnav a,
body.hx-nav-navigating .hx-rail-item { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .hx-progress-bar { transition: none; }
  .hx-modnav li.hx-nav-loading > a::after { animation-duration: 2s; }
}

/* Brand image in the rail: the company logo, or the bundled HRKLIX mark.
   Sized to the same 40px box the HX tile used. A white plate sits behind it
   because an uploaded logo is usually drawn for light backgrounds and would
   otherwise disappear into the navy rail. */
.hx-rail-logo {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
  padding: 3px;
}
body.hx-nav-dual.hx-nav-collapsed .hx-rail-logo { margin: 0 auto; }