/* =====================================================================
   HRKLIX Enterprise Design System — Serenity Skin Layer (Phase 1)
   طبقة السكِن المعتمدة فوق Serenity 3.6 / AdminLTE 2 — بدون تعديل سلوك JS
   ---------------------------------------------------------------------
   HOW TO WIRE THIS IN:
   1) Copy this file to: /Content/site/hrklix-theme.css
   2) In _LayoutHead.cshtml, replace this commented line:
        @*@Html.Stylesheet("~/Content/site/serenity-modern-overrides.css")*@
      with:
        @Html.Stylesheet("~/Content/site/hrklix-theme.css")
      Keep it AFTER site.css / site.rtl.css so it wins the cascade.
   3) No LESS build needed — this is plain CSS, loads as static file.
   ---------------------------------------------------------------------
   SCOPE: visual skin only (color, type, spacing, radius, shadow).
   Dialog positioning/behavior (Drawer conversion) is Phase 2 — not here.
   Selectors below are verified against real serenity.css + real
   rendered HTML (Runtime-html-Branch-screen.html) — not guessed.
   ===================================================================== */

/* ---------- 0. Design tokens ---------- */
/* Type roles per HRKLIX_Design_System_Approval_v3_EN.html:
     display -> headings, figures, brand   (Plus Jakarta Sans)
     ui      -> labels, body, controls     (Inter)
     data    -> codes, coordinates, IDs    (JetBrains Mono)
   Cairo stays in EVERY stack so the same rules render Arabic correctly —
   the Latin faces simply have no Arabic glyphs and fall through to it. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root {
  --hx-navy: #142F68;
  --hx-navy-2: #0D2050;
  --hx-navy-3: #1B3B82;
  --hx-sky: #49B3E4;
  --hx-sky-deep: #2C93C7;
  --hx-green: #1EC06C;
  --hx-green-deep: #159657;
  --hx-green-bg: #E6F9EF;
  --hx-orange: #F68525;
  --hx-orange-deep: #C9640F;
  --hx-orange-bg: #FFF1E2;
  --hx-red: #E5484D;
  --hx-red-bg: #FDECEC;

  --hx-bg: #F2F5FA;
  --hx-surface: #FFFFFF;
  --hx-surface-soft: #F8FAFD;
  --hx-line: #E4E9F2;
  --hx-line-soft: #EEF2F8;
  --hx-ink: #101A33;
  --hx-ink-2: #3E4A66;
  --hx-muted: #8592AC;

  --hx-font-display: 'Plus Jakarta Sans','Cairo',-apple-system,'Segoe UI',sans-serif;
  --hx-font-ui: 'Inter','Cairo',-apple-system,'Segoe UI',Tahoma,sans-serif;
  --hx-font-data: 'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --hx-focus: 0 0 0 3px rgba(73,179,228,.45);

  /* accents introduced by the dashboard widgets; defined here so any
     screen can use them and they stay in one place */
  --hx-teal: #0E9AA7;
  --hx-teal-bg: #E4F5F6;
  --hx-violet: #6C5CE7;
  --hx-violet-bg: #EFECFD;

  --hx-radius-sm: 10px;
  --hx-radius-md: 14px;
  --hx-radius-lg: 20px;
  --hx-shadow-card: 0 1px 2px rgba(16,26,51,.04), 0 10px 24px -12px rgba(20,47,104,.14);
  --hx-shadow-pop: 0 24px 60px -16px rgba(13,32,80,.35);
}

/* ---------- 1. Base typography ---------- */
/* serenity.css sets body { font-family: Tahoma, Arial, Helvetica, sans-serif } — override globally */
body, .ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-family: var(--hx-font-ui) !important;
}
body {
  background: var(--hx-bg) !important;
  color: var(--hx-ink) !important;
  /* tabular figures so counts, money and dates line up in columns */
  font-feature-settings: 'tnum' 1;
}
/* headings, figures and brand marks use the display face */
h1, h2, h3,
.hx-crumbs .hx-page-title,
.hx-stat-value,
.grid-title .title-text,
.hx-brand-mark,
.ui-dialog .ui-dialog-title {
  font-family: var(--hx-font-display) !important;
  letter-spacing: -.01em;
}
/* codes, coordinates and ids */
.hx-map-hint .hx-map-coords,
.hx-branch-code,
code, kbd, samp {
  font-family: var(--hx-font-data) !important;
}

/* ---------- 1b. Visible keyboard focus (EN design system) ----------
   Serenity/AdminLTE strip outlines in several places; :focus-visible keeps
   the ring for keyboard users without showing it on mouse clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--hx-focus) !important;
  border-radius: 9px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 2. Top Header (.main-header — AdminLTE) ---------- */
.main-header {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid var(--hx-line) !important;
  box-shadow: 0 1px 3px rgba(16,26,51,.06) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  min-height: 64px !important;
}
/* Logo area */
.main-header .logo {
  background: linear-gradient(180deg, var(--hx-navy) 0%, var(--hx-navy-2) 100%) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  border-bottom: none !important;
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.main-header .logo b {
  font-weight: 800 !important;
  color: #fff !important;
  font-size: 14px !important;
}
/* Navbar */
.main-header .navbar {
  background: transparent !important;
  border: none !important;
  min-height: 64px !important;
}
.main-header .navbar .nav > li > a {
  color: var(--hx-ink-2) !important;
  font-weight: 600 !important;
  line-height: 64px !important;
  padding: 0 14px !important;
}
.main-header .navbar .nav > li > a:hover {
  background: var(--hx-surface-soft) !important;
  color: var(--hx-navy) !important;
}
/* Sidebar toggle */
.main-header .sidebar-toggle {
  color: var(--hx-ink-2) !important;
  padding: 0 16px !important;
  line-height: 64px !important;
  font-size: 18px !important;
}
.main-header .sidebar-toggle:hover {
  background: var(--hx-surface-soft) !important;
  color: var(--hx-navy) !important;
}
/* User menu — profile chip style */
.main-header .navbar-custom-menu .user-menu > a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 14px !important;
  border-radius: 999px !important;
  border: 1px solid var(--hx-line) !important;
  margin: 10px 8px !important;
  background: var(--hx-surface) !important;
  color: var(--hx-ink) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  height: 42px !important;
  box-sizing: border-box !important;
}
.main-header .navbar-custom-menu .user-menu > a:hover {
  border-color: var(--hx-sky) !important;
  background: var(--hx-surface) !important;
}
.main-header .navbar-custom-menu .user-menu .user-image {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  margin: 0 !important;
  border: 2px solid var(--hx-line) !important;
  float: none !important;
}
/* dropdown menu */
.main-header .navbar-custom-menu .dropdown-menu {
  border-radius: var(--hx-radius-md) !important;
  border: 1px solid var(--hx-line) !important;
  box-shadow: var(--hx-shadow-pop) !important;
  margin-top: 4px !important;
}
.main-header .navbar-custom-menu .dropdown-menu li > a {
  color: var(--hx-ink-2) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
}
.main-header .navbar-custom-menu .dropdown-menu li > a:hover {
  background: var(--hx-surface-soft) !important;
  color: var(--hx-navy) !important;
}
/* user-header inside dropdown */
.main-header .user-header {
  background: linear-gradient(135deg, var(--hx-navy), var(--hx-navy-3)) !important;
  padding: 16px !important;
}
.main-header .user-header p {
  color: rgba(255,255,255,.8) !important;
  font-size: 12px !important;
  margin-top: 6px !important;
}
/* notification / icon chips in navbar */
.main-header .navbar .nav > li.dropdown > a .label,
.main-header .navbar .nav > li.dropdown > a .badge {
  background: var(--hx-orange) !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  padding: 2px 5px !important;
}
/* page title area below header (content-header) */
.content-header {
  padding: 16px 20px 0 !important;
  background: transparent !important;
}
.content-header > h1 {
  font-size: 21px !important;
  font-weight: 800 !important;
  color: var(--hx-navy) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
.content-header .breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 11.5px !important;
  color: var(--hx-muted) !important;
}
.content-header .breadcrumb > li + li::before {
  color: var(--hx-muted) !important;
}
.content-header .breadcrumb a {
  color: var(--hx-muted) !important;
  font-weight: 700 !important;
}
.content-header .breadcrumb a:hover {
  color: var(--hx-sky-deep) !important;
}


/* ---------- 3. Sidebar (.main-sidebar / .sidebar-menu — AdminLTE) ---------- */
.main-sidebar {
  background: linear-gradient(190deg, var(--hx-navy) 0%, var(--hx-navy-2) 85%) !important;
}
.sidebar-form {
  border-color: rgba(255,255,255,.12) !important;
}
.sidebar-form input[type="text"] {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
  border-radius: var(--hx-radius-sm) 0 0 var(--hx-radius-sm) !important;
}
.sidebar-menu > li > a {
  color: #C7D3EE !important;
  font-weight: 600;
  border-radius: 0;
  margin: 2px 8px;
  transition: background .15s ease, color .15s ease;
}
.sidebar-menu > li > a:hover {
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
}
.sidebar-menu > li.active > a,
.sidebar-menu > li.active.treeview > a {
  background: linear-gradient(90deg, rgba(73,179,228,.22), rgba(73,179,228,.05)) !important;
  color: #fff !important;
  border-left: 3px solid var(--hx-sky) !important;
}
.sidebar-menu .treeview-menu > li > a {
  color: #9FB0D6 !important;
}
.sidebar-menu .treeview-menu > li.active > a,
.sidebar-menu .treeview-menu > li > a:hover {
  color: #fff !important;
}
.sidebar-menu li > a > .nav-icon {
  color: inherit;
  opacity: .9;
}

/* ---------- 4a. Popup close button + drawer overflow (RTL) ---------- */
/* serenity.css sets .ui-dialog-titlebar-close:hover { background:red } and
   font-size:20px — override for popup with subtle white chip */
/* jQuery UI builds the close button as
   <button class="ui-button"><span class="ui-button-icon"></span><span class="ui-button-text">close</span></button>
   The text span was still taking part in layout, stretching the chip into a
   wide slab instead of a 30px square. */
.ui-dialog.hx-popup .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-button-text,
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-button-text {
  display: none !important;
}
.ui-dialog.hx-popup .ui-dialog-titlebar .ui-dialog-titlebar-close,
.ui-dialog.hx-popup .ui-dialog-titlebar-close {
  min-width: 0 !important;
  max-width: 32px !important;
  box-sizing: border-box !important;
  inset-inline-end: 16px !important;
  inset-inline-start: auto !important;
  background: rgba(255,255,255,.15) !important;
  border-radius: var(--hx-radius-sm) !important;
  border: none !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  cursor: pointer !important;
  padding: 0 !important;
}
.ui-dialog.hx-popup .ui-dialog-titlebar-close:hover {
  background: rgba(255,255,255,.28) !important;
}
.ui-dialog.hx-popup .ui-dialog-titlebar-close i,
.ui-dialog.hx-popup .ui-dialog-titlebar-close .ui-button-icon-primary {
  font-size: 13px !important;
}
/* drawer RTL overflow — .flex-layout on some dialogs causes horizontal
   scroll. Also the new .categories flex layout needs overflow control. */
.ui-dialog.hx-drawer .ui-dialog-content {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
.ui-dialog.hx-drawer .s-Form,
.ui-dialog.hx-drawer .fieldset,
.ui-dialog.hx-drawer .categories {
  max-width: 100% !important;
  overflow-x: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ui-dialog.hx-drawer .field {
  box-sizing: border-box !important;
  max-width: 100% !important;
}
/* hide empty category-title (first-category has an empty anchor — confirmed
   from live HTML: <div class="category-title"><a class="category-anchor"...></a></div>
   with no visible text — shows as an unwanted blue line divider) */
.ui-dialog.hx-drawer .category.first-category .category-title:not(:has(a[style*="opacity: 1"])) {
  display: none !important;
}
/* fallback for browsers without :has() support */
.ui-dialog.hx-drawer .category.first-category .category-title {
  padding-top: 0 !important;
  margin-top: 0 !important;
}


/* ---------- 4b. Compact popup dialogs (Confirm / Alert / Message) ----------
   These carry .s-MessageDialog / .s-ConfirmDialog / .s-AlertDialog.
   They must NOT become drawers — they're small contextual popups.
   hrklix-drawer.js skips drawer conversion for them and adds .hx-popup. */
.ui-dialog.hx-popup {
  max-width: 420px !important;
  width: 420px !important;
  border-radius: var(--hx-radius-lg) !important;
  box-shadow: var(--hx-shadow-pop) !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  position: fixed !important;
}
.ui-dialog.hx-popup .ui-dialog-content {
  padding: 24px 24px 16px !important;
  min-height: auto !important;
}
.ui-dialog.hx-popup .message {
  font-size: 15px;
  font-weight: 600;
  color: var(--hx-ink);
  line-height: 1.6;
}
.ui-dialog.hx-popup .ui-dialog-buttonpane {
  padding: 12px 20px !important;
  background: var(--hx-surface-soft) !important;
  border-top: 1px solid var(--hx-line) !important;
}
.ui-dialog.hx-popup .ui-dialog-buttonset {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}
.ui-dialog.hx-popup .ui-button {
  border-radius: var(--hx-radius-sm) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  padding: 10px 22px !important;
  border: 1px solid var(--hx-line) !important;
  background: var(--hx-surface) !important;
  color: var(--hx-ink-2) !important;
  cursor: pointer !important;
  min-width: 80px !important;
  font-family: 'Cairo', sans-serif !important;
}
/* First button = the destructive confirm. Scoped to CONFIRM dialogs only:
   other popups that reuse .hx-popup (column picker, quick filter) have a
   harmless first button — "Restore defaults" was being painted red. */
.ui-dialog.hx-popup.s-ConfirmDialog .ui-dialog-buttonset button:first-child {
  background: var(--hx-red) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.ui-dialog.hx-popup.s-ConfirmDialog .ui-dialog-buttonset button:first-child:hover {
  background: #C4383D !important;
}
.ui-dialog.hx-popup .ui-dialog-buttonset button:last-child:hover {
  background: var(--hx-line-soft) !important;
}

/* ---------- 4. Content area ---------- */
.content-wrapper {
  background: var(--hx-bg) !important;
}
.content-header > h1,
.grid-title .title-text {
  color: var(--hx-navy) !important;
  font-weight: 800 !important;
}

/* ---------- 5. Dialog chrome (.ui-dialog / .s-Dialog — jQuery UI + Serenity) ---------- */
/* Real source of the maroon red: serenity.css .ui-dialog-titlebar { background-color:#97000d } */
.ui-dialog {
  border-radius: var(--hx-radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--hx-shadow-pop) !important;
  border: 1px solid var(--hx-line) !important;
}
.ui-dialog .ui-dialog-titlebar {
  background: linear-gradient(135deg, var(--hx-navy) 0%, var(--hx-navy-3) 100%) !important;
  padding: 16px 12px 16px 20px !important;
  border-top-left-radius: var(--hx-radius-lg) !important;
  border-top-right-radius: var(--hx-radius-lg) !important;
  position: relative !important;
  overflow: hidden !important;
}
/* decorative glow circle — matches the approved drawer/dialog mockup */
/* serenity.css:505 declares
       .ui-dialog .ui-dialog-titlebar.ui-helper-clearfix:after { display:none }
   to kill jQuery UI's clearfix dot. That is THREE classes, so it silently beat
   the two-class selector this glow used to have and the decorative circle never
   painted at all. Match the specificity and force display back on. */
.ui-dialog .ui-dialog-titlebar::after,
.ui-dialog .ui-dialog-titlebar.ui-helper-clearfix::after {
  content: "";
  display: block !important;
  clear: none !important;
  visibility: visible !important;
  position: absolute;
  /* mock .drawer-head::after: -40px / -60px / 180px. Logical inset so the
     glow hugs the inline-start corner in BOTH directions (it used to be
     pinned to physical `left`, which put it on the wrong side in RTL). */
  inset-inline-start: -40px;
  top: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(73,179,228,.25);
  pointer-events: none;
  z-index: 0;
}
/* everything in the header must sit ABOVE the glow, otherwise the circle
   washes over the title and the category tab bar */
.ui-dialog .ui-dialog-titlebar > *,
.ui-dialog .ui-dialog-titlebar .hx-drawer-tabbar {
  position: relative;
  z-index: 1;
}
.ui-dialog .ui-dialog-title {
  font-weight: 800 !important;
  font-size: 17px !important;
  letter-spacing: .01em;
  position: relative;
  z-index: 1;
}
.ui-dialog .ui-dialog-titlebar .ui-button {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.14) !important;
  border-radius: var(--hx-radius-sm) !important;
  margin: 0 4px !important;
}
.ui-dialog .ui-dialog-titlebar .ui-button:hover {
  background-color: rgba(255,255,255,.24) !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
  background-color: var(--hx-red) !important;
  border-radius: var(--hx-radius-sm);
}
.ui-dialog .ui-dialog-content,
.ui-dialog .s-DialogContent {
  background: var(--hx-surface) !important;
  padding: 16px 20px !important;
}
.ui-dialog .ui-dialog-buttonpane {
  background: var(--hx-surface-soft) !important;
  border-top: 1px solid var(--hx-line) !important;
}
.s-Dialog .s-DialogToolbar {
  background: var(--hx-surface-soft) !important;
  border-bottom: 1px solid var(--hx-line) !important;
  border-top: none !important;
}
/* mobile/responsive docked layout — keep structure, just re-skin */
.ui-dialog.mobile-layout .ui-dialog-titlebar {
  background: linear-gradient(135deg, var(--hx-navy), var(--hx-navy-3)) !important;
}

/* Panels (.s-Panel — nested/inline panels e.g. Deduction Rule List sub-dialog) */
.s-Panel {
  border-radius: var(--hx-radius-md) !important;
  border-top: 3px solid var(--hx-sky) !important;
  box-shadow: var(--hx-shadow-card) !important;
}

/* ---------- 6. Tabs (.ui-tabs inside dialogs / drawer) ---------- */
/* These are the Serenity category-links shown as horizontal tabs
   in the drawer header (as in BranchDialog, LeaveType etc).
   Target: white text on navy, active = sky underline, no raised chrome */
.ui-dialog.hx-drawer .ui-tabs,
.ui-dialog.hx-drawer .s-TabsDiv {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.ui-dialog.hx-drawer .ui-tabs-nav,
.ui-dialog.hx-drawer .s-TabsDiv .nav {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.15) !important;
  padding: 0 20px !important;
  display: flex !important;
  gap: 4px !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.ui-dialog.hx-drawer .ui-tabs-nav li,
.ui-dialog.hx-drawer .s-TabsDiv .nav-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  top: 0 !important;
  float: none !important;
  list-style: none !important;
}
.ui-dialog.hx-drawer .ui-tabs-nav li a,
.ui-dialog.hx-drawer .s-TabsDiv .nav-link {
  color: rgba(255,255,255,.65) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  padding: 10px 14px !important;
  text-shadow: none !important;
  display: block !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  transition: color .15s ease !important;
}
.ui-dialog.hx-drawer .ui-tabs-nav li a:hover,
.ui-dialog.hx-drawer .s-TabsDiv .nav-link:hover {
  color: #fff !important;
  background: transparent !important;
}
.ui-dialog.hx-drawer .ui-tabs-nav li.ui-tabs-active,
.ui-dialog.hx-drawer .ui-tabs-nav li.ui-state-active,
.ui-dialog.hx-drawer .s-TabsDiv .nav-item.active {
  border-bottom: 2px solid var(--hx-sky) !important;
  background: transparent !important;
}
.ui-dialog.hx-drawer .ui-tabs-nav li.ui-tabs-active a,
.ui-dialog.hx-drawer .ui-tabs-nav li.ui-state-active a,
.ui-dialog.hx-drawer .s-TabsDiv .nav-item.active .nav-link {
  color: #fff !important;
  background: transparent !important;
  font-weight: 800 !important;
}
/* category-links bar (same visual treatment as tabs when inside drawer) */
.ui-dialog.hx-drawer .category-links {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.15) !important;
  padding: 0 20px !important;
  display: flex !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
}
.ui-dialog.hx-drawer .category-links a.category-link {
  color: rgba(255,255,255,.65) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 12px !important;
  border-bottom: 2px solid transparent !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.ui-dialog.hx-drawer .category-links a.category-link:hover {
  color: #fff !important;
}
.ui-dialog.hx-drawer .category-links a.category-link.active,
.ui-dialog.hx-drawer .category-links a.category-link[class*="selected"] {
  color: #fff !important;
  border-bottom-color: var(--hx-sky) !important;
}
.ui-dialog.hx-drawer .category-links .separator {
  display: none !important;
}

/* tabs panel content area (not the nav) */
.ui-dialog.hx-drawer .ui-tabs-panel {
  background: var(--hx-surface) !important;
  border: none !important;
  padding: 20px 24px !important;
}

/* category-links quick-jump bar (e.g. "Add Skill | Experience | Education" in Applicant form) */
.s-PropertyGrid .category-links,
.flex-layout .category-links {
  background: linear-gradient(90deg, var(--hx-navy), var(--hx-navy-3)) !important;
  border-radius: var(--hx-radius-sm) !important;
  border: none !important;
}
.s-PropertyGrid .category-links a.category-link {
  color: #fff !important;
}
.s-PropertyGrid .category-links span.separator {
  color: rgba(255,255,255,.4) !important;
}
.s-PropertyGrid .category-title {
  border-bottom-color: var(--hx-line) !important;
}
.s-PropertyGrid .category-title a {
  color: var(--hx-orange-deep) !important;
}

/* category-links is moved to header — collapse it completely */
.ui-dialog.hx-drawer .category-links {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
/* fieldset jQuery UI padding reset inside drawer */
.ui-dialog.hx-drawer .fieldset.ui-widget-content {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
/* hide empty first category-title — confirmed from live HTML:
   .first-category .category-title contains only an empty <a> anchor */
.ui-dialog.hx-drawer .category.first-category .category-title {
  display: none !important;
}
/* but show it if it has visible text (other dialogs may have a named first section) */
.ui-dialog.hx-drawer .category.first-category .category-title:has(a[style*="opacity: 1"]) {
  display: flex !important;
}
/* ---------- 6b. Category section dividers (inside drawer form) ----------
   .category-title divs stay inside the form — restyled as clean section
   headers instead of the old blue link style. The .category-anchor inside
   each one provides the scroll target (via name attribute). */
.ui-dialog.hx-drawer .category-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 18px 0 10px !important;
  margin-bottom: 6px !important;
  border-bottom: 1px solid var(--hx-line) !important;
}
.ui-dialog.hx-drawer .category-title::before {
  content: '';
  display: block;
  width: 3px;
  height: 16px;
  background: var(--hx-sky);
  border-radius: 2px;
  flex: 0 0 auto;
}
.ui-dialog.hx-drawer .category-title a.category-anchor {
  color: var(--hx-navy) !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  text-decoration: none !important;
  pointer-events: none !important;
  opacity: 1 !important;
}
/* first category has no top padding needed */
.ui-dialog.hx-drawer .category.first-category .category-title {
  padding-top: 4px !important;
}

/* ---------- 6c. Category-links lifted to drawer header as nav ----------
   hrklix-drawer.js moveCategoryLinksToHeader() builds .hx-drawer-tabbar */
.hx-drawer-tabbar {
  display: flex;
  gap: 0;
  padding: 0 20px;
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
  justify-content: flex-start; /* LTR: tabs start from left */
}
/* RTL: tabs start from right */
[lang="ar-EG"] .hx-drawer-tabbar,
:lang(ar) .hx-drawer-tabbar {
  justify-content: flex-end;
  direction: rtl;
}
.hx-dtab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255,255,255,.6);
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 9px 14px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.hx-dtab:hover { color: rgba(255,255,255,.9); }
.hx-dtab.active {
  color: #fff;
  border-bottom-color: var(--hx-sky);
  font-weight: 800;
}

/* ---------- 7. Toolbar buttons ---------- */
.tool-buttons, .buttons-inner {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.tool-button {
  background: var(--hx-surface) !important;
  border: 1px solid var(--hx-line) !important;
  border-radius: var(--hx-radius-sm) !important;
  font-weight: 700 !important;
  color: var(--hx-ink-2) !important;
  transition: all .15s ease;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  width: 118px !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  float: none !important;
  margin: 0 !important;
}
/* every single tool-button gets the same fixed width above — including
   icon-only ones like the small save-state button next to Update. No
   exceptions this time. */
.tool-button .button-outer {
  border: none !important;
  border-radius: var(--hx-radius-sm) !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  width: 100% !important;
}
/* serenity.css sets no-text button-inner padding to "5px 3px 19px 13px" (old
   design's icon-balancing hack) — that asymmetric bottom padding is exactly
   what pushes icon-only buttons (Apply Changes, Refresh...) out of line with
   text buttons (Save). Overriding to a symmetric, centered padding. */
div.s-Toolbar .tool-button.no-text span.button-inner,
div.s-Toolbar .tool-button.icon-tool-button.no-text span.button-inner {
  padding: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.tool-button .button-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 12px !important;
  width: 100%;
  text-align: center;
}
.s-DialogToolbar,
.grid-toolbar .tool-buttons {
  display: flex !important;
  align-items: center !important;
}
.tool-button:hover {
  border-color: var(--hx-sky) !important;
  background: rgba(73,179,228,.06) !important;
}
.tool-button:hover .button-outer {
  background: transparent !important;
}
.tool-button.disabled {
  opacity: .4 !important;
}

/* Section 7 sets `.tool-button { display: inline-flex !important }`, whose
   !important also overrode Serenity's own jQuery .hide()/.toggle() inline
   `display:none`. That made buttons Serenity deliberately hides visible —
   most obviously Delete on a NEW record. Restore hide() semantics. */
.tool-button[style*="display: none"],
.tool-button[style*="display:none"] {
  display: none !important;
}

/* The InplaceAdd button on a lookup still carried serenity.css's grey
   gradient and star-pencil sprite. Neutralise both and draw a plain "+". */
.s-Form .inplace-button b,
.ui-dialog .inplace-button b {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C93C7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-size: 14px 14px !important;
  width: 100% !important;
  height: 100% !important;
}

/* Collapsed dialog toolbar — hrklix-drawer.js empties it and tags it. The
   inline display:none it also sets loses to section 7's
   `.s-DialogToolbar { display:flex !important }`, so it needs its own rule. */
.ui-dialog .s-DialogToolbar.hx-toolbar-collapsed,
.ui-dialog .hx-toolbar-collapsed {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* Primary action = add-button / save-and-close-button (single orange CTA per design system) */
.tool-button.add-button,
.tool-button.save-and-close-button,
.tool-button.apply-changes-button {
  background: linear-gradient(135deg, var(--hx-orange), #FF9A44) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -8px rgba(246,133,37,.55);
}
.tool-button.add-button:hover,
.tool-button.save-and-close-button:hover,
.tool-button.apply-changes-button:hover {
  background: linear-gradient(135deg, #EE7A18, var(--hx-orange)) !important;
}

/* Destructive actions stay red-only (delete/reject) — semantic, not structural */
/* Destructive action only. Undelete/Undo-delete deliberately excluded —
   it's a recovery action, not destructive, so it stays neutral (default
   .tool-button styling, same as Localization/Clone) instead of red. */
.tool-button.delete-button {
  background: var(--hx-red-bg) !important;
  border-color: transparent !important;
  color: var(--hx-red) !important;
}
.tool-button.delete-button:hover {
  background: var(--hx-red) !important;
  color: #fff !important;
}

/* ---------- 8. Quick search bar (.s-QuickSearchBar) ---------- */
/* Real source of the 2nd maroon usage: serenity.css line ~3278 background:#97000d */
.s-QuickSearchBar {
  background: var(--hx-navy) !important;
  border-radius: var(--hx-radius-sm) !important;
}
.s-QuickSearchBar .s-QuickSearchInput {
  color: var(--hx-ink) !important;
}
.s-QuickSearchBar .quick-search-icon i {
  color: #fff !important;
}

/* ---------- 9. Quick filters bar ---------- */
.quick-filters-bar {
  background: var(--hx-surface-soft) !important;
  border: 1px solid var(--hx-line) !important;
  border-radius: var(--hx-radius-md) !important;
  padding: 12px !important;
}
.quick-filter-label {
  color: var(--hx-muted) !important;
  font-weight: 700 !important;
  font-size: 11.5px !important;
  text-transform: uppercase;
}
.quick-filter-item input,
.quick-filter-item .select2-choice {
  border-radius: var(--hx-radius-sm) !important;
  border-color: var(--hx-line) !important;
}

/* Once hrklix-drawer.js injects an SVG icon (.hx-btn-icon), strip the
   background-image that serenity.css applies at the class level.
   Inline style alone doesn't always override a stylesheet background-image
   because of specificity — this CSS rule wins reliably. */
.button-inner:has(.hx-btn-icon) {
  background-image: none !important;
  padding-left: 10px !important;
}
/* :has() not supported in older browsers — also target by the common
   footer contexts where we inject (belt-and-suspenders) */
.hx-drawer-footer .button-inner,
.hx-split-btn .button-inner {
  background-image: none !important;
  background-repeat: no-repeat !important;
  padding-left: 10px !important;
}

/* ---------- 9b. Form inputs — full-width inside drawer ----------
   serenity.css and site.rtl.css both use float:left/right for .editor
   and some dialogs render inline style="width:200px" on each field.
   !important on width + box-sizing overrides both. */
.ui-dialog.hx-drawer .s-Form .editor,
.ui-dialog.hx-drawer .s-Form .widget-wrapper,
.ui-dialog.hx-drawer .flex-layout .s-Form .editor,
.ui-dialog.hx-drawer .flex-layout .s-Form .widget-wrapper,
.ui-dialog.hx-drawer .s-Form input.editor,
.ui-dialog.hx-drawer .s-Form textarea.editor,
.ui-dialog.hx-drawer .s-Form select.editor {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  float: none !important;
}
.ui-dialog.hx-drawer .s-Form .caption {
  float: none !important;
  display: block !important;
  width: 100% !important;
  margin-bottom: 6px !important;
  color: var(--hx-ink-2) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  text-align: left !important;
}
/* RTL — Arabic: lang="ar-EG" is set on <html> by Serenity */
:lang(ar) .ui-dialog.hx-drawer .s-Form .caption,
[lang="ar-EG"] .ui-dialog.hx-drawer .s-Form .caption {
  text-align: right !important;
}
.ui-dialog.hx-drawer .s-Form .field {
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  margin-bottom: 14px !important;
  min-width: 0 !important;
}
/* .category must be flex so col-sm-6 fields sit side by side */
.ui-dialog.hx-drawer .categories .category {
  display: flex !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  gap: 0 8px !important;
}
/* col widths — account for the 8px gap */
.ui-dialog.hx-drawer .field.col-sm-6  { flex: 0 0 calc(50% - 4px)  !important; max-width: calc(50% - 4px)  !important; }
.ui-dialog.hx-drawer .field.col-sm-12 { flex: 0 0 100% !important; max-width: 100% !important; }
.ui-dialog.hx-drawer .field.col-sm-4  { flex: 0 0 calc(33.33% - 6px) !important; max-width: calc(33.33% - 6px) !important; }
.ui-dialog.hx-drawer .field.col-sm-8  { flex: 0 0 calc(66.66% - 2px) !important; max-width: calc(66.66% - 2px) !important; }
/* fields with no col class = full width */
.ui-dialog.hx-drawer .categories .category > .field:not([class*="col-"]) {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
.ui-dialog.hx-drawer .s-Form .vx,
.ui-dialog.hx-drawer .s-Form .clear {
  display: none !important;
}
/* actual input/select/textarea chrome — values taken EXACTLY from the
   approved design file HRKLIX_Design_System_Approval_v3.html .f-input rule:
   height:44px, border:1.5px solid var(--line), border-radius:11px,
   padding:0 14px, font-size:13.5px, transition:border-color .15s */
.ui-dialog.hx-drawer .s-Form input[type="text"],
.ui-dialog.hx-drawer .s-Form input[type="email"],
.ui-dialog.hx-drawer .s-Form input[type="number"],
.ui-dialog.hx-drawer .s-Form input[type="password"],
.ui-dialog.hx-drawer .s-Form input.flexify,
.ui-dialog.hx-drawer .s-Form select,
.ui-dialog.hx-drawer .s-Form select.flexify {
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  border: 1.5px solid var(--hx-line) !important;
  border-radius: 11px !important;
  background: var(--hx-surface-soft) !important;
  padding: 0 14px !important;
  font-size: 13.5px !important;
  color: var(--hx-ink) !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color .15s !important;
  /* NO width:100% here — the .field parent controls width via col-sm-6/col-sm-12.
     width:100% would override the flex-basis and make all inputs full-width. */
}
.ui-dialog.hx-drawer .s-Form textarea,
.ui-dialog.hx-drawer .s-Form textarea.flexify {
  height: auto !important;
  min-height: 100px !important;
  max-height: none !important;
  border: 1.5px solid var(--hx-line) !important;
  border-radius: 11px !important;
  background: var(--hx-surface-soft) !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  box-sizing: border-box !important;
  outline: none !important;
  resize: vertical !important;
  transition: border-color .15s !important;
}
/* focus — exact values from approved design:
   border-color:var(--sky), background:#fff, box-shadow:0 0 0 4px rgba(73,179,228,.14) */
.ui-dialog.hx-drawer input.editor:focus {
  border-color: var(--hx-sky) !important;
  box-shadow: 0 0 0 4px rgba(73,179,228,.14) !important;
  background: #fff !important;
  outline: none !important;
}
/* width:100% on the input means 100% of its parent .field container —
   so half-width fields (col-sm-6) get half-width inputs automatically.
   Serenity controls the field width via Bootstrap col classes. */
.ui-dialog.hx-drawer .s-Form .field > input.editor,
.ui-dialog.hx-drawer .s-Form .field > select.editor,
.ui-dialog.hx-drawer .s-Form .field > textarea.editor,
.ui-dialog.hx-drawer .s-Form .field > .select2-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* .flexify is the actual class Serenity puts on inputs in live HTML
   (class="editor flexify s-StringEditor") — confirmed from runtime.
   Target directly as extra coverage alongside the JS height fix in
   hrklix-drawer.js which runs 50ms after dialog open. */
.ui-dialog.hx-drawer .s-Form input.flexify,
.ui-dialog.hx-drawer .s-Form textarea.flexify {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
}
.ui-dialog.hx-drawer .s-Form textarea.flexify {
  max-height: none !important;
  min-height: 100px !important;
}

.slick-header-column,
.slick-header-column.ui-state-default {
  background: var(--hx-surface-soft) !important;
  color: var(--hx-muted) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  font-size: 11.5px !important;
  border-bottom: 2px solid var(--hx-line) !important;
  border-right: 1px solid var(--hx-line-soft) !important;
}
/* serenity.css line 1306 sets hover to #c8e8f8 — a harsh bright blue.
   Override to our soft sky tint which matches the design system. */
.slick-header-column:hover,
.slick-header-column-active {
  background: rgba(73,179,228,.08) !important;
  color: var(--hx-sky-deep) !important;
}
.slick-header-column-sorted,
.slick-header-column-sorted.ui-state-default {
  border-bottom-color: var(--hx-sky) !important;
  color: var(--hx-sky-deep) !important;
}
.slick-row.odd {
  background-color: var(--hx-surface-soft) !important;
}
.slick-cell {
  color: var(--hx-ink-2) !important;
  border-bottom-color: var(--hx-line-soft) !important;
}
.slick-cell.selected,
.slick-row.odd .slick-cell.selected {
  background-color: var(--hx-orange-bg) !important;
}
.s-EditLink, a.s-EditLink {
  color: var(--hx-sky-deep) !important;
  font-weight: 600;
}
.inline-action.view-details i {
  color: var(--hx-muted) !important;
}

/* Pager */
.s-SlickPager {
  background: var(--hx-surface-soft) !important;
  border-top: 1px solid var(--hx-line) !important;
}
.slick-pg-current {
  border-radius: var(--hx-radius-sm) !important;
  border-color: var(--hx-line) !important;
}

/* ---------- 10b. Grid cell formatters (Hrklix.* — see HrklixFormatters.ts) ---------- */
.hx-cell-name { display: flex; align-items: center; gap: 10px; }
.hx-avatar {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 11px;
}
.hx-name-text { font-weight: 700; color: var(--hx-ink); }

.hx-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(20,47,104,.06); color: var(--hx-navy);
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.hx-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hx-sky); }

.hx-cell-emp { display: flex; flex-direction: column; gap: 4px; min-width: 70px; }
.hx-emp-num { font-weight: 800; color: var(--hx-ink); font-size: 12.5px; }
.hx-emp-bar { height: 5px; border-radius: 99px; background: var(--hx-line-soft); overflow: hidden; }
.hx-emp-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--hx-sky), var(--hx-green)); }

.hx-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
}
.hx-badge-dot { width: 6px; height: 6px; border-radius: 50%; }
.hx-badge-success { background: var(--hx-green-bg); color: var(--hx-green-deep); }
.hx-badge-success .hx-badge-dot { background: var(--hx-green); }
.hx-badge-warning { background: var(--hx-orange-bg); color: var(--hx-orange-deep); }
.hx-badge-warning .hx-badge-dot { background: var(--hx-orange); }
.hx-badge-muted { background: var(--hx-line-soft); color: var(--hx-muted); }
.hx-badge-muted .hx-badge-dot { background: var(--hx-muted); }

/* ---------- 10b. Field widths inside Dialogs ----------
   REMOVED (design-system pass 3): this section used to force
       .ui-dialog .field, .s-Dialog .field { min-width:100%; flex:0 0 100% }
   which stacked EVERY dialog field full-width and silently defeated Serenity's
   own [HalfWidth] attribute — used across ZoneForm, AttendanceDeductionRuleListForm,
   TenantSubmissionForm and others. Serenity's col-sm-6 / col-sm-12 classes are the
   correct width mechanism and are handled in section 9b above; site.rtl.css's
   `.field { min-width:33.33% }` is neutralised there by explicit flex-basis on the
   col-* classes rather than by overriding every field. */

/* ---------- 11. Select2 lookups ---------- */
.select2-container .select2-choice {
  border-radius: var(--hx-radius-sm) !important;
  border-color: var(--hx-line) !important;
}
.select2-drop {
  border-radius: 0 0 var(--hx-radius-sm) var(--hx-radius-sm) !important;
  box-shadow: var(--hx-shadow-pop) !important;
}
.select2-results .select2-highlighted {
  background: var(--hx-sky) !important;
}

/* ---------- 12. Badges / labels (status pills used across grids) ---------- */
.label-success, .bg-green { background-color: var(--hx-green) !important; }
.label-warning, .bg-yellow { background-color: var(--hx-orange) !important; }
.label-danger, .bg-red { background-color: var(--hx-red) !important; }
.label-info, .bg-aqua, .bg-light-blue { background-color: var(--hx-sky) !important; }

/* ---------- 12b. SVG nav icons (new svg: icon keys in CommonNavigation.cs) ---------- */
.nav-icon-svg {
  width: 16px;
  height: 16px;
  margin-right: 10px;
  vertical-align: -3px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: inline-block;
}
.sidebar-menu .treeview-menu .nav-icon-svg {
  width: 13px;
  height: 13px;
}

/* ---------- 12c. Live stat cards (HxStat*) — Design System section 6.2 ---------- */
.hx-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0 0 16px;
}
.hx-stat {
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius-lg);
  box-shadow: var(--hx-shadow-card);
  padding: 16px 18px;
}
.hx-stat-value { font-size: 26px; font-weight: 900; color: var(--hx-ink); }
.hx-stat-label { font-size: 12px; color: var(--hx-muted); font-weight: 700; margin-top: 4px; }
.hx-stat-navy .hx-stat-value { color: var(--hx-navy); }
.hx-stat-green .hx-stat-value { color: var(--hx-green-deep); }
.hx-stat-sky .hx-stat-value { color: var(--hx-sky-deep); }
.hx-stat-orange .hx-stat-value { color: var(--hx-orange-deep); }
@media (max-width: 900px) {
  .hx-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 13. Footer ---------- */
.main-footer {
  background: var(--hx-surface) !important;
  color: var(--hx-muted) !important;
  border-top: 1px solid var(--hx-line) !important;
}

/* ---------- 14. Phase 2 — Slide-over Drawer (see hrklix-drawer.js) ---------- */
/* .hx-drawer is added by JS to any .ui-dialog once opened (except mobile-
   layout ones, which keep Serenity's own full-screen responsive mode). */
.ui-dialog.hx-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  width: min(720px, 94vw) !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  border-left: 1px solid var(--hx-line) !important;
  box-shadow: var(--hx-shadow-pop) !important;
  display: flex !important;
  flex-direction: column !important;
  transform: translateX(102%) !important;
}
/* transition is a SEPARATE class, added one frame after .hx-drawer itself
   (with a forced reflow in between via hrklix-drawer.js) — this is what
   actually makes the slide animate instead of snapping instantly. */
.ui-dialog.hx-drawer.hx-drawer-anim {
  transition: transform .32s cubic-bezier(.2,.8,.2,1) !important;
}
.ui-dialog.hx-drawer.hx-drawer-open {
  transform: translateX(0) !important;
}
/* titlebar keeps the navy gradient/decoration from section 5, just square
   top corners now (edge-to-edge drawer, not a floating card) */
.ui-dialog.hx-drawer .ui-dialog-titlebar {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  flex: 0 0 auto;
}
.ui-dialog.hx-drawer .ui-dialog-content,
.ui-dialog.hx-drawer .s-DialogContent {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  height: auto !important;
  max-height: none !important;
}
.ui-dialog.hx-drawer .ui-dialog-buttonpane,
.ui-dialog.hx-drawer .s-DialogToolbar {
  flex: 0 0 auto;
}

.hx-drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(13,20,40,.44);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.hx-drawer-scrim.show {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 640px) {
  .ui-dialog.hx-drawer { width: 100vw !important; }
  .hx-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .hx-drawer-footer { flex-wrap: wrap; gap: 8px; padding: 12px; }
  .hx-drawer-footer-group { flex-wrap: wrap; gap: 8px; }
  .hx-split-btn > .tool-button { min-width: 80px !important; }
  .ui-dialog.hx-popup { width: calc(100vw - 32px) !important; max-width: calc(100vw - 32px) !important; left: 16px !important; transform: translateY(-50%) !important; }
  .ui-dialog.hx-drawer .ui-tabs-nav,
  .ui-dialog.hx-drawer .category-links { padding: 0 12px !important; overflow-x: auto; }
}
@media (max-width: 480px) {
  .hx-stats { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  .hx-drawer-footer { flex-direction: column-reverse; }
  .hx-drawer-footer-group { width: 100%; justify-content: stretch; }
  .hx-drawer-cancel-btn,
  .hx-drawer-footer .tool-button { width: 100% !important; }
}

/* ---------- 14b. Cascading nested drawers (Material Design elevation-style) ----------
   Level 0 (first/only drawer): flush right, full height, square outer corner.
   Level 1+ (nested, e.g. Deduction Rule List over its parent dialog): narrower,
   inset from top/bottom, rounded floating-card corners, stronger shadow — each
   level visibly "in front of" the one behind it instead of exactly overlapping. */
.ui-dialog.hx-drawer.hx-drawer-depth-1 {
  width: min(700px, 90vw) !important;
  top: 20px !important;
  bottom: 20px !important;
  height: auto !important;
  border-left: none !important;
  border-radius: var(--hx-radius-lg) 0 0 var(--hx-radius-lg) !important;
  box-shadow: -12px 0 30px -8px rgba(13,32,80,.25), var(--hx-shadow-pop) !important;
}
.ui-dialog.hx-drawer.hx-drawer-depth-1 .ui-dialog-titlebar {
  border-top-left-radius: var(--hx-radius-lg) !important;
}
.ui-dialog.hx-drawer.hx-drawer-depth-2 {
  width: min(560px, 86vw) !important;
  top: 40px !important;
  bottom: 40px !important;
  height: auto !important;
  border-left: none !important;
  border-radius: var(--hx-radius-lg) 0 0 var(--hx-radius-lg) !important;
  box-shadow: -12px 0 30px -8px rgba(13,32,80,.25), var(--hx-shadow-pop) !important;
}
.ui-dialog.hx-drawer.hx-drawer-depth-2 .ui-dialog-titlebar {
  border-top-left-radius: var(--hx-radius-lg) !important;
}
/* the drawer(s) behind the topmost one recede visually — dimmed + very
   slightly scaled down, so hierarchy is unambiguous at a glance */
.ui-dialog.hx-drawer.hx-drawer-recede {
  filter: brightness(.92) saturate(.92);
  transform: translateX(0) scale(.99) !important;
  transition: transform .28s ease, filter .28s ease;
}

/* ---------- 14c. Reorganized toolbar: sticky footer + "More" menu ----------
   See hrklix-drawer.js reorganizeToolbar(). Buttons are MOVED (not cloned)
   here — same DOM nodes, all existing click handlers keep working. */
.hx-drawer-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  background: var(--hx-surface-soft);
  border-top: 1px solid var(--hx-line);
}
.hx-drawer-footer-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hx-drawer-cancel-btn {
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  color: var(--hx-ink-2);
  font-weight: 700;
  border-radius: var(--hx-radius-sm);
  padding: 10px 18px;
  min-height: 40px;
  cursor: pointer;
}
.hx-drawer-cancel-btn:hover {
  background: var(--hx-line-soft);
}
/* the moved tool-buttons keep their existing colors (primary orange,
   red delete, etc. from section 6/12) — footer only handles placement */
.hx-drawer-footer .tool-button {
  width: auto !important;
  min-width: 100px !important;
}
/* Serenity itself marks icon-only buttons with .no-text (confirmed in
   rendered HTML, e.g. apply-changes-button). Those must NOT get the same
   100px min-width as labeled buttons — that's exactly what produced a
   mostly-empty wide orange box with one small icon stuck in the corner. */
.hx-drawer-footer .tool-button.no-text,
.hx-drawer-more-menu .tool-button.no-text {
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
}
/* ...except when that same button has been pulled into the split menu,
   where section 14d restyles it as a bare icon next to a text label.
   Higher specificity + later in the file, so this one wins. */
.hx-drawer-footer .hx-split-menu .tool-button.no-text {
  width: 28px !important;
  min-width: 28px !important;
}

/* "More" trigger sits in the titlebar next to the close button */
.hx-drawer-more-wrap {
  position: relative;
  display: inline-flex;
  z-index: 2;
}
.hx-drawer-more-trigger {
  width: 34px;
  height: 34px;
  border-radius: var(--hx-radius-sm);
  background: rgba(255,255,255,.14);
  border: none;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  margin: 0 4px;
}
.hx-drawer-more-trigger:hover {
  background: rgba(255,255,255,.24);
}
.hx-drawer-more-menu {
  position: absolute;
  top: 42px;
  left: 0;
  min-width: 200px;
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius-md);
  box-shadow: var(--hx-shadow-pop);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 6px;
}
.hx-drawer-more-menu.show {
  display: flex;
}
.hx-drawer-more-menu .tool-button {
  width: 100% !important;
  justify-content: flex-start !important;
  min-height: 38px !important;
}
.hx-drawer-more-menu .tool-button .button-inner {
  justify-content: flex-start !important;
  text-align: left;
}
/* Plain Bootstrap buttons a screen injected into the dialog toolbar itself
   (e.g. ZoneDialog's .pick-location-btn) are swept in here by
   hrklix-drawer.js — give them the same row treatment as tool-buttons so
   the menu reads as one list. */
.hx-drawer-more-menu > .btn,
.hx-drawer-more-menu > button:not(.tool-button) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid var(--hx-line) !important;
  border-radius: var(--hx-radius-sm) !important;
  background: var(--hx-surface) !important;
  background-image: none !important;
  color: var(--hx-ink-2) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: start !important;
  box-shadow: none !important;
  float: none !important;
}
.hx-drawer-more-menu > .btn:hover,
.hx-drawer-more-menu > button:not(.tool-button):hover {
  border-color: var(--hx-sky) !important;
  background: rgba(73, 179, 228, .08) !important;
  color: var(--hx-sky-deep) !important;
}

/* ---------- 14d. Split button (primary + caret dropdown) ----------
   GitHub "Merge pull request ▾" pattern. Solves the two-orange-buttons
   ambiguity: one visible primary action, secondary save variants tucked
   into a caret menu. Built by hrklix-drawer.js reorganizeToolbar(). */
.hx-split-btn {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--hx-radius-sm);
  overflow: visible;
}
/* the real primary button keeps its orange gradient from section 12,
   we just square off the edge that meets the caret */
.hx-split-btn > .tool-button {
  /* logical: square only the edge that meets the caret, whichever side that
     is. Physical *-right-radius put the flat edge on the wrong side in RTL,
     which is what made the Save split button look mis-assembled. */
  border-start-end-radius: 0 !important;
  border-end-end-radius: 0 !important;
  border-start-start-radius: var(--hx-radius-sm) !important;
  border-end-start-radius: var(--hx-radius-sm) !important;
  margin: 0 !important;
}
/* icon inside the primary labeled button: left-aligned, fixed width,
   with the text sitting naturally to the right of it.
   Confirmed from runtime: the icon is background-image on .button-inner */
.hx-split-btn > .tool-button .button-inner {
  justify-content: center !important;
  gap: 8px;
  padding: 0 16px !important;
  background-image: none !important;   /* the SVG icon replaces it */
}
/* same fix for delete and any other labeled button moved to the footer
   (delete-button, undo-delete-button, any custom labeled button) */
.hx-drawer-footer .tool-button:not(.no-text) .button-inner,
.hx-drawer-more-menu .tool-button:not(.no-text) .button-inner {
  /* hrklix-drawer.js injects a real SVG icon as the first child, so the
     old background-image + padding-left trick is obsolete and was the other
     half of the mis-ordered Save button in RTL. */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  background-image: none !important;
  padding: 0 16px !important;
}
.hx-drawer-more-menu .tool-button:not(.no-text) .button-inner {
  justify-content: flex-start !important;
}
.hx-split-caret {
  background: linear-gradient(135deg, var(--hx-orange), #FF9A44);
  border: none;
  border-inline-start: 1px solid rgba(255,255,255,.35);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  width: 32px;
  min-height: 40px;
  cursor: pointer;
  border-start-end-radius: var(--hx-radius-sm);
  border-end-end-radius: var(--hx-radius-sm);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  box-shadow: 0 8px 18px -8px rgba(246,133,37,.55);
  transition: filter .15s ease;
}
.hx-split-caret:hover {
  filter: brightness(1.06);
}
.hx-split-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  min-width: 210px;
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius-md);
  box-shadow: var(--hx-shadow-pop);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
}
.hx-split-menu.show {
  display: flex;
}
.hx-split-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: var(--hx-radius-sm);
  cursor: pointer;
}
.hx-split-menu-item:hover {
  background: var(--hx-surface-soft);
}
/* inside the menu the icon button is just the icon — the readable label
   sits next to it, so strip its standalone button chrome */
.hx-split-menu-item .tool-button {
  width: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none;
}
.hx-split-menu-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--hx-ink-2);
}

/* =====================================================================
   NOT covered here (by design — see chat notes):
   - PowerBI embedded dashboard: styled from Power BI Report Theme itself,
     not reachable via this stylesheet.
   - Row-level status coloring in Attendance grid (Absence/Weekend/OT):
     currently inline JS-driven classes — left untouched pending a
     decision on whether to remap those to --hx-red/--hx-orange/--hx-green.
   - site.rtl.css companion file: this stylesheet is written LTR-safe
     (uses -left/-right explicitly matching current rules' own convention)
     but has NOT yet been mirrored for the RTL cookie state — flag if
     Arabic UI is the primary tested locale for Phase 1 sign-off.
   - Phase 2 (drawer conversion) ships alongside this file as of the
     latest update — see hrklix-drawer.js. Requires that new JS file to
     also be deployed + wired in _LayoutHead.cshtml, or the .hx-drawer
     classes here simply never get added and dialogs behave as before.
   ===================================================================== */

/* the caret and "more" trigger now hold a real sprite icon instead of a
   text glyph (▾ / ⋯), so they need to centre their svg like any icon button */
.hx-split-caret,
.hx-drawer-more-trigger {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.hx-split-caret .icon,
.hx-drawer-more-trigger .icon {
  width: 14px; height: 14px; margin: 0 !important;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Footer action buttons ----------
   Workflow actions a screen offers (Approve / Reject / Resubmit, and any
   other labelled tool button) used to be swallowed by the "More" overflow
   menu, so they read as missing. They now sit in the footer between Delete
   and Save, each with its own intent colour. Visibility is untouched -- the
   screen's own updateInterface() still decides which of them show. */
.hx-drawer-footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  margin-inline-end: 10px;
}
.hx-drawer-footer-actions .tool-button {
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border: 1.5px solid var(--hx-line) !important;
  background: var(--hx-surface) !important;
  color: var(--hx-text-1, #3E4A66) !important;
  box-shadow: none !important;
  white-space: nowrap;
}
.hx-drawer-footer-actions .tool-button .button-inner { padding: 0 !important; }
.hx-drawer-footer-actions .tool-button:hover { border-color: var(--hx-navy) !important; color: var(--hx-navy) !important; }

.hx-drawer-footer-actions .approve-button {
  border-color: rgba(34, 163, 110, .45) !important;
  color: #1B8A5C !important;
  background: rgba(34, 163, 110, .07) !important;
}
.hx-drawer-footer-actions .approve-button:hover {
  background: #22A36E !important; color: #fff !important; border-color: #22A36E !important;
}
.hx-drawer-footer-actions .reject-button {
  border-color: rgba(224, 78, 78, .45) !important;
  color: #C93B3B !important;
  background: rgba(224, 78, 78, .06) !important;
}
.hx-drawer-footer-actions .reject-button:hover {
  background: #D64545 !important; color: #fff !important; border-color: #D64545 !important;
}
.hx-drawer-footer-actions .resubmit-button {
  border-color: rgba(73, 179, 228, .5) !important;
  color: var(--hx-navy) !important;
  background: rgba(73, 179, 228, .08) !important;
}
.hx-drawer-footer-actions .resubmit-button:hover {
  background: var(--hx-sky) !important; color: #fff !important; border-color: var(--hx-sky) !important;
}