/* =====================================================================
   HRKLIX Design System — Shell layer (topbar + sidebar chrome)
   Implements the .topbar / .sidebar sections of
   HRKLIX_Design_System_Approval_v3.html on top of AdminLTE 2's markup.
   ---------------------------------------------------------------------
   Companion script: hrklix-shell.js — injects the crumbs and adds the
   brand mark / sidebar foot. The sidebar search box is relocated by
   hrklix-nav.js instead, to the top of the icon rail (see hrklix-nav.css).
   This sheet only styles; if the script never runs the page still renders
   exactly as it did before (all new classes are simply absent).
   ---------------------------------------------------------------------
   Loaded AFTER hrklix-theme.css and AFTER site.rtl.css.
   ===================================================================== */

/* ---------- 1. Topbar geometry ----------
   The mock's topbar is 72px; theme section 2 set 64px. Raise it here and
   re-align everything that was hard-coded to the old height. `doLayout()`
   in _Layout.cshtml measures outerHeight() at runtime, so the content area
   follows automatically. */
.main-header,
.main-header .logo,
.main-header .navbar {
  min-height: 72px !important;
}
.main-header .navbar .nav > li > a,
.main-header .sidebar-toggle {
  line-height: 72px !important;
}
.main-header .navbar {
  display: flex !important;
  align-items: center !important;
  padding: 0 10px !important;
}
.main-header .navbar-custom-menu {
  margin-inline-start: auto !important;
  float: none !important;
}
.main-header .navbar-custom-menu > .nav {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  float: none !important;
}
.main-header .navbar-custom-menu > .nav > li {
  float: none !important;
  display: flex !important;
  align-items: center !important;
}

/* ---------- 2. Breadcrumbs + page title (mock: .crumbs) ----------
   Injected by hrklix-shell.js from the active #SidebarMenu item. */
.hx-crumbs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 14px;
  min-width: 0;
  line-height: 1.25;
}
.hx-crumbs .hx-eyebrow {
  font-size: 11.5px;
  color: var(--hx-muted);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hx-crumbs .hx-eyebrow .hx-sep { opacity: .5; }
.hx-crumbs .hx-page-title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  color: var(--hx-ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 3. Icon chips (mock: .icon-chip) ---------- */
.hx-icon-chip {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--hx-line);
  background: var(--hx-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--hx-ink-2);
  position: relative;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
  padding: 0;
  flex: 0 0 auto;
}
.hx-icon-chip:hover {
  border-color: var(--hx-sky);
  color: var(--hx-sky-deep);
  background: rgba(73, 179, 228, .06);
}
.hx-icon-chip .icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.hx-icon-chip .hx-dot {
  position: absolute;
  top: 7px;
  inset-inline-start: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hx-orange);
  border: 2px solid #fff;
}
/* These two are presentation-only placeholders (no notification feed, no
   dark palette yet). Dim them slightly so they don't read as broken
   controls, but keep them visible per the approved design. */
.hx-icon-chip[aria-disabled="true"] {
  cursor: default;
  opacity: .75;
}
.hx-icon-chip[aria-disabled="true"]:hover {
  border-color: var(--hx-line);
  color: var(--hx-ink-2);
  background: var(--hx-surface);
}

/* ---------- 4. Profile chip (mock: .profile-chip) ----------
   Refines theme section 2's user-menu rules to the two-line meta layout. */
.main-header .navbar-custom-menu .user-menu > a {
  gap: 9px !important;
  padding: 5px 12px 5px 6px !important;
  height: 44px !important;
  line-height: 1.2 !important;
}
.main-header .navbar-custom-menu .user-menu > a > .user-image {
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  box-shadow: 0 0 0 2px var(--hx-line-soft);
}
.main-header .navbar-custom-menu .user-menu > a > .hidden-xs {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--hx-ink);
}
.main-header .navbar-custom-menu .user-menu .hx-user-role {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--hx-muted);
}

/* ---------- 5. Sidebar brand mark (mock: .brand-mark) ---------- */
.main-header .logo {
  gap: 12px !important;
  padding: 0 14px !important;
  text-decoration: none !important;
}
.hx-brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--hx-sky), #7ED0F0);
  color: var(--hx-navy-2);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -.5px;
  box-shadow: 0 8px 18px -6px rgba(73, 179, 228, .65);
}
/* When the sidebar is collapsed AdminLTE shows only .logo-mini — keep the
   mark visible there too, and hide the wordmark. */
.sidebar-collapse .main-header .logo .hx-brand-mark {
  margin: 0 auto;
}

/* ---------- 6. Sidebar nav group titles (mock: .nav-title) ----------
   AdminLTE renders Serenity navigation section headers as li.header. */
.sidebar-menu > li.header {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  color: #7C8CB4 !important;
  background: transparent !important;
  text-transform: uppercase;
  padding: 16px 20px 8px !important;
  border: none !important;
}

/* ---------- 7. Sidebar footer user chip (mock: .sidebar-foot) ---------- */
.hx-sidebar-foot {
  margin-top: 10px;
  padding: 14px 14px 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  gap: 10px;
}
.hx-sf-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  flex: 0 0 auto;
  overflow: hidden;
}
.hx-sf-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.hx-sf-text { min-width: 0; }
.hx-sf-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hx-sf-role { font-size: 11px; color: #93A4CC; }
/* Collapsed sidebar (body.sidebar-collapse) — AdminLTE narrows the rail to
   50px, so drop the text and centre the avatar. */
.sidebar-collapse .hx-sidebar-foot { justify-content: center; padding-inline: 0; }
.sidebar-collapse .hx-sidebar-foot .hx-sf-text { display: none; }

/* ---------- 8. Toast (mock: .toast) ----------
   Q.notifySuccess/notifyError route through toastr, so restyling the
   toastr container upgrades every existing notification in the app.
   hrklix-shell.js sets positionClass to toast-bottom-center to match. */
/* The container is only a positioning wrapper -- it must never intercept a
   click. toastr sizes it from whichever position classes it carries, and a
   full-width one covers the page; leaving it clickable froze the whole UI
   after any notification. The toasts themselves stay interactive. */
#toast-container { pointer-events: none; }
#toast-container > div { pointer-events: auto; }

#toast-container > div {
  background-image: none !important;
  opacity: 1 !important;
  box-shadow: var(--hx-shadow-pop) !important;
  border-radius: 12px !important;
  padding: 13px 20px !important;
  font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  width: auto !important;
  max-width: min(520px, 92vw) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border: none !important;
}
#toast-container > div:hover { box-shadow: var(--hx-shadow-pop) !important; }
#toast-container > .toast-success,
#toast-container > .toast-info {
  background-color: var(--hx-navy) !important;
  color: #fff !important;
}
#toast-container > .toast-warning {
  background-color: var(--hx-orange-deep) !important;
  color: #fff !important;
}
#toast-container > .toast-error {
  background-color: var(--hx-red) !important;
  color: #fff !important;
}
#toast-container .toast-message { flex: 1 1 auto; }
#toast-container .toast-title { font-weight: 800; }
#toast-container .toast-close-button {
  color: rgba(255, 255, 255, .8) !important;
  text-shadow: none !important;
  opacity: 1 !important;
  font-weight: 700;
}
/* the mock's green check disc, prepended by hrklix-shell.js */
.hx-toast-tick {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--hx-green);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex: 0 0 auto;
}
.hx-toast-tick .icon {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#toast-container > .toast-error .hx-toast-tick,
#toast-container > .toast-warning .hx-toast-tick { display: none; }

/* ---------- 9. Responsive ---------- */
@media (max-width: 767px) {
  .hx-crumbs .hx-eyebrow { display: none; }
  .hx-crumbs .hx-page-title { font-size: 17px; }
  .main-header .navbar-custom-menu .user-menu > a > .hidden-xs { display: none !important; }
}

/* ---------- 10. Gear panel (AdminLTE control-sidebar) ----------
   Direct links to the settings screens, added in _Layout.cshtml. */
.control-sidebar-dark { background: var(--hx-navy-2) !important; }
.control-sidebar .control-sidebar-heading {
  color: #9FB0D6 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.control-sidebar .form-control {
  height: 40px !important;
  border-radius: var(--hx-radius-sm) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  font-size: 13px !important;
}
.hx-cs-links { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.10); }
.hx-cs-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 2px 0;
  border-radius: 12px;
  color: #C7D3EE !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease;
}
.hx-cs-link:hover { background: rgba(255,255,255,.08); color: #fff !important; }
.hx-cs-link .icon {
  width: 16px; height: 16px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--hx-sky);
}

/* ---------- 11. Notification bell dropdown ---------- */
.hx-notif-wrap { position: relative; }
.hx-notif-badge {
  position: absolute;
  /* overflow the chip's corner rather than sitting on top of the bell */
  top: -6px;
  inset-inline-end: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--hx-orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  border: 2px solid #fff;
  box-sizing: content-box;
  pointer-events: none;
}
.hx-notif-badge[hidden] { display: none !important; }

.hx-notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  width: min(360px, 92vw);
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius-md);
  box-shadow: var(--hx-shadow-pop);
  z-index: 1200;
  display: none;
  overflow: hidden;
}
.hx-notif-panel.show { display: block; }

.hx-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hx-line-soft);
}
.hx-notif-title {
  font-family: var(--hx-font-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--hx-ink);
}
.hx-notif-markall {
  background: none;
  border: none;
  color: var(--hx-sky-deep);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--hx-radius-sm);
  font-family: inherit;
}
.hx-notif-markall:hover { background: var(--hx-surface-soft); }

.hx-notif-list { max-height: 380px; overflow-y: auto; }
.hx-notif-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--hx-muted);
  font-size: 13px;
}
.hx-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--hx-line-soft);
  text-align: start;
  cursor: pointer;
  font-family: inherit;
}
.hx-notif-item:hover { background: var(--hx-surface-soft); }
.hx-notif-item.is-unread { background: rgba(73, 179, 228, .05); }
.hx-notif-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: transparent;
  flex: 0 0 auto;
  margin-top: 6px;
}
.hx-notif-item.is-unread .hx-notif-dot { background: var(--hx-sky); }
.hx-notif-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.hx-notif-msg {
  font-size: 13px;
  color: var(--hx-ink-2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hx-notif-item.is-unread .hx-notif-msg { color: var(--hx-ink); font-weight: 600; }
.hx-notif-time { font-size: 11px; color: var(--hx-muted); }
.hx-notif-all {
  display: block;
  padding: 12px 16px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--hx-sky-deep) !important;
  text-decoration: none !important;
  background: var(--hx-surface-soft);
}
.hx-notif-all:hover { background: var(--hx-line-soft); }


/* The gear panel paints its selects white-on-navy, but a native <option>
   list is drawn by the OS on a white popup -- inheriting color:#fff made
   every unhovered language invisible. The closed control keeps white text;
   only the popup rows are re-coloured. */
.control-sidebar .form-control option {
  color: var(--hx-navy, #12285C);
  background: #fff;
}

/* Company logo (Configuration -> Company). Sized to the same 40px box as the
   built-in mark so the header keeps its rhythm whatever image is uploaded,
   and letterboxed rather than cropped -- company logos are rarely square. */
.hx-brand-logo {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 11px;
}
.sidebar-collapse .main-header .logo .hx-brand-logo { margin: 0 auto; }

/* ---------- Section tabs (Dashboard / Analytics) ----------
   These two screens left the navigation menu: each is a single page, so a
   menu entry could only ever open an empty module panel. They are two views
   of one section now, switched by this strip, which both pages render from
   Views/Shared/_HxSectionTabs.cshtml. */
.hx-section-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--hx-surface-soft, #F2F6FB);
  border: 1px solid var(--hx-line, #E3EAF3);
}
.hx-section-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 13px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--hx-text-2, #5A6B85);
  text-decoration: none !important;
  transition: background-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.hx-section-tab:hover { color: var(--hx-navy, #12285C); background: rgba(255, 255, 255, .7); }
.hx-section-tab.is-active {
  background: var(--hx-surface, #fff);
  color: var(--hx-navy, #12285C);
  box-shadow: 0 1px 3px rgba(16, 33, 71, .10);
}
.hx-section-tab-ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hx-section-tab.is-active .hx-section-tab-ic { stroke: var(--hx-sky, #49B3E4); }

/* Same slot on both screens: its own row at the top of the content area,
   aligned with the page's leading edge. It used to sit inside the dashboard
   hero, which pushed it to the right there and left it on the left on the
   analytics screen -- the control appeared to jump as you switched. */
.hx-dash > .hx-section-tabs { margin: 16px 26px 2px; }
.content-wrapper .hx-section-tabs { margin: 4px 0 14px; }

/* Both tabbed screens drop AdminLTE's 50px fixed-header reserve, so the strip
   lands at the same height on each. (.content-wrapper sits below the header
   rather than under it, so the reserve was dead space either way.) */
body.hx-tabbed-page.fixed .content-wrapper,
body.hx-tabbed-page .content-wrapper { padding-top: 0 !important; }
body.hx-tabbed-page .content-wrapper > .content { padding-top: 8px; }

/* The settings panel only grows to fit its content, but AdminLTE's
   .control-sidebar-bg sits behind it at full height in the stock charcoal
   (#222d32) -- which showed as a black block under the panel. Give the
   panel the full height and paint the backdrop the same navy. */
.control-sidebar,
.control-sidebar.control-sidebar-open {
  height: 100% !important;
  bottom: 0 !important;
  overflow-y: auto;
}
.control-sidebar-bg,
.control-sidebar-bg.control-sidebar-open {
  background: var(--hx-navy-2) !important;
}

/* ---------- User menu (AdminLTE .user-footer) ----------
   Rebuilt as a vertical list by hrklix-shell.js. AdminLTE's own layout put
   these in floated .pull-left / .pull-right pairs, so five entries came out
   staggered at three different widths with two of them missing icons. */
.user-menu .dropdown-menu { padding: 0 !important; border-radius: 16px !important; overflow: hidden; min-width: 260px !important; }
.user-menu .dropdown-menu > .user-header {
  background: var(--hx-navy) !important;
  padding: 20px 16px 16px !important;
  border: 0 !important;
  height: auto !important;
}
.user-menu .dropdown-menu > .user-header img {
  width: 74px !important; height: 74px !important;
  border: 3px solid rgba(255,255,255,.22) !important;
}
.user-menu .dropdown-menu > .user-header p { margin-top: 10px !important; font-size: 13.5px; font-weight: 700; }

.hx-user-menu.user-footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px !important;
  background: var(--hx-surface) !important;
  border-top: 1px solid var(--hx-line) !important;
}
.hx-user-menu.user-footer::before,
.hx-user-menu.user-footer::after { content: none !important; display: none !important; }

.hx-user-menu.user-footer > a.btn,
.hx-user-menu.user-footer > a {
  display: flex !important;
  align-items: center;
  gap: 11px;
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--hx-text-1, #3E4A66) !important;
  text-align: start !important;
  transition: background-color .15s ease, color .15s ease;
}
.hx-user-menu.user-footer > a:hover {
  background: var(--hx-surface-soft) !important;
  color: var(--hx-navy) !important;
}
.hx-user-menu .hx-um-ic {
  flex: 0 0 auto;
  color: var(--hx-text-3, #8494AD);
  stroke: currentColor;
  fill: none;
}
.hx-user-menu > a:hover .hx-um-ic { color: var(--hx-sky); }

/* sign out reads as the terminal action */
.hx-user-menu > a.hx-um-signout { margin-top: 4px !important; border-top: 1px solid var(--hx-line) !important; border-radius: 0 0 10px 10px !important; padding-top: 12px !important; color: #C93B3B !important; }
.hx-user-menu > a.hx-um-signout:hover { background: rgba(224,78,78,.08) !important; color: #B62F2F !important; }
.hx-user-menu > a.hx-um-signout .hx-um-ic { color: #D66; }