/* =====================================================================
   HRKLIX Design System — Form / editor layer
   Implements the mock's .f-input / .f-select / .f-hint / .status-toggle /
   .map-preview rules across EVERY Serenity editor, in EVERY form —
   dialogs, drawers and full-page property grids alike.
   ---------------------------------------------------------------------
   HARD RULE — no `width` is ever declared on an editor here.
   Field width belongs to the parent .field (col-sm-6 / col-sm-12), which
   is how Serenity's [HalfWidth] attribute works. Section 2 below pins
   those widths explicitly because site.rtl.css sets
       .field { flex:auto !important; min-width:33.33% !important }
   with !important, which otherwise beats Bootstrap's own col-sm-* widths.
   ---------------------------------------------------------------------
   Selectors verified against Content/serenity/serenity.css (lines
   2783-3037) and Content/site/site.rtl.css (line 2761) — not guessed.
   Loaded AFTER hrklix-theme.css and site.rtl.css.
   ===================================================================== */

/* =====================================================================
   1. Captions
   ===================================================================== */
.s-Form .caption,
.s-Form label.caption {
  color: var(--hx-ink-2) !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  /* taller inputs (44px) need the floated caption nudged down to read as
     aligned; textareas stay top-aligned, which is correct for them. */
  padding-top: 12px !important;
  line-height: 20px !important;
  /* Bug 6976: Content/pace.css (the page-load progress bar library) ships
     its own generic, unscoped ".caption { white-space: nowrap }" for its own
     unrelated theme element - which collides with Serenity's ".caption"
     class used for every form label. A row-layout field with a narrow
     [LabelWidth] (caption beside the input, not stacked above it) has no
     room to grow, so a long label just overflowed past its own box and read
     as cut off behind the adjacent input. Let it wrap onto a second line
     instead, everywhere. */
  white-space: normal !important;
}
/* Serenity marks required fields with a <sup>*</sup> inside the caption.
   The mock uses orange for the required marker, not red — red is reserved
   for genuine errors. */
.s-Form .caption sup {
  color: var(--hx-orange) !important;
  font-size: 12px !important;
  top: 0 !important;
  vertical-align: baseline !important;
}

/* =====================================================================
   2. Field widths — keep [HalfWidth] / full width working
   Applies everywhere, not only inside drawers.
   ===================================================================== */
.s-Form .categories .category {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}
.s-Form .field.col-sm-12,
.s-Form .field.col-md-12,
.s-Form .field.col-xs-12 {
  flex: 0 0 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}
.s-Form .field.col-sm-6,
.s-Form .field.col-md-6 {
  flex: 0 0 50% !important;
  min-width: 0 !important;
  max-width: 50% !important;
}
.s-Form .field.col-sm-4,
.s-Form .field.col-md-4 {
  flex: 0 0 33.3333% !important;
  min-width: 0 !important;
  max-width: 33.3333% !important;
}
.s-Form .field.col-sm-8,
.s-Form .field.col-md-8 {
  flex: 0 0 66.6666% !important;
  min-width: 0 !important;
  max-width: 66.6666% !important;
}
.s-Form .field.col-sm-3,
.s-Form .field.col-md-3 {
  flex: 0 0 25% !important;
  min-width: 0 !important;
  max-width: 25% !important;
}
/* A field with no col-* class keeps Serenity's default behaviour — do NOT
   force it to 100%, that is what previously defeated [HalfWidth]. */

/* Below the Bootstrap sm breakpoint every field goes full width, matching
   how col-sm-* is supposed to behave. */
@media (max-width: 767px) {
  .s-Form .field[class*="col-sm-"],
  .s-Form .field[class*="col-md-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* =====================================================================
   3. Text-like editors — the mock's .f-input
   height:44px, border:1.5px solid var(--line), border-radius:11px,
   background:var(--surface-soft), padding:0 14px, font-size:13.5px
   ===================================================================== */
.s-Form input[type="text"],
.s-Form input[type="email"],
.s-Form input[type="tel"],
.s-Form input[type="url"],
.s-Form input[type="search"],
.s-Form input[type="number"],
.s-Form input[type="password"],
.s-Form select:not([multiple]):not([size]),
.s-Form input.editor,
.s-Form select.editor:not([multiple]):not([size]) {
  height: 44px !important;
  min-height: 44px !important;
  border: 1.5px solid var(--hx-line) !important;
  border-radius: 11px !important;
  background-color: var(--hx-surface-soft) !important;
  padding: 0 14px !important;
  font-size: 13.5px !important;
  font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
  color: var(--hx-ink) !important;
  box-sizing: border-box !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}
/* checkboxes and radios must not inherit the 44px text-input geometry */
.s-Form input[type="checkbox"],
.s-Form input[type="radio"] {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 6px !important;
}

.s-Form textarea,
.s-Form textarea.editor {
  min-height: 100px !important;
  height: auto !important;
  border: 1.5px solid var(--hx-line) !important;
  border-radius: 11px !important;
  background-color: var(--hx-surface-soft) !important;
  padding: 12px 14px !important;
  font-size: 13.5px !important;
  font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
  color: var(--hx-ink) !important;
  box-sizing: border-box !important;
  outline: none !important;
  resize: vertical !important;
  line-height: 1.6 !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}

/* focus — exact values from the approved design */
.s-Form input[type="text"]:focus,
.s-Form input[type="email"]:focus,
.s-Form input[type="tel"]:focus,
.s-Form input[type="url"]:focus,
.s-Form input[type="search"]:focus,
.s-Form input[type="number"]:focus,
.s-Form input[type="password"]:focus,
.s-Form select:focus,
.s-Form input.editor:focus,
.s-Form select.editor:focus,
.s-Form textarea:focus,
.s-Form textarea.editor:focus {
  border-color: var(--hx-sky) !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(73, 179, 228, .14) !important;
}

/* native select arrow — replaced with a chevron drawn as a background so
   it works without touching the DOM. Direction-aware.
   Multi-selects and sized list boxes are excluded: they render as a scrolling
   list, where a fixed height and a single dropdown arrow are both wrong. */
.s-Form select:not([multiple]):not([size]),
.s-Form select.editor:not([multiple]):not([size]) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  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='%238592AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-size: 16px 16px !important;
  background-position: right 12px center !important;
  padding-right: 34px !important;
}
/* RTL: _Layout.cshtml puts no dir attribute on <html>; the reliable signal is
   body.rtl, set from CultureInfo.CurrentUICulture.TextInfo.IsRightToLeft.
   html[dir] is kept as forward-compatible belt-and-braces. */
html[dir="rtl"] .s-Form select:not([multiple]):not([size]),
body.rtl .s-Form select:not([multiple]):not([size]),
body.rtl .s-Form select.editor:not([multiple]):not([size]) {
  background-position: left 12px center !important;
  padding-right: 14px !important;
  padding-left: 34px !important;
}

/* =====================================================================
   4. States — disabled / readonly / error
   ===================================================================== */
.s-Form input:disabled,
.s-Form select:disabled,
.s-Form textarea:disabled,
.s-Form input[readonly],
.s-Form textarea[readonly],
.s-Form .readonly,
.s-Form input.readonly,
.s-Form select.readonly,
.s-Form textarea.readonly {
  background-color: var(--hx-line-soft) !important;
  color: var(--hx-muted) !important;
  border-color: var(--hx-line) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}
.s-Form input:disabled:focus,
.s-Form input[readonly]:focus,
.s-Form select:disabled:focus,
.s-Form textarea[readonly]:focus {
  border-color: var(--hx-line) !important;
  box-shadow: none !important;
}

/* serenity.css: .s-Form .error { background:#ffefef } and
   input.error/select.error/textarea.error { border:1px solid #ff4040 } */
.s-Form .error,
.s-Form input.error,
.s-Form select.error,
.s-Form textarea.error {
  background-color: var(--hx-red-bg) !important;
  border-color: var(--hx-red) !important;
}
.s-Form input.error:focus,
.s-Form select.error:focus,
.s-Form textarea.error:focus {
  border-color: var(--hx-red) !important;
  box-shadow: 0 0 0 4px rgba(229, 72, 77, .14) !important;
}
/* validation message text (jQuery Validate renders label.error) */
.s-Form label.error {
  color: var(--hx-red) !important;
}

/* =====================================================================
   5. Select2 lookups (LookupEditor / MultipleLookup / EnumEditor-as-select2)
   ===================================================================== */
.s-Form .select2-container .select2-choice,
.s-Form .select2-container-multi .select2-choices {
  height: 44px !important;
  min-height: 44px !important;
  line-height: 42px !important;
  border: 1.5px solid var(--hx-line) !important;
  border-radius: 11px !important;
  background: var(--hx-surface-soft) !important;
  padding: 0 12px !important;
  color: var(--hx-ink) !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
.s-Form .select2-container-multi .select2-choices {
  line-height: normal !important;
  height: auto !important;
  min-height: 44px !important;
  padding: 6px 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}
.s-Form .select2-container-active .select2-choice,
.s-Form .select2-container-active .select2-choices,
.s-Form .select2-dropdown-open .select2-choice {
  border-color: var(--hx-sky) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(73, 179, 228, .14) !important;
}
.s-Form .select2-container .select2-choice > .select2-chosen {
  margin-inline-end: 26px !important;
}
.s-Form .select2-container .select2-choice .select2-arrow {
  background: transparent !important;
  border: none !important;
  width: 26px !important;
}
.s-Form .select2-container .select2-choice .select2-arrow 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='%238592AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 15px 15px !important;
}
.s-Form .select2-container-multi .select2-search-choice {
  background: rgba(73, 179, 228, .12) !important;
  border: none !important;
  border-radius: 999px !important;
  color: var(--hx-sky-deep) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 4px 10px 4px 22px !important;
  margin: 0 !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
}
.s-Form .select2-container.select2-container-disabled .select2-choice {
  background: var(--hx-line-soft) !important;
  color: var(--hx-muted) !important;
}
/* dropdown panel (rendered at body level, so not scoped to .s-Form) */
.select2-drop {
  border: 1px solid var(--hx-line) !important;
  border-radius: var(--hx-radius-md) !important;
  box-shadow: var(--hx-shadow-pop) !important;
  overflow: hidden !important;
  margin-top: 4px !important;
  /* Bug 6958: Select2 sizes the drop to match its (often narrow, e.g. a grid
     quick-filter) input via inline width, which forced long option labels
     like employee names to wrap across several lines. Let it grow to fit
     its content instead, within a sane range. */
  width: auto !important;
  min-width: 220px !important;
  max-width: 420px !important;
}
.select2-drop.select2-drop-above {
  border-radius: var(--hx-radius-md) !important;
  margin-top: -4px !important;
}
/* phones: the drop (up to 420px) is right-aligned by Select2 when it would
   overflow, which pushed its left half off-screen. Pin it to the screen
   width instead and let long labels wrap. */
@media (max-width: 767px) {
  .select2-drop {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  .select2-results .select2-result-label { white-space: normal; overflow-wrap: anywhere; }
}
.select2-drop .select2-search input {
  height: 36px !important;
  border: 1.5px solid var(--hx-line) !important;
  border-radius: 9px !important;
  background-color: var(--hx-surface-soft) !important;
  padding: 0 12px !important;
  font-size: 13px !important;
}
.select2-results .select2-result-label {
  padding: 9px 12px !important;
  font-size: 13px !important;
  color: var(--hx-ink-2) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.select2-results .select2-highlighted {
  background: rgba(73, 179, 228, .14) !important;
  color: var(--hx-sky-deep) !important;
}
.select2-results .select2-highlighted .select2-result-label {
  color: var(--hx-sky-deep) !important;
}

/* =====================================================================
   6. Date / DateTime / Time editors
   ===================================================================== */
.s-Form .s-DateEditor,
.s-Form .s-DateTimeEditor,
.s-Form input.dateQ,
.s-Form .s-TimeEditor select {
  height: 44px !important;
  min-height: 44px !important;
  border: 1.5px solid var(--hx-line) !important;
  border-radius: 11px !important;
  background-color: var(--hx-surface-soft) !important;
  box-sizing: border-box !important;
}
/* the calendar trigger button Serenity floats next to the date input */
/* Positioned inside the input rather than after it: inside a drawer
   dialog (.ui-dialog.hx-drawer), .field is a column flex (caption above
   input), so an in-flow trigger landed on its own line BELOW the input,
   38x44 and unmissable.
   Bug 6968: this was scoped to every .s-Form, but a field that keeps
   Serenity's default row layout (caption beside input - e.g. an explicit
   [LabelWidth], as EmpAdvanceRequestForm uses) already places the trigger
   correctly in-flow right after the input via the general appearance rule
   below. Forcing it absolute there too pinned it to the *field's* right
   edge rather than the narrower input's, landing it in the gutter past
   the input's own border. Scope the override to where the column layout
   (and its wrapping problem) actually happens. */
.ui-dialog.hx-drawer .field:has(> img.ui-datepicker-trigger),
.ui-dialog.hx-drawer .field:has(> .ui-datepicker-trigger) { position: relative; }
.ui-dialog.hx-drawer .s-Form .ui-datepicker-trigger {
  position: absolute !important;
  inset-inline-end: 11px !important;
  inset-block-end: 12px !important;
  z-index: 2;
  height: 20px !important;
  width: 20px !important;
  margin: 0 !important;
  /* no plate: the icon sits inside the input, so a second bordered box
     around it just reads as a control within a control */
  border: 0 !important;
  background: none !important;
  opacity: .8;
  cursor: pointer;
  transition: opacity .15s ease;
}
.ui-dialog.hx-drawer .s-Form .ui-datepicker-trigger:hover { opacity: 1; }
/* Bug 6973: a plain DateTime property (e.g. EmployeeCheck's CheckTime) renders
   as one combined widget - date input, this trigger, then an inline time
   select2 - all stacked as separate rows in the same column-flex .field. The
   inset-block-end anchor above assumes the trigger is the LAST row, so on this
   composite widget it landed flush against the field's bottom edge (the time
   row) instead of the date input above it. Anchor to the caption's height
   instead - a fixed constant across every drawer form - so it lines up with
   the date input regardless of what renders after it. */
/* In Arabic (RTL) Serenity/jQuery UI build this composite DateTime field in a different DOM order
   (time select, then date input), so the stacked rows came out time-over-date while the calendar
   trigger stays anchored to the first row. Force the visual order - date, time, now-button - so
   both languages render identically. */
.ui-dialog.hx-drawer .field:has(> .select2-container.time) > input.s-DateTimeEditor.dateQ { order: 1; }
.ui-dialog.hx-drawer .field:has(> .select2-container.time) > .select2-container.time { order: 2; }
.ui-dialog.hx-drawer .field:has(> .select2-container.time) > .inplace-now { order: 3; }
.ui-dialog.hx-drawer .field:has(> .select2-container.time) .ui-datepicker-trigger {
  inset-block-end: auto !important;
  top: 38px !important;
}
/* the datepicker panel itself is appended to <body>, as a sibling of the
   rail (z-index 1100) and other shell chrome -- not a descendant of the
   grid's own .hx-filters-panel, so jQuery UI's z-index auto-calc (based on
   the input's own ancestor stack) had no way to know about those siblings.
   It opened fine but rendered underneath them, reading as "nothing happens"
   when the trigger was clicked from a quick-filter panel or a form near the
   top of the page. Pin it above everything else in the shell explicitly. */
.ui-datepicker {
  z-index: 2100 !important;
  border: 1px solid var(--hx-line) !important;
  border-radius: var(--hx-radius-md) !important;
  box-shadow: var(--hx-shadow-pop) !important;
  padding: 10px !important;
  font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
  background: var(--hx-surface) !important;
}
.ui-datepicker .ui-datepicker-header {
  background: transparent !important;
  border: none !important;
  color: var(--hx-navy) !important;
  font-weight: 800 !important;
  padding-bottom: 6px !important;
}
.ui-datepicker td .ui-state-default {
  border: none !important;
  background: transparent !important;
  border-radius: 8px !important;
  text-align: center !important;
  color: var(--hx-ink-2) !important;
  padding: 6px !important;
}
.ui-datepicker td .ui-state-default:hover {
  background: rgba(73, 179, 228, .12) !important;
  color: var(--hx-sky-deep) !important;
}
.ui-datepicker td .ui-state-active,
.ui-datepicker td .ui-state-highlight {
  background: var(--hx-navy) !important;
  color: #fff !important;
}

/* =====================================================================
   7. Checkboxes
   ===================================================================== */
.s-Form input[type="checkbox"],
.s-Form input.checkbox,
.s-Form input[type="checkbox"].editor {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  border: 1.5px solid var(--hx-line) !important;
  border-radius: 6px !important;
  background-color: var(--hx-surface-soft) !important;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  flex: 0 0 auto;
  margin-top: 12px !important;
  transition: background-color .15s ease, border-color .15s ease;
}
/* The tick used to be a ::after pseudo-element (rotated border, no sprite
   needed); painting it as part of the checkbox's own background instead
   was an earlier attempt at a since-disproven "drawer repaint" theory (see
   git history) -- the REAL reason the tick + blue fill went invisible
   specifically inside a drawer was hrklix-theme.css's
   `.ui-dialog.hx-drawer input.editor:focus` rule: at (0,4,1) it out-
   specifies this :checked rule's (0,3,1), and its `background: #fff`
   shorthand resets background-image too -- so the instant a checkbox got
   focus (every click focuses it), that rule silently wiped this whole
   :checked background back to plain white, leaving only border-color/
   box-shadow (not part of a `background` shorthand) visibly blue. Fixed
   by excluding checkboxes from that focus rule instead. Kept as a
   background-image (not ::after) since it works fine either way now. */
.s-Form input[type="checkbox"]:checked {
  background-color: var(--hx-sky) !important;
  border-color: var(--hx-sky) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 9 18 20 6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 13px 13px !important;
}
.s-Form input[type="checkbox"]:focus {
  box-shadow: 0 0 0 4px rgba(73, 179, 228, .14) !important;
  border-color: var(--hx-sky) !important;
}
.s-Form input[type="checkbox"]:disabled {
  background-color: var(--hx-line-soft) !important;
  cursor: not-allowed;
}

/* =====================================================================
   8. Radio groups (s-RadioButtonEditor)
   Serenity renders <label><input type=radio> Text</label> pairs.
   Kept as real radios (not converted to segmented pills) so multi-option
   groups of any length still read correctly — the segmented pill look is
   provided by the purpose-built Hrklix.SegmentedEnum editor in section 10.
   ===================================================================== */
.s-Form .s-RadioButtonEditor {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  min-height: 44px;
  padding-top: 4px;
}
.s-Form .s-RadioButtonEditor label {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--hx-ink-2) !important;
  cursor: pointer;
}
/* Same bug as .field[style*="display: none"] in hrklix-theme.css: this
   `display: inline-flex !important` outranks a jQuery .hide() applied to
   one specific option's <label> -- e.g. HrLetterRequestDialog hiding the
   "Company Bridge" radio option (invalid for HR letters), which stayed
   visible despite the inline display:none it correctly received. Restore
   hide() semantics for individual radio labels too. */
.s-Form .s-RadioButtonEditor label[style*="display: none"],
.s-Form .s-RadioButtonEditor label[style*="display:none"] {
  display: none !important;
}
.s-Form .s-RadioButtonEditor input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid var(--hx-line) !important;
  border-radius: 50% !important;
  background: var(--hx-surface-soft) !important;
  margin: 0 !important;
  top: 0 !important;
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
}
.s-Form .s-RadioButtonEditor input[type="radio"]:checked {
  border-color: var(--hx-sky) !important;
  background: #fff !important;
}
.s-Form .s-RadioButtonEditor input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--hx-sky);
}
.s-Form .s-RadioButtonEditor input[type="radio"]:focus {
  box-shadow: 0 0 0 4px rgba(73, 179, 228, .14) !important;
}

/* =====================================================================
   9. Inplace-add button (LookupEditor InplaceAdd = true) + upload editor
   ===================================================================== */
.s-Form .inplace-button {
  height: 44px !important;
  width: 40px !important;
  border: 1.5px solid var(--hx-line) !important;
  border-radius: 11px !important;
  background: var(--hx-surface-soft) !important;
  background-image: none !important;
  filter: none !important;
  margin-inline-start: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color .15s ease, background-color .15s ease;
}
.s-Form .inplace-button:hover {
  border-color: var(--hx-sky) !important;
  background: rgba(73, 179, 228, .08) !important;
}

.s-ImageUploadEditor,
.s-Form .s-ImageUploadEditor {
  border: 1.5px dashed var(--hx-line) !important;
  border-radius: 12px !important;
  background: var(--hx-surface-soft) !important;
  padding: 10px !important;
  transition: border-color .15s ease, background-color .15s ease;
}
.s-ImageUploadEditor:hover {
  border-color: var(--hx-sky) !important;
  background: rgba(73, 179, 228, .04) !important;
}
/* Bug 6970: a plain "pick one file" field ([FileUploadEditor], which renders
   as an ImageUploadEditor with hide-original-name and never shows thumbnails)
   still inherited the multi-image gallery's dashed dropzone look and its
   fixed-height file list (serenity.css: `.hide-original-name ul { min-height:
   100px }`) - so it rendered as a tall box with a mostly-empty area below the
   Select File / Delete buttons, next to normal 44px-tall fields like a
   dropdown. Collapse it to a single compact row instead; the dashed dropzone
   styling above stays intact for actual image galleries. */
.s-ImageUploadEditor.hide-original-name,
.s-Form .s-ImageUploadEditor.hide-original-name {
  border: 1.5px solid var(--hx-line) !important;
  border-radius: 11px !important;
  padding: 0 !important;
  overflow: hidden;
}
.s-ImageUploadEditor.hide-original-name:hover {
  border-color: var(--hx-sky) !important;
  background: var(--hx-surface-soft) !important;
}
.s-ImageUploadEditor.hide-original-name .s-Toolbar {
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 10px !important;
  min-height: 44px;
  display: flex !important;
  align-items: center !important;
}
.s-ImageUploadEditor.hide-original-name .tool-buttons,
.s-ImageUploadEditor.hide-original-name .buttons-outer,
.s-ImageUploadEditor.hide-original-name .buttons-inner {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
}
.s-ImageUploadEditor.hide-original-name ul {
  min-height: 0 !important;
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}
.s-ImageUploadEditor.hide-original-name ul:empty {
  display: none !important;
}

/* =====================================================================
   10. Segmented enum control (Hrklix.SegmentedEnum editor)
   The mock's .status-toggle / .stg-opt.
   ===================================================================== */
.hx-segmented {
  display: flex !important;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 44px;
  align-items: stretch;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
}
.hx-seg-opt {
  flex: 1 1 0;
  min-width: 84px;
  text-align: center;
  padding: 11px 10px;
  border: 1.5px solid var(--hx-line);
  border-radius: 11px;
  background: var(--hx-surface-soft);
  font-size: 13px;
  font-weight: 800;
  color: var(--hx-muted);
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
  font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}
.hx-seg-opt:hover { border-color: #C9D4E6; color: var(--hx-ink-2); }
.hx-seg-opt.is-active {
  border-color: var(--hx-green);
  background: var(--hx-green-bg);
  color: var(--hx-green-deep);
}
.hx-seg-opt:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(73, 179, 228, .18);
}
.hx-segmented.readonly .hx-seg-opt,
.hx-segmented[aria-disabled="true"] .hx-seg-opt {
  cursor: not-allowed;
  opacity: .6;
}

/* =====================================================================
   11. Map picker (Hrklix.MapPicker editor)
   The mock's .map-preview + .f-hint.
   ===================================================================== */
.hx-map-picker {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
}
.hx-map-preview {
  height: 120px;
  border-radius: 12px;
  border: 1.5px dashed var(--hx-line);
  background:
    linear-gradient(rgba(73, 179, 228, .06), rgba(73, 179, 228, .06)),
    repeating-linear-gradient(0deg, transparent, transparent 11px, rgba(20, 47, 104, .05) 11px, rgba(20, 47, 104, .05) 12px),
    repeating-linear-gradient(90deg, transparent, transparent 11px, rgba(20, 47, 104, .05) 11px, rgba(20, 47, 104, .05) 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hx-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease;
}
.hx-map-preview:hover { border-color: var(--hx-sky); }
.hx-map-preview .hx-map-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.hx-map-preview .icon {
  width: 22px;
  height: 22px;
  color: var(--hx-sky-deep);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hx-map-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--hx-muted);
  margin-top: 6px;
}
.hx-map-hint .icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =====================================================================
   12. Drawer-specific refinements
   Inside a drawer the caption moves ABOVE the editor (already established
   in hrklix-theme.css section 9b); undo the caption padding from section 1
   so the stacked label sits tight against its input.
   ===================================================================== */
.ui-dialog.hx-drawer .s-Form .caption,
.ui-dialog.hx-drawer .s-Form label.caption {
  padding-top: 0 !important;
  line-height: 1.4 !important;
}
.ui-dialog.hx-drawer .s-Form input[type="checkbox"] {
  margin-top: 0 !important;
}
.ui-dialog.hx-drawer .s-Form .s-RadioButtonEditor {
  padding-top: 0;
}

/* =====================================================================
   13. Panel-mode dialogs (@Serenity.Decorators.panel)
   34 screens render their form inline as a .s-Panel instead of a jQuery
   UI dialog. hrklix-drawer.js tags them .hx-form-panel on panelopen and
   suppresses the grid behind them.
   ===================================================================== */
.hx-panel-suppressed { display: none !important; }

.s-Panel.hx-form-panel {
  background: var(--hx-surface) !important;
  border: 1px solid var(--hx-line) !important;
  border-top: 1px solid var(--hx-line) !important;   /* kill serenity's 3px accent */
  border-radius: var(--hx-radius-lg) !important;
  box-shadow: var(--hx-shadow-card) !important;
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* the panel's own toolbar becomes the sticky bottom action bar, exactly as
   in the drawer — hrklix-drawer.js moves the buttons into .hx-drawer-footer */
.s-Panel.hx-form-panel > .hx-drawer-footer {
  border-top: 1px solid var(--hx-line);
  border-radius: 0 0 var(--hx-radius-lg) var(--hx-radius-lg);
}
.s-Panel.hx-form-panel .s-DialogContent,
.s-Panel.hx-form-panel > .s-Form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 24px !important;
}
/* category headings inside a panel read as section dividers, same as the
   drawer treatment */
.s-Panel.hx-form-panel .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;
}
.s-Panel.hx-form-panel .category-title::before {
  content: '';
  display: block;
  width: 3px; height: 16px;
  background: var(--hx-sky);
  border-radius: 2px;
  flex: 0 0 auto;
}
.s-Panel.hx-form-panel .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;
}
.s-Panel.hx-form-panel .fieldset.ui-widget-content {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}


/* ---------- Date picker trigger ----------
   Serenity/jQuery UI renders the trigger as <button class="ui-datepicker-
   trigger">buttonText</button> (an <img> instead only when a buttonImage
   URL is configured, which nothing here does). Left alone its text is a
   calendar emoji that picks up the OS emoji font and lands as a coloured
   sticker in an otherwise flat, monochrome UI.
   The glyph is collapsed (font-size:0, text pushed off-screen) and a line
   icon painted in via background-image instead -- deliberately NOT via the
   `content: url(...)` technique a previous pass here also tried further
   down this file: that block set `background: none` on the same selector,
   which (equal specificity, both !important, later in source) won the
   cascade and killed the background-image icon below outright. The two
   blocks were fighting each other over the same button. This is now the
   only one; applies everywhere -- forms, quick filters and filter dialogs
   alike, so `img.ui-datepicker-trigger` is covered by the same rule as a
   defensive fallback even though nothing currently renders one. */
.ui-datepicker-trigger,
img.ui-datepicker-trigger {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-indent: -9999px;
  content: none !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  margin-inline-start: 7px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='4.8' width='17.6' height='16' rx='3.2'/%3E%3Cpath d='M3.2 9.6h17.6'/%3E%3Cpath d='M8 2.8v3.6M16 2.8v3.6'/%3E%3Ccircle cx='8.4' cy='13.6' r='1.15' fill='%2364748B' stroke='none'/%3E%3Ccircle cx='12' cy='13.6' r='1.15' fill='%2364748B' stroke='none'/%3E%3Ccircle cx='15.6' cy='13.6' r='1.15' fill='%2364748B' stroke='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 17px 17px !important;
  box-shadow: none !important;
  float: none !important;
  display: inline-block !important;
  align-self: center !important;
  vertical-align: middle;
  opacity: .85;
  cursor: pointer;
}
.ui-datepicker-trigger img { display: none !important; }
.ui-datepicker-trigger:hover,
img.ui-datepicker-trigger:hover {
  opacity: 1;
  background-color: rgba(73, 179, 228, .10) !important;
}

/* In the filter bar the trigger sits inside a pill, so it's a bit bigger
   and drops the hover box */
.quick-filters-bar .ui-datepicker-trigger,
.s-QuickFilterBar .ui-datepicker-trigger,
.filter-panel .ui-datepicker-trigger {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  margin: 0 2px !important;
  border-radius: 8px !important;
}
.quick-filters-bar .ui-datepicker-trigger:hover,
.s-QuickFilterBar .ui-datepicker-trigger:hover,
.filter-panel .ui-datepicker-trigger:hover {
  background-color: transparent !important;
}


/* =====================================================================
   Boolean editors are checkboxes, not text fields
   ---------------------------------------------------------------------
   The 44px text-input geometry earlier in this file was reaching
   input.editor even when that input is a checkbox, so a BooleanEditor
   came out 218x44 -- a big empty box that reads as a text field (seen on
   Attendance Overtime Rule -> Rule's list -> Is Paid). The existing
   exclusion only reset height and was scoped to .s-Form, which a panel
   detail dialog does not always match. This one is container-independent
   and pins width as well.
   ===================================================================== */
input[type="checkbox"].editor,
input[type="radio"].editor,
.field input[type="checkbox"],
.field input[type="radio"],
.s-PropertyGrid input[type="checkbox"],
.s-PropertyGrid input[type="radio"] {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin-block: 12px !important;
  align-self: center;
  box-sizing: border-box !important;
}
input[type="radio"].editor,
.field input[type="radio"] { border-radius: 50% !important; }

/* The drawer rules in hrklix-theme.css stretch every .editor to width:100%
   at specificity (0,4,1), which beat the checkbox sizing above and left a
   20px-tall box stretched across the whole field. Same intent, higher
   specificity, so a checkbox stays a checkbox inside a drawer too.

   align-self:flex-start also overrides the general rule's align-self:center
   above -- that centers a checkbox on the CROSS axis, which is vertical
   centering next to a same-row label in a normal (row-direction) field, the
   context it was written for. Drawer/panel fields are flex-direction:column
   (label above, editor below), where the cross axis is horizontal, so
   "center" pulled the checkbox away from its label into the middle of the
   field's full width -- a big, confusing gap ("Is Active", then empty
   space, then the checkbox). Left-align it right under the label instead. */
.ui-dialog.hx-drawer .s-Form .field > input[type="checkbox"].editor,
.ui-dialog.hx-drawer .s-Form .field > input[type="radio"].editor,
.ui-dialog.hx-drawer .s-Form input[type="checkbox"].editor,
.ui-dialog.hx-drawer .s-Form input[type="radio"].editor {
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  align-self: flex-start !important;
}


/* =====================================================================
   Relative ("smart") date/time stamp — Modules/Common/editors/HxRelativeTimeEditor.ts
   Reads as a field, not an input: same box as a read-only editor, the
   phrase in the foreground and the exact timestamp beside it.
   ===================================================================== */
.s-Form .hx-relative-time,
.ui-dialog .hx-relative-time {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 1.5px solid var(--hx-line);
  border-radius: 11px;
  background: var(--hx-surface-soft);
  cursor: default;
}
.s-Form .hx-relative-time .hx-rel-phrase,
.ui-dialog .hx-relative-time .hx-rel-phrase {
  font-weight: 600;
  color: var(--hx-ink, #1f2b46);
  white-space: nowrap;
}
.s-Form .hx-relative-time.hx-rel-empty .hx-rel-phrase,
.ui-dialog .hx-relative-time.hx-rel-empty .hx-rel-phrase {
  font-weight: 500;
  opacity: .5;
}

/* ---------------------------------------------------------------------
   Social insurance summary (Employee > Salary tab, EmployeeDialog.ts).
   What the record entered costs, recomputed live by
   Services/Payroll/SocialInsurance/Preview. Tokens only.
   --------------------------------------------------------------------- */
.hx-si-summary {
  margin: 6px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--hx-line);
  border-left: 4px solid var(--hx-sky);
  border-radius: var(--hx-radius-md);
  background: var(--hx-surface-soft);
  color: var(--hx-ink);
  font-family: var(--hx-font-ui);
  font-size: 13px;
  line-height: 1.5;
}
.hx-si-summary.is-off { border-left-color: var(--hx-muted); }
.hx-si-summary.has-error { border-left-color: var(--hx-red); }
.hx-si-summary .hx-si-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px 18px;
}
.hx-si-summary .hx-si-label {
  display: block;
  color: var(--hx-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hx-si-summary .hx-si-value {
  font-family: var(--hx-font-data);
  font-size: 15px;
  font-weight: 600;
  color: var(--hx-navy);
}
.hx-si-summary .hx-si-note { margin-top: 8px; color: var(--hx-ink-2); }
.hx-si-summary .hx-si-msg {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: var(--hx-radius-sm);
}
.hx-si-summary .hx-si-msg.is-warning { background: var(--hx-orange-bg); color: var(--hx-orange-deep); }
.hx-si-summary .hx-si-msg.is-error { background: var(--hx-red-bg); color: var(--hx-red); }
.hx-field-hint {
  margin: 4px 0 0;
  color: var(--hx-muted);
  font-size: 12px;
}

/* ---------------------------------------------------------------------
   Progressive disclosure (Common.HxDisclosure) and the medical screens
   --------------------------------------------------------------------- */
.hx-gone { display: none !important; }
.hx-collapsed { display: none !important; }
.hx-row-muted .slick-cell { color: var(--hx-muted); }

.hx-more {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 6px 0 10px; font-size: 12.5px; color: var(--hx-muted);
}
.hx-more a { color: var(--hx-sky-deep); font-weight: 600; cursor: pointer; text-decoration: none; }
.hx-more a:hover { text-decoration: underline; }

.hx-mc-budget, .hx-med-cost {
  border: 1px solid var(--hx-line); border-radius: var(--hx-radius-md);
  background: var(--hx-surface-soft); padding: 12px 14px; margin: 0 0 12px;
  font-family: var(--hx-font-ui); color: var(--hx-ink);
}
.hx-mc-budget[hidden] { display: none; }
/* the insurer's logo under the insurer dropdown on a medical contract */
.hx-mc-insurer { margin-top: 8px; }
.hx-mc-insurer[hidden] { display: none; }
.hx-mc-insurer img { display: block; max-height: 44px; max-width: 180px; object-fit: contain; padding: 4px 8px; background: #fff; border: 1px solid var(--hx-line); border-radius: 8px; }
.hx-mc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.hx-mc-title, .hx-med-title { font-weight: 700; font-size: 13px; color: var(--hx-ink); }
.hx-mc-pill { font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.hx-mc-pill.ok { background: var(--hx-green-bg); color: var(--hx-green-deep); }
.hx-mc-pill.warn { background: var(--hx-orange-bg); color: var(--hx-orange-deep); }
.hx-mc-pill.over { background: var(--hx-red-bg); color: var(--hx-red); }
.hx-mc-bar { height: 8px; border-radius: 999px; background: var(--hx-line); overflow: hidden; margin-bottom: 10px; }
.hx-mc-bar i { display: block; height: 100%; border-radius: 999px; }
.hx-mc-bar i.ok { background: var(--hx-green); }
.hx-mc-bar i.warn { background: var(--hx-orange); }
.hx-mc-bar i.over { background: var(--hx-red); }
.hx-mc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; }
.hx-mc-cell { display: flex; flex-direction: column; }
.hx-mc-label { font-size: 11.5px; color: var(--hx-muted); }
.hx-mc-value { font-size: 14px; font-variant-numeric: tabular-nums; }
.hx-mc-value.strong { font-weight: 700; }
.hx-mc-msg, .hx-med-msg { margin-top: 8px; font-size: 12.5px; color: var(--hx-orange-deep); }
.hx-med-msg.is-error, .hx-med-cost.has-error { color: var(--hx-red); }
.hx-med-cost.has-error { border-color: var(--hx-red); background: var(--hx-red-bg); }
/* the contract dialog: "Distribute the contract value" above the age bands, its confirm, and the enrolled-employees card */
.hx-mc-distribute { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 8px; }
.hx-mc-distribute .hx-btn[disabled] { opacity: .55; cursor: not-allowed; }
.hx-mc-distribute-hint { font-size: 12.5px; color: var(--hx-orange-deep); }
.hx-mc-distribute-list { margin: 0 0 8px; padding-inline-start: 18px; font-size: 13px; }
.hx-mc-distribute-table { border-collapse: collapse; font-size: 12.5px; margin: 0 0 8px; }
.hx-mc-distribute-table th, .hx-mc-distribute-table td { padding: 3px 10px; border-bottom: 1px solid var(--hx-line-soft); text-align: start; font-weight: 500; }
.hx-mc-distribute-table th { font-size: 11px; text-transform: uppercase; color: var(--hx-muted); }
.hx-mc-distribute-table td:nth-child(n+2), .hx-mc-distribute-table th:nth-child(n+2) { text-align: end; font-variant-numeric: tabular-nums; }
.hx-mc-distribute-note { margin: 4px 0 0; font-size: 12px; color: var(--hx-muted); }
.hx-mc-distribute-warn { margin: 4px 0 0; font-size: 12px; color: var(--hx-orange-deep); }
.hx-mc-enrolled .hx-mc-head { justify-content: flex-start; flex-wrap: wrap; gap: 8px 12px; }
.hx-mc-enrolled .hx-mc-actions { margin-inline-start: auto; }
.hx-mc-empty { font-size: 13px; color: var(--hx-muted); }
.hx-mc-table { margin-top: 4px; }
.hx-mc-table td b { font-weight: 600; }
.hx-mc-code { display: block; font-size: 11.5px; color: var(--hx-muted); }
.hx-mc-table tr.is-ended td { color: var(--hx-muted); }
.hx-mc-row-actions { white-space: nowrap; text-align: end; }
.hx-mc-row-actions .hx-link + .hx-link { margin-inline-start: 10px; }
.hx-mc-row-actions .hx-link.is-danger { color: var(--hx-red); }
.hx-mc-table .hx-chip.is-active { background: var(--hx-green-bg); color: var(--hx-green-deep); }
.hx-mc-table .hx-chip.is-ended { background: var(--hx-red-bg); color: var(--hx-red); }
.hx-mc-table .hx-chip.is-future { background: #e8f1fb; color: var(--hx-sky-deep); }
.hx-mc-enddate { font: inherit; padding: 6px 10px; border: 1px solid var(--hx-line); border-radius: 8px; }

.hx-med-line { display: flex; justify-content: space-between; padding: 2px 0; font-size: 13px; }
.hx-med-line b { font-variant-numeric: tabular-nums; }
.hx-med-line.total { border-top: 1px solid var(--hx-line); margin-top: 4px; padding-top: 6px; font-weight: 700; }
.hx-med-split { display: flex; height: 8px; border-radius: 999px; overflow: hidden; margin: 8px 0 6px; background: var(--hx-line); }
.hx-med-split i.emp { background: var(--hx-sky); }
.hx-med-split i.co { background: var(--hx-navy-3); }
.hx-med-pay { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--hx-ink-2); }

.hx-mcost { margin: 0 0 10px; }
.hx-mcost-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.hx-mcost-card {
  border: 1px solid var(--hx-line); border-radius: var(--hx-radius-md);
  background: var(--hx-surface); padding: 10px 14px; display: flex; flex-direction: column;
}
.hx-mcost-card span { font-size: 11.5px; color: var(--hx-muted); }
.hx-mcost-card b { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--hx-ink); }
.hx-mcost-card.strong { border-color: var(--hx-navy-3); }
.hx-mcost-card.strong b { color: var(--hx-navy-3); }
.hx-mcost-by { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.hx-mcost-chip { font-size: 12px; padding: 2px 10px; border-radius: 999px; background: var(--hx-surface-soft); border: 1px solid var(--hx-line); color: var(--hx-ink-2); }

/* ---------------------------------------------------------------------
   Employee dialog > Salary tab: a summary strip and six numbered cards
   --------------------------------------------------------------------- */
.hx-salary-tab { counter-reset: hxcard; }
.hx-salary-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px;
  margin: 0 0 14px;
}
.hx-salary-cell {
  background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: var(--hx-radius-md);
  padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.hx-salary-cell span { font-size: 11.5px; color: var(--hx-muted); }
.hx-salary-cell b { font-size: 15px; color: var(--hx-ink); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-salary-pill {
  align-self: flex-start; font-style: normal; font-size: 12px; font-weight: 700;
  padding: 2px 12px; border-radius: 999px;
}
.hx-salary-pill.is-on { background: var(--hx-green-bg); color: var(--hx-green-deep); }
.hx-salary-pill.is-off { background: var(--hx-red-bg); color: var(--hx-red); }

.hx-salary-tab .category {
  background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: var(--hx-radius-md);
  box-shadow: var(--hx-shadow-card); padding: 4px 16px 12px; margin: 0 0 14px;
}
.hx-salary-tab .category-title {
  counter-increment: hxcard; display: flex; align-items: center; gap: 10px;
  font-family: var(--hx-font-display); font-weight: 700; font-size: 14px; color: var(--hx-ink);
  border: 0; border-bottom: 1px solid var(--hx-line-soft); padding: 12px 0 10px; margin: 0 0 10px;
}
.hx-salary-tab .category-title::before {
  content: counter(hxcard); width: 22px; height: 22px; border-radius: 50%;
  background: var(--hx-navy-3); color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.hx-salary-note { font-size: 12.5px; color: var(--hx-muted); padding: 2px 0 6px; }

.hx-more-link {
  background: none; border: 0; padding: 2px 0; cursor: pointer; font: inherit;
  color: var(--hx-sky-deep); font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
}
.hx-more-link:hover { text-decoration: underline; }
.hx-more-chevron {
  width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s;
}
.hx-more-link[aria-expanded="true"] .hx-more-chevron { transform: rotate(45deg); }
[dir="rtl"] .hx-more-chevron, .rtl .hx-more-chevron { transform: rotate(135deg); }
.hx-more-sum { color: var(--hx-muted); font-size: 12.5px; }

/* the links sit on their own line, under the half-width fields they belong to */
.hx-more { clear: both; width: 100%; float: none; }
.hx-si-summary { clear: both; }

/* beat the `.field { display:flex !important }` rules; the categories are wrapping flex rows */
.s-Form .field.hx-gone, .s-Form .field.hx-collapsed, .s-Form .category.hx-gone, .s-Form .category.hx-collapsed,
.hx-gone.hx-gone, .hx-collapsed.hx-collapsed { display: none !important; }
.hx-more, .hx-si-summary, .hx-med-cost, .hx-salary-note, .hx-mc-budget { flex: 0 0 100%; box-sizing: border-box; }

/* drawers and panels set display on .field with long selectors; match their weight */
html body .ui-dialog.hx-drawer .s-Form .field.hx-collapsed,
html body .ui-dialog.hx-drawer .s-Form .field.hx-gone,
html body .ui-dialog .s-Form .categories .category.hx-collapsed,
html body .ui-dialog .s-Form .categories .category.hx-gone,
html body .s-Form .categories .category .field.hx-collapsed,
html body .s-Form .categories .category .field.hx-gone,
html body .s-Form .categories .category.hx-collapsed,
html body .s-Form .categories .category.hx-gone { display: none !important; }

/* =====================================================================
   Popup polish (every dialog and drawer)
   - the close button always sits in the header corner
   - section tabs live in a light strip under the header, not inside it
   - slimmer inputs, quiet scrollbars
   ===================================================================== */
html body .ui-dialog .ui-dialog-titlebar { padding-inline-end: 58px !important; min-height: 60px; display: flex; align-items: center; }
html body .ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
  position: absolute !important; top: 50% !important; transform: translateY(-50%) !important;
  inset-inline-end: 14px !important; inset-inline-start: auto !important; margin: 0 !important;
  z-index: 3; float: none !important;
}
html body .ui-dialog .ui-dialog-titlebar .ui-dialog-title { float: none !important; margin: 0 !important; width: auto !important; }

html body .hx-drawer-tabbar {
  display: flex; gap: 2px; margin: 0; padding: 0 16px; border: 0; border-bottom: 1px solid var(--hx-line);
  background: var(--hx-surface-soft); overflow-x: auto; flex: 0 0 auto;
}
html body .hx-dtab { color: var(--hx-muted); font-size: 12.5px; padding: 10px 12px; font-family: var(--hx-font-ui); }
html body .hx-dtab:hover { color: var(--hx-ink); }
html body .hx-dtab.active { color: var(--hx-navy-3); border-bottom-color: var(--hx-sky-deep); }

html body .ui-dialog .s-Form input.editor:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html body .ui-dialog .s-Form select.editor,
html body .ui-dialog .s-Form .select2-container .select2-choice {
  height: 40px !important; min-height: 40px !important; max-height: 40px !important;
  border-radius: 10px !important; font-size: 13.5px !important; box-sizing: border-box !important;
}
html body .ui-dialog .s-Form .select2-container .select2-choice > .select2-chosen { line-height: 38px !important; }
html body .ui-dialog .s-Form .select2-container .select2-choice .select2-arrow { height: 38px !important; }
html body .ui-dialog .s-Form .select2-container-multi .select2-choices { min-height: 40px !important; border-radius: 10px !important; }
html body .ui-dialog .s-Form .field > label { font-size: 12.5px; font-weight: 600; color: var(--hx-ink-2); }

.ui-dialog ::-webkit-scrollbar { width: 8px; height: 8px; }
.ui-dialog ::-webkit-scrollbar-track { background: transparent; }
.ui-dialog ::-webkit-scrollbar-thumb { background: #cdd5e4; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.ui-dialog ::-webkit-scrollbar-thumb:hover { background: #aab5cc; background-clip: content-box; }
.ui-dialog ::-webkit-scrollbar-button { display: none; }

/* ---- Salary tab: a quiet column of cards, labels above fields ---- */
.hx-salary-tab .category-links { display: none !important; }
.hx-salary-tab .categories { max-width: 1040px; margin: 0 auto; }
.hx-salary-tab .category .field > label, .hx-salary-tab .category .field .caption { text-align: start !important; }
.hx-salary-tab .category .field { flex-direction: column !important; align-items: stretch !important; padding-inline: 8px; }
.hx-salary-tab .category .field > label { width: auto !important; margin: 0 0 5px !important; padding: 0 !important; }
.hx-salary-tab .category .field .editor, .hx-salary-tab .category .field .select2-container { max-width: 100%; }
.hx-salary-tab .s-GridEditorBase .grid-container, .hx-salary-tab .grid-container { height: auto !important; min-height: 0 !important; }
.hx-salary-tab .slick-viewport { height: auto !important; min-height: 44px; max-height: 240px; }
.hx-salary-tab .grid-toolbar { padding: 6px 0 !important; }
.hx-salary-strip { max-width: 1040px; margin-inline: auto; margin-bottom: 14px; }

/* Salary tab finishing: no stray buttons, calendar icon inside its input, cards inside the pane */
.hx-salary-tab .categories { padding-inline: 2px; box-sizing: border-box; }
.hx-salary-tab .category { box-sizing: border-box; width: 100%; max-width: 100%; }
.hx-salary-tab .category .field { position: relative; margin-bottom: 10px; padding-bottom: 0; }
.hx-salary-tab .category .field .ui-datepicker-trigger {
  position: absolute !important; inset-inline-end: 22px !important; bottom: 9px !important; top: auto !important;
  height: 20px !important; width: 20px !important; margin: 0 !important; border: 0 !important; background: none !important; opacity: .75;
}
.hx-salary-tab .category .field:last-child { margin-bottom: 4px; }
html body .hx-salary-tab .category .field .ui-datepicker-trigger {
  position: absolute !important; inset-inline-end: 14px !important; bottom: 10px !important; top: auto !important;
}
html body .hx-salary-tab .category .field:has(> .ui-datepicker-trigger) { position: relative; }

/* Scrollbars inside popups: slim, no arrow buttons. The standard `scrollbar-width` /
   `scrollbar-color` properties are deliberately NOT used: in Chrome and Edge they switch the
   ::-webkit-scrollbar rules off and bring back the Windows scrollbar with its arrows. */
html body .ui-dialog ::-webkit-scrollbar, html body .ui-dialog::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
html body .ui-dialog ::-webkit-scrollbar-track { background: transparent; }
html body .ui-dialog ::-webkit-scrollbar-thumb { background: #d3d9e6; border-radius: 6px; border: 0; }
html body .ui-dialog ::-webkit-scrollbar-thumb:hover { background: #aab5cc; }
html body .ui-dialog ::-webkit-scrollbar-button,
html body .ui-dialog ::-webkit-scrollbar-button:start:decrement,
html body .ui-dialog ::-webkit-scrollbar-button:end:increment { display: none !important; width: 0 !important; height: 0 !important; }
html body .ui-dialog ::-webkit-scrollbar-corner { background: transparent; }

/* ---------------------------------------------------------------------
   Accordion groups (hrklix-accordion.js) and the single scroll rule
   --------------------------------------------------------------------- */
.hx-acc > .category-title { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 10px; border-radius: 8px; }
.hx-acc > .category-title:hover { background: var(--hx-surface-soft); }
.hx-acc > .category-title:focus-visible { outline: 2px solid var(--hx-sky); outline-offset: 2px; }
.hx-acc > .category-title::after {
  content: ""; margin-inline-start: auto; margin-inline-end: 6px; width: 7px; height: 7px; flex: 0 0 auto;
  border-right: 2px solid var(--hx-muted); border-bottom: 2px solid var(--hx-muted);
  transform: rotate(45deg); transition: transform .15s;
}
.hx-acc.hx-acc-closed > .category-title::after { transform: rotate(-45deg); }
[dir="rtl"] .hx-acc.hx-acc-closed > .category-title::after, :lang(ar) .hx-acc.hx-acc-closed > .category-title::after { transform: rotate(135deg); }
html body .hx-acc.hx-acc-closed > :not(.category-title) { display: none !important; }
html body .hx-acc.hx-acc-closed { padding-bottom: 0; }

/* one scrollbar per popup: the popup body scrolls, never the form inside it */
html body .ui-dialog .s-Form .categories,
html body .ui-dialog .s-PropertyGrid .categories,
html body .ui-dialog .s-PropertyGrid .tab-pane { overflow: visible !important; max-height: none !important; height: auto !important; }

/* date icon: inside its input, whatever the field layout */
html body .hx-salary-tab .category .field .ui-datepicker-trigger {
  position: relative !important; inset: auto !important; display: block !important; float: none !important;
  margin-block: -30px 10px !important; margin-inline: auto 14px !important; height: 20px !important; width: 20px !important;
  border: 0 !important; background: none !important; pointer-events: auto;
}

/* while a popup is open the page behind it does not scroll: one scrollbar, the popup's */
html:has(.ui-dialog.hx-drawer:visible), html:has(.ui-dialog.hx-drawer:visible) body { overflow: hidden !important; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
html::-webkit-scrollbar-thumb { background: #cdd5e4; border-radius: 8px; }
html::-webkit-scrollbar-thumb:hover { background: #aab5cc; }
html::-webkit-scrollbar-button { display: none !important; width: 0; height: 0; }
.hx-salary-tab .categories { padding-inline: 6px; }
.hx-salary-tab .category { width: calc(100% - 2px); }

/* Serenity's in-place add button: "+" while the lookup is empty, the pencil once a value is picked
   (Serenity adds the `edit` class itself). The theme had drawn "+" for both states. */
html body .s-Form .inplace-button.inplace-create.edit b,
html body .ui-dialog .inplace-button.inplace-create.edit 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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") !important;
  background-size: 16px 16px !important;
}
html body .ui-dialog .s-Form .inplace-button { height: 40px !important; width: 38px !important; border-radius: 10px !important; flex: 0 0 auto; }

/* a lookup with its in-place button keeps both on one row, under the caption */
.hx-salary-tab .category .field:has(> .inplace-button) { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 6px; }
.hx-salary-tab .category .field:has(> .inplace-button) > label { grid-column: 1 / -1; }
.hx-salary-tab .category .field:has(> .inplace-button) > .inplace-button { margin-block-start: 0 !important; }

/* =====================================================================
   Thin, even fields everywhere (pages and popups alike)
   ===================================================================== */
html body .s-Form input.editor:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html body .s-Form select.editor,
html body .s-Form .select2-container .select2-choice {
  height: 40px !important; min-height: 40px !important; max-height: 40px !important;
  border-radius: 10px !important; font-size: 13.5px !important; box-sizing: border-box !important;
}
html body .s-Form .select2-container .select2-choice > .select2-chosen { line-height: 38px !important; }
html body .s-Form .select2-container .select2-choice .select2-arrow { height: 38px !important; }
html body .s-Form .select2-container-multi .select2-choices { min-height: 40px !important; border-radius: 10px !important; }
html body .s-Form .inplace-button { height: 40px !important; width: 38px !important; border-radius: 10px !important; flex: 0 0 auto; }
html body .s-Form .field > label { font-size: 12.5px; font-weight: 600; color: var(--hx-ink-2); margin-bottom: 4px !important; }

/* Salary tab cards: a two-column grid so left and right edges line up, tight rows */
html body .hx-salary-tab .categories .category {
  display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 16px; row-gap: 14px; align-content: start; padding: 4px 16px 14px;
}
html body .hx-salary-tab .category > .category-title,
html body .hx-salary-tab .category > .hx-more,
html body .hx-salary-tab .category > .hx-si-summary,
html body .hx-salary-tab .category > .hx-salary-note,
html body .hx-salary-tab .category > .field:not(.col-sm-6) { grid-column: 1 / -1; }
html body .hx-salary-tab .category > .field { width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; flex: none !important; }
html body .hx-salary-tab .category > .category-title { margin-bottom: 2px !important; padding: 10px 0 8px !important; }
html body .hx-salary-tab .category > .field.hx-gone, html body .hx-salary-tab .category > .field.hx-collapsed { display: none !important; }

/* every form: tight, even rows (the widths still come from [HalfWidth] / [FormWidth]) */
html body .s-Form .categories .category { row-gap: 14px; }
html body .s-Form .categories .category > .field { margin-top: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; }
html body .s-Form .categories .category > .category-title { margin-bottom: 4px !important; }

/* the validation placeholder under every field reserved ~24px even when empty */
html body .s-Form .field > .vx { min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1.3; }
html body .s-Form .field > .vx:empty { display: none !important; }
html body .s-Form .field > .vx:not(:empty) { margin-top: 3px !important; font-size: 12px; }

/* =====================================================================
   Controls, final pass: one look for text inputs, dropdowns and date boxes
   - a white face with a fine border and a hint of depth (the old Serenity
     inputs read as real fields; the flat grey ones did not)
   - the clear "x" and the arrow share the text's centre line
   - the open list is as wide as its field (hrklix-controls.js)
   ===================================================================== */
html body .s-Form input.editor:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html body .s-Form select.editor,
html body .s-Form textarea.editor,
html body .s-Form .select2-container .select2-choice,
html body .s-Form .select2-container-multi .select2-choices {
  background: #fff !important;
  border: 1px solid #d3dbea !important;
  box-shadow: 0 1px 2px rgba(16, 26, 51, .06), inset 0 1px 1px rgba(16, 26, 51, .025) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}
html body .s-Form input.editor:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
html body .s-Form .select2-container:not(.select2-container-disabled) .select2-choice:hover { border-color: #aebbd4 !important; }
html body .s-Form input.editor:focus,
html body .s-Form textarea.editor:focus,
html body .s-Form .select2-container-active .select2-choice,
html body .s-Form .select2-container-active .select2-choices,
html body .s-Form .select2-dropdown-open .select2-choice {
  border-color: var(--hx-sky-deep) !important;
  box-shadow: 0 0 0 3px rgba(73, 179, 228, .22) !important;
}
html body .s-Form input.editor[readonly], html body .s-Form input.editor:disabled,
html body .s-Form .select2-container-disabled .select2-choice { background: var(--hx-surface-soft) !important; box-shadow: none !important; }

/* one centre line for text, clear-x and arrow */
html body .s-Form .select2-container .select2-choice { position: relative; padding: 0 0 0 12px !important; display: flex !important; align-items: center; }
html body .s-Form .select2-container .select2-choice > .select2-chosen {
  flex: 1 1 auto; min-width: 0; margin: 0 !important; line-height: 38px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html body .s-Form .select2-container .select2-choice abbr.select2-search-choice-close {
  position: static !important; flex: 0 0 auto; display: block; width: 12px; height: 12px; margin: 0 4px !important;
  top: auto !important; right: auto !important; left: auto !important; opacity: .55; align-self: center;
}
html body .s-Form .select2-container .select2-choice abbr.select2-search-choice-close:hover { opacity: 1; }
html body .s-Form .select2-container .select2-choice .select2-arrow {
  position: static !important; flex: 0 0 28px; width: 28px !important; height: 100% !important;
  display: flex !important; align-items: center; justify-content: center;
}
html body .s-Form .select2-container .select2-choice .select2-arrow b { position: static !important; width: 16px !important; height: 16px !important; margin: 0 !important; display: block !important; }
html body .s-Form .select2-container-multi .select2-search-choice-close { top: 50% !important; margin-top: -6px; }

/* the open list */
html body .select2-drop { border: 1px solid #d3dbea !important; border-radius: 12px !important; box-shadow: 0 12px 32px -8px rgba(13, 32, 80, .28) !important; margin-top: 4px !important; }
html body .select2-drop.select2-drop-above { margin-top: -4px !important; }
html body .select2-drop .select2-search { padding: 8px 8px 4px !important; }
html body .select2-drop .select2-search input { height: 36px !important; border: 1px solid #d3dbea !important; border-radius: 9px !important; background-color: #fff !important; box-shadow: none !important; }
html body .select2-drop .select2-search input:focus { border-color: var(--hx-sky-deep) !important; box-shadow: 0 0 0 3px rgba(73, 179, 228, .22) !important; }
html body .select2-results { padding: 4px !important; max-height: 260px; }
html body .select2-results .select2-result-label { border-radius: 8px; padding: 8px 10px !important; }
html body .select2-results .select2-highlighted { background: rgba(73, 179, 228, .14) !important; }
html body .select2-results .select2-highlighted .select2-result-label { color: var(--hx-navy) !important; }

/* slim scrollbars, no arrow buttons, in lookup lists and grids too */
html body .select2-results::-webkit-scrollbar, html body .slick-viewport::-webkit-scrollbar, html body .s-DataGrid ::-webkit-scrollbar { width: 6px; height: 6px; background: transparent; }
html body .select2-results::-webkit-scrollbar-thumb, html body .slick-viewport::-webkit-scrollbar-thumb, html body .s-DataGrid ::-webkit-scrollbar-thumb { background: #d3d9e6; border-radius: 6px; }
html body .select2-results::-webkit-scrollbar-thumb:hover, html body .slick-viewport::-webkit-scrollbar-thumb:hover { background: #aab5cc; }
html body .select2-results::-webkit-scrollbar-button, html body .slick-viewport::-webkit-scrollbar-button, html body .s-DataGrid ::-webkit-scrollbar-button { display: none !important; width: 0; height: 0; }

/* =====================================================================
   Popups never draw a scrollbar. They still scroll (wheel, trackpad,
   touch, keyboard); grids inside keep their own thin bar.
   ===================================================================== */
html body .ui-dialog .ui-dialog-content,
html body .ui-dialog .s-DialogContent,
html body .ui-dialog .fieldset,
html body .ui-dialog .s-PropertyGrid,
html body .ui-dialog .s-PropertyGrid .tab-pane,
html body .ui-dialog .categories,
html body .ui-dialog .s-Form {
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}
html body .ui-dialog .ui-dialog-content::-webkit-scrollbar,
html body .ui-dialog .s-DialogContent::-webkit-scrollbar,
html body .ui-dialog .fieldset::-webkit-scrollbar,
html body .ui-dialog .s-PropertyGrid::-webkit-scrollbar,
html body .ui-dialog .s-PropertyGrid .tab-pane::-webkit-scrollbar,
html body .ui-dialog .categories::-webkit-scrollbar,
html body .ui-dialog .s-Form::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; background: transparent !important; }

/* number, decimal and date editors carry their own classes (no `.editor`): same face and height */
html body .s-Form .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not(.select2-input):not(.select2-focusser):not(.select2-offscreen):not(.s-QuickSearchInput) {
  height: 40px !important; min-height: 40px !important; max-height: 40px !important; box-sizing: border-box !important;
  background: #fff !important; border: 1px solid #d3dbea !important; border-radius: 10px !important; font-size: 13.5px !important;
  box-shadow: 0 1px 2px rgba(16, 26, 51, .06), inset 0 1px 1px rgba(16, 26, 51, .025) !important;
}
html body .s-Form .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not(.select2-input):not(.select2-focusser):not(.select2-offscreen):not(.s-QuickSearchInput):focus {
  border-color: var(--hx-sky-deep) !important; box-shadow: 0 0 0 3px rgba(73, 179, 228, .22) !important;
}
html body .s-Form .field input[readonly], html body .s-Form .field input:disabled { background: var(--hx-surface-soft) !important; box-shadow: none !important; }
html body .s-Form .field > .vx:empty + .clear, html body .ui-dialog .s-Form .categories .category > .field { margin-bottom: 0 !important; }

/* =====================================================================
   Compensation overview (Employee > Salary tab)
   ===================================================================== */
.hx-salary-strip { display: none !important; }
.hx-comp { max-width: 1180px; margin: 0 auto 8px; font-family: var(--hx-font-ui); color: var(--hx-ink); }
.hx-comp-empty, .hx-comp-none { padding: 16px; color: var(--hx-muted); font-size: 13px; }
/* warnings sit right under the KPI row as one calm notice strip (amber accent at the start edge) */
.hx-comp-warns { display: grid; gap: 4px; margin: 12px 0 4px; padding: 10px 14px; background: #FFF7EB; border: 1px solid #F5D9AE; border-inline-start: 4px solid var(--hx-orange-deep); border-radius: 10px; }
.hx-comp-warn { margin: 0; font-size: 13px; line-height: 1.45; color: #7A3E06; }

.hx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
/* KPI tiles: white, a 4px accent on the inline-start edge (navy gross, green net, orange deductions, violet employer cost),
   label at the top of every tile. The list screen (hrklix-comp-list.css), the Payroll history tab and the employee-form
   summary use the same tile. */
.hx-kpi { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; min-width: 0;
  background: var(--hx-surface); border: 1px solid var(--hx-line); border-inline-start: 4px solid var(--hx-navy); box-shadow: var(--hx-shadow-card); color: var(--hx-navy); }
.hx-kpi-icon { flex: 0 0 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--hx-navy-bg); }
.hx-kpi-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hx-kpi-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hx-kpi-label { font-size: 12px; font-weight: 600; color: var(--hx-ink-2); line-height: 1.35; }
.hx-kpi-value { font-size: 21px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--hx-ink); line-height: 1.25; }
.hx-kpi-note { font-size: 11.5px; color: var(--hx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-kpi.is-cost { border-inline-start-color: var(--hx-navy); color: var(--hx-navy); }
.hx-kpi.is-net { border-inline-start-color: var(--hx-green); color: var(--hx-green-deep); }
.hx-kpi.is-net .hx-kpi-icon { background: var(--hx-green-bg); }
.hx-kpi.is-ded { border-inline-start-color: var(--hx-orange); color: var(--hx-orange-deep); }
.hx-kpi.is-ded .hx-kpi-icon { background: var(--hx-orange-bg); }
.hx-kpi.is-ben { border-inline-start-color: var(--hx-violet); color: var(--hx-violet); }
.hx-kpi.is-ben .hx-kpi-icon { background: var(--hx-violet-bg); }

.hx-comp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; align-items: stretch; }
.hx-comp-main, .hx-comp-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* both columns end on one line: the last card of each column grows into the slack */
.hx-comp-main > :last-child, .hx-comp-side > :last-child { flex: 1 1 auto; }
.hx-comp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hx-comp-card { background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 14px; box-shadow: var(--hx-shadow-card); padding: 14px 16px 12px; min-width: 0; }
.hx-comp-card > header { margin-bottom: 8px; }
.hx-comp-card h4 { margin: 0; font-family: var(--hx-font-display); font-size: 14.5px; font-weight: 800; color: var(--hx-ink); }
.hx-comp-card header p { margin: 2px 0 0; font-size: 12px; color: var(--hx-muted); }

.hx-comp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hx-comp-table th { text-align: start; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--hx-muted); padding: 8px 6px; border-bottom: 1px solid var(--hx-line); background: var(--hx-surface-soft); }
.hx-comp-table td { padding: 9px 6px; border-bottom: 1px solid var(--hx-line-soft); }
.hx-comp-table .num { text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; }
.hx-comp-table th:nth-child(3), .hx-comp-table.is-structure th:nth-child(3) { text-align: end; }
.hx-comp-table .mid { text-align: center; }
/* every total row looks the same: navy text on a light navy tint (deductions are not an error, so not red) */
.hx-comp-table tr.total td { border-bottom: 0; font-weight: 800; padding: 11px 8px; background: var(--hx-navy-bg); color: var(--hx-navy); border-radius: 0; }
.hx-comp-table tr.total td:first-child { border-start-start-radius: 8px; border-end-start-radius: 8px; }
.hx-comp-table tr.total td:last-child { border-start-end-radius: 8px; border-end-end-radius: 8px; }

.hx-chip { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 7px; background: #eef2fb; color: #3b4f87; margin-inline-start: 6px; }
.hx-comp-table td > .hx-chip:first-child { margin-inline-start: 0; }
.hx-chip.is-required { background: var(--hx-navy-bg); color: var(--hx-navy-3); }
.hx-tick { display: inline-block; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #c5cee0; background: #fff; vertical-align: middle; position: relative; }
.hx-tick.on { background: var(--hx-navy); border-color: var(--hx-navy); }
.hx-tick.on::after { content: ""; position: absolute; inset-inline-start: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

.hx-sum { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.hx-sum-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.hx-sum-row span { flex: 1 1 auto; color: var(--hx-ink-2); }
.hx-sum-row b { font-variant-numeric: tabular-nums; font-weight: 700; }
.hx-sum-row b.strong { font-weight: 800; font-size: 14px; }
.hx-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.hx-dot.g { background: var(--hx-green); } .hx-dot.d { background: var(--hx-navy); } .hx-dot.n { background: var(--hx-violet); } .hx-dot.c { background: var(--hx-orange); }
.hx-sum-row:last-child b { color: var(--hx-navy); }

.hx-trend { width: 100%; height: auto; display: block; }
.hx-trend .grid { stroke: var(--hx-line); stroke-width: 1; }
.hx-trend .axis { font-size: 9px; fill: var(--hx-muted); }
.hx-trend .net { fill: var(--hx-navy-3); } .hx-trend .ben { fill: #b9aef5; }
.hx-legend { display: flex; justify-content: center; gap: 16px; font-size: 11.5px; color: var(--hx-ink-2); margin-top: 4px; }
.hx-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-inline-end: 5px; }
.hx-legend i.net { background: var(--hx-navy-3); } .hx-legend i.ben { background: #b9aef5; }

.hx-kvs { display: flex; flex-direction: column; }
.hx-kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hx-line-soft); font-size: 13px; }
.hx-kv:last-child { border-bottom: 0; }
.hx-kv span { color: var(--hx-muted); } .hx-kv b { font-weight: 600; text-align: end; }
.hx-pill { font-size: 12px; font-weight: 700; padding: 2px 12px; border-radius: 999px; }
.hx-pill.is-on { background: var(--hx-green-bg); color: var(--hx-green-deep); } .hx-pill.is-off { background: var(--hx-red-bg); color: var(--hx-red); }

.hx-comp-edit-title { max-width: 1180px; margin: 18px auto 10px; padding-top: 14px; border-top: 1px solid var(--hx-line); }
.hx-comp-edit-title h3 { margin: 0; font-family: var(--hx-font-display); font-size: 16px; font-weight: 800; color: var(--hx-ink); }
.hx-comp-edit-title p { margin: 2px 0 0; font-size: 12.5px; color: var(--hx-muted); }
.hx-salary-tab .categories { max-width: 1180px; }

@media (max-width: 1100px) {
  .hx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-comp-grid { grid-template-columns: minmax(0, 1fr); }
  .hx-comp-pair { grid-template-columns: minmax(0, 1fr); }
}

/* overview layout fixes: cards never wider than their column, the two tables stack when narrow */
/* min(360px, 100%): on a phone the column is narrower than 360px, and a 360px track ran past the column edge */
.hx-comp-pair { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
/* nothing is clipped: the header wraps, and only a table that is still too wide scrolls sideways inside its card */
.hx-comp-card { overflow: visible; overflow-x: auto; }
.hx-comp-table td:first-child { word-break: normal; }
.hx-comp-edit-title { width: 100%; box-sizing: border-box; }

/* Salary tab uses the whole width of the tab (no centred 1180px column), notes wrap instead of cutting off */
html body .hx-comp, html body .hx-comp-edit-title, html body .hx-salary-tab .categories, html body .hx-salary-strip { max-width: none !important; margin-inline: 0 !important; }
html body .hx-comp { margin-bottom: 8px !important; }
html body .hx-kpi-note { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
html body .hx-salary-tab .categories { padding-inline: 0; }
html body .hx-salary-tab > .hx-comp, html body .hx-salary-tab > div:first-child { padding-inline: 0; }

/* =====================================================================
   Compensation page, second pass (header, tabs, cards, aside)
   ===================================================================== */
.hx-comp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 14px; box-shadow: var(--hx-shadow-card); padding: 14px 18px; margin-bottom: 12px; }
.hx-comp-who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hx-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--hx-navy-3), var(--hx-sky-deep)); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 19px; overflow: hidden; flex: 0 0 auto; }
.hx-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-comp-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hx-comp-name h3 { margin: 0; font-family: var(--hx-font-display); font-size: 19px; font-weight: 800; color: var(--hx-ink); }
.hx-comp-meta { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 12.5px; color: var(--hx-muted); margin-top: 3px; }
.hx-comp-meta span + span::before { content: "\2022"; margin: 0 8px; opacity: .6; }
.hx-comp-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* secondary / ghost: white, line border, navy text. Primary: solid navy, no glow (owner, 10 Oct 2026). */
.hx-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 10px; font: 600 13px var(--hx-font-ui); cursor: pointer; border: 1px solid var(--hx-line); background: var(--hx-surface); color: var(--hx-navy); white-space: nowrap; }
.hx-btn:hover { border-color: var(--hx-navy); background: var(--hx-surface-soft); color: var(--hx-navy); }
.hx-btn.is-primary { background: var(--hx-navy); border-color: var(--hx-navy); color: #fff; box-shadow: none; }
.hx-btn.is-primary:hover { background: var(--hx-navy-2); border-color: var(--hx-navy-2); color: #fff; }
.hx-btn.is-outline { color: var(--hx-navy); border-color: var(--hx-navy-line); }
.hx-btn-icon svg, .hx-card-icon svg, .hx-glance-icon svg, .hx-empty-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: block; }

.hx-comp-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--hx-line); margin-bottom: 14px; overflow-x: auto; }
.hx-comp-tab { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; font: 600 13.5px var(--hx-font-ui); color: var(--hx-muted); white-space: nowrap; flex: 0 0 auto; }
.hx-comp-tab:hover { color: var(--hx-navy); }
.hx-comp-tab.active { color: var(--hx-navy); border-bottom-color: var(--hx-navy); }
.hx-caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; }

/* the header wraps instead of crushing the title: the actions may shrink and move under the title */
.hx-comp-card > header { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 12px; }
.hx-card-icon, .hx-glance-icon { flex: 0 0 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--hx-navy-bg); color: var(--hx-navy-3); }
.hx-comp-card.is-ded .hx-card-icon { background: var(--hx-orange-bg); color: var(--hx-orange-deep); }
.hx-comp-card.is-ben .hx-card-icon { background: var(--hx-violet-bg); color: var(--hx-violet); }
.hx-card-title { flex: 1 1 12em; min-width: 0; }
.hx-card-actions { display: flex; align-items: center; gap: 8px 10px; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; margin-inline-start: auto; }
.hx-card-actions > div { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px 10px; min-width: 0; }
.hx-card-actions .hx-link { white-space: nowrap; }
/* a meta line under the card title ("Effective from <date> · Current package") */
.hx-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: 12.5px; color: var(--hx-ink-2); }
.hx-card-meta .hx-chip { margin-inline-start: 0; }
.hx-card-meta .hx-btn-icon svg { width: 15px; height: 15px; }
.hx-effective { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--hx-ink-2); }
.hx-chip.is-current { background: #e0f6ea; color: var(--hx-green-deep); }
.hx-chip.is-auto { background: #eef1f6; color: #4a5775; border: 1px solid #dfe5ef; }
.hx-chip.is-manual { background: #fff4e5; color: var(--hx-orange-deep); }
.hx-dots { border: 1px solid var(--hx-line); background: #fff; border-radius: 8px; width: 30px; height: 24px; cursor: pointer; color: var(--hx-ink-2); line-height: 1; }
.hx-dots:hover { border-color: var(--hx-sky-deep); }
.hx-rate { display: block; color: var(--hx-muted); font-size: 11.5px; }
.hx-link { color: var(--hx-navy-3); font-weight: 600; font-size: 12.5px; text-decoration: none; cursor: pointer; }
.hx-link:hover { text-decoration: underline; }
.hx-comp-card.is-payment > header, .hx-comp-card.is-recent > header { margin-bottom: 4px; }

.hx-glances { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 4px; align-items: stretch; }
.hx-glance { display: flex; gap: 12px; padding: 4px 14px; border-inline-start: 1px solid var(--hx-line-soft); min-width: 0; }
.hx-glance:first-child { border-inline-start: 0; padding-inline-start: 0; }
.hx-glance.is-si .hx-glance-icon { background: #e4f7ec; color: var(--hx-green-deep); }
.hx-glance.is-med .hx-glance-icon { background: var(--hx-red-bg); color: #C93B3B; }
.hx-glance.is-tax .hx-glance-icon { background: var(--hx-violet-bg); color: var(--hx-violet); }
/* body as a column, so the "Manage" links of the three glances line up at the bottom */
.hx-glance-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.hx-glance-body > .hx-link { margin-top: auto; align-self: flex-start; }
.hx-glance-title { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
.hx-glance-title .hx-chip { margin-inline-start: 0; white-space: nowrap; }
.hx-glance-title b { font-size: 13.5px; }
.hx-glance-body p { margin: 4px 0 6px; font-size: 12px; color: var(--hx-muted); line-height: 1.45; }
/* A card that holds glances (Insurance & tax): the card header is the section title, the glances are items under it. */
.hx-comp-card:has(> .hx-glances) > header { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--hx-line-soft); }
.hx-comp-card:has(> .hx-glances) > header h4 { font-size: 15.5px; }
.hx-glance-icon { flex: 0 0 30px; height: 30px; }
.hx-glance-icon svg { width: 15px; height: 15px; }
.hx-glance-title b { font-weight: 650; }

.hx-sum-row.hl { background: var(--hx-navy-bg); border-radius: 8px; padding: 6px 8px; margin: 0 -8px; }
/* breakdown dots follow the KPI accents: gross navy, deductions orange, net green, employer violet */
.hx-sum .hx-dot.g { background: var(--hx-navy); } .hx-dot.r { background: var(--hx-orange); } .hx-dot.b { background: var(--hx-green); } .hx-dot.v, .hx-dot.o { background: var(--hx-violet); }
.hx-sum-row:last-child b { color: var(--hx-navy); }

.hx-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 4px 4px; gap: 4px; }
.hx-empty-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--hx-navy-bg); color: var(--hx-navy-3); display: flex; align-items: center; justify-content: center; }
.hx-empty b { font-size: 13.5px; } .hx-empty p { margin: 0; font-size: 12px; color: var(--hx-muted); }
.hx-upcoming { display: flex; flex-direction: column; }
.hx-up-row { display: grid; grid-template-columns: 78px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hx-line-soft); font-size: 12.5px; }
.hx-up-row:last-child { border-bottom: 0; }
.hx-up-date { color: var(--hx-muted); font-variant-numeric: tabular-nums; }
.hx-recent { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; }
.hx-recent small { color: var(--hx-muted); font-size: 12px; }

.hx-history .hx-comp-table { margin-top: 8px; }
.hx-comp-body { margin-top: 0; }

.hx-menu { position: absolute; z-index: 10050; min-width: 160px; background: #fff; border: 1px solid var(--hx-line); border-radius: 10px; box-shadow: 0 14px 32px -10px rgba(13, 32, 80, .3); padding: 4px; }
.hx-menu button { display: block; width: 100%; text-align: start; border: 0; background: none; padding: 8px 12px; border-radius: 7px; cursor: pointer; font: 500 13px var(--hx-font-ui); color: var(--hx-ink); }
.hx-menu button:hover { background: var(--hx-surface-soft); }

.hx-comp-table th:nth-child(2), .hx-comp-table.is-structure th:nth-child(3) { text-align: start; }
.hx-comp-table.is-structure th:nth-child(3), .hx-comp-table.is-structure td.num { text-align: end; }
.hx-comp-table.is-structure td.mid, .hx-comp-table.is-structure th:last-child { text-align: end; }

@media (max-width: 1100px) { .hx-glances { grid-template-columns: minmax(0, 1fr); } .hx-glance { border-inline-start: 0; padding-inline: 0; } }

/* =====================================================================
   One design language for the whole Salary tab
   The editable cards below the overview use the very same card, icon,
   button and table styles as the overview above them.
   ===================================================================== */

/* cards: same surface, radius, shadow and padding as .hx-comp-card */
html body .hx-salary-tab .categories .category {
  background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 14px;
  box-shadow: var(--hx-shadow-card); padding: 14px 16px 14px; margin: 0 0 14px;
}
/* header: icon circle, title, hint -- no blue bar, no number badge */
html body .hx-salary-tab .category > .category-title {
  display: flex !important; align-items: flex-start; gap: 12px; border: 0 !important; background: none !important;
  padding: 0 0 10px !important; margin: 0 0 12px !important; border-bottom: 1px solid var(--hx-line-soft) !important; border-radius: 0;
}
html body .hx-salary-tab .category > .category-title::before { display: none !important; content: none !important; }
html body .hx-salary-tab .category > .category-title:hover { background: none; }
.hx-title-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; font-family: var(--hx-font-display); font-size: 14.5px; font-weight: 800; color: var(--hx-ink); line-height: 1.3; }
.hx-title-text a, .hx-title-text .category-anchor { color: inherit; text-decoration: none; font: inherit; }
.hx-title-text small { font: 400 12px var(--hx-font-ui); color: var(--hx-muted); margin-top: 2px; }
html body .hx-salary-tab .category > .category-title.hx-acc-title::after,
html body .hx-salary-tab .hx-acc > .category-title::after { margin-top: 12px; }

/* grids inside the cards: the same table as the overview */
html body .hx-salary-tab .s-DataGrid, html body .hx-salary-tab .s-GridEditorBase, html body .hx-salary-tab .grid-container { background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body .hx-salary-tab .grid-toolbar, html body .hx-salary-tab .s-Toolbar { background: transparent !important; border: 0 !important; padding: 0 0 8px !important; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
html body .hx-salary-tab .s-QuickSearchBar { margin: 0 !important; }
html body .hx-salary-tab .s-QuickSearchInput, html body .hx-salary-tab .s-QuickSearchBar input { height: 34px !important; border-radius: 10px !important; font-size: 13px !important; }
/* the "new ..." button: the navy outline button of the overview, not a big filled one */
html body .hx-salary-tab .tool-button.add-button, html body .hx-salary-tab .tool-button.new-button {
  height: 34px !important; padding: 0 14px !important; background: #fff !important; color: var(--hx-navy) !important; border: 1px solid var(--hx-navy-line) !important;
  border-radius: 10px !important; box-shadow: none !important; font: 600 13px var(--hx-font-ui) !important; margin-inline-start: auto;
}
html body .hx-salary-tab .tool-button.add-button:hover { border-color: var(--hx-navy) !important; background: var(--hx-surface-soft) !important; }
html body .hx-salary-tab .tool-button.add-button .button-inner { color: inherit !important; }
/* header and rows */
html body .hx-salary-tab .slick-header, html body .hx-salary-tab .slick-header-columns { background: var(--hx-surface-soft) !important; border: 0 !important; border-bottom: 1px solid var(--hx-line) !important; }
html body .hx-salary-tab .slick-header-column {
  background: transparent !important; border: 0 !important; font: 700 11px var(--hx-font-ui) !important; letter-spacing: .04em; text-transform: uppercase; color: var(--hx-muted) !important;
}
html body .hx-salary-tab .slick-row .slick-cell { border: 0 !important; border-bottom: 1px solid var(--hx-line-soft) !important; font-size: 13px; color: var(--hx-ink); padding-block: 0; }
html body .hx-salary-tab .slick-row:hover .slick-cell { background: var(--hx-surface-soft); }
html body .hx-salary-tab .slick-viewport { background: transparent !important; }

/* the insurance summary box: the same soft card, no heavy navy bar */
html body .hx-salary-tab .hx-si-summary { background: var(--hx-surface-soft); border: 1px solid var(--hx-line); border-inline-start: 1px solid var(--hx-line); border-radius: 12px; box-shadow: none; }
html body .hx-salary-tab .hx-si-value { font-variant-numeric: tabular-nums; }

/* the heading above the edit cards: same weight as the card titles */
.hx-comp-edit-title h3 { font-size: 15px; }

/* the quick-search pill: one border (the pill's), not a second one around the input inside it */
html body .hx-salary-tab .s-QuickSearchBar { display: inline-flex; align-items: center; height: 34px; border: 1px solid var(--hx-line); border-radius: 10px; background: #fff; padding: 0 10px; }
html body .hx-salary-tab .s-QuickSearchInput, html body .hx-salary-tab .s-QuickSearchBar input { border: 0 !important; box-shadow: none !important; background: transparent !important; height: 30px !important; padding: 0 6px !important; }

/* "folded" keeps the layout width (so grids inside measure themselves right) but shows nothing */
html body .hx-folded { height: 0 !important; min-height: 0 !important; overflow: hidden !important; visibility: hidden !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
html body .hx-salary-tab .grid-toolbar .s-QuickSearchBar input.s-QuickSearchInput {
  border: 0 !important; box-shadow: none !important; background: transparent !important; outline: 0 !important; height: 30px !important; padding: 0 6px !important; border-radius: 0 !important;
}
html body .hx-salary-tab .grid-toolbar .s-QuickSearchBar { background: #fff !important; border: 1px solid var(--hx-line) !important; border-radius: 10px !important; height: 34px !important; padding: 0 10px !important; display: inline-flex !important; align-items: center; }

/* a search box over two or three rows is noise: the editors in the Salary tab drop it */
html body .hx-salary-tab .grid-toolbar .s-QuickSearchBar { display: none !important; }
html body .hx-salary-tab .grid-toolbar { justify-content: flex-end; }

.hx-comp-unsaved { margin: -4px 0 12px; padding: 8px 12px; border-radius: 10px; background: #fff8ec; border: 1px solid #f6dcae; color: #9a5a0b; font-size: 12.5px; }

/* the main action of the page is navy, like every in-app primary (owner, 10 Oct 2026: orange is the login CTA only) */
html body .hx-btn.is-primary { background: var(--hx-navy) !important; border-color: var(--hx-navy) !important; color: #fff !important; box-shadow: none !important; }
html body .hx-btn.is-primary:hover { background: var(--hx-navy-2) !important; border-color: var(--hx-navy-2) !important; color: #fff !important; }

/* the overtime assignment popup already has a title in its header: the grid does not repeat it */
.ui-dialog .s-AttendanceOvertimeAssignmentGrid .grid-title { display: none; }

/* =====================================================================
   Focused "Manage ..." drawers (medical insurance, social insurance)
   ===================================================================== */
html body .ui-dialog .categories > .category.hx-card {
  background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 14px; box-shadow: none; padding: 12px 16px 14px; margin: 0 0 12px;
}
html body .ui-dialog .category.hx-card > .category-title {
  display: flex !important; align-items: flex-start; gap: 12px; border: 0 !important; background: none !important;
  padding: 0 0 10px !important; margin: 0 0 10px !important; border-bottom: 1px solid var(--hx-line-soft) !important;
}
html body .ui-dialog .category.hx-card > .category-title::before { display: none !important; content: none !important; }
html body .ui-dialog .category.hx-card > .category-title:hover { background: none; }
.hx-mg-head { margin: 0 0 12px; }
.hx-mg-sub { margin: 0 0 10px; color: var(--hx-muted); font-size: 13px; }
.hx-mg-who { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--hx-surface-soft); border: 1px solid var(--hx-line); border-radius: 12px; }
.hx-mg-who .hx-avatar { width: 44px; height: 44px; font-size: 15px; }
.hx-mg-id { flex: 1 1 auto; min-width: 0; }
.hx-mg-id b { font-family: var(--hx-font-display); font-size: 15px; }
.hx-mg-state { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hx-med-cost.hx-calc { background: var(--hx-navy-bg); border-color: var(--hx-navy-line); border-radius: 14px; padding: 12px 16px; margin: 0 0 12px; }
.hx-calc-title { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--hx-navy); margin-bottom: 8px; }
.hx-calc-title .hx-card-icon { flex-basis: 30px; height: 30px; background: #fff; }
.hx-calc-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hx-calc-cells > div { display: flex; flex-direction: column; min-width: 0; }
.hx-calc-cells span { font-size: 12px; color: var(--hx-ink-2); }
.hx-calc-cells b { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--hx-ink); }
.hx-calc-cells small { font-size: 11.5px; color: var(--hx-muted); }
.hx-alloc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 10px; }
.hx-alloc-cell { display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid var(--hx-line); border-radius: 10px; background: #fff; }
.hx-alloc-cell.is-company { background: var(--hx-surface-soft); }
.hx-alloc-cell span { font-size: 12px; color: var(--hx-muted); }
.hx-alloc-cell b { font-size: 16px; font-variant-numeric: tabular-nums; }
.hx-alloc-note { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--hx-muted); }
.hx-apply-note { margin-inline-end: auto; font-size: 12.5px; color: var(--hx-muted); align-self: center; }
.hx-apply-note b { color: var(--hx-ink); }
@media (max-width: 640px) { .hx-calc-cells, .hx-alloc { grid-template-columns: 1fr; } }

/* a first card that has a real title keeps it (the drawer hides only the empty anchor of a nameless first section) */
html body .ui-dialog.hx-drawer .category.first-category.hx-card > .category-title { display: flex !important; }

/* Manage Social Insurance drawer */
.hx-si-banner { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: var(--hx-ok-bg, #e6f6ec); border: 1px solid #cdeedb; }
.hx-si-banner .hx-card-icon { background: #fff; color: var(--hx-green-deep); }
.hx-si-banner b { color: var(--hx-green-deep); }
.hx-si-banner p { margin: 1px 0 0; font-size: 12.5px; color: var(--hx-ink-2); }
.hx-info { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--hx-surface-soft); border: 1px solid var(--hx-line); flex: 0 0 100%; }
.hx-info b { font-size: 13px; }
.hx-info p { margin: 2px 0 0; font-size: 12.5px; color: var(--hx-muted); }
.hx-si-drawer .hx-si-summary { margin: 0; border: 0; background: transparent; }
html body .ui-dialog .hx-si-drawer .categories > .category.hx-card .hx-ph { display: none; }

/* =====================================================================
   Every form section is a card (same surface, radius and header as the compensation page)
   ===================================================================== */
html body .s-Form .categories > .category {
  background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 14px;
  padding: 12px 16px 14px; margin: 0 0 14px; box-shadow: none;
}
html body .s-Form .categories > .category > .category-title {
  border: 0 !important; border-bottom: 1px solid var(--hx-line-soft) !important; background: none !important;
  padding: 0 0 10px !important; margin: 0 0 12px !important; border-radius: 0;
  font-family: var(--hx-font-display); font-size: 14.5px; font-weight: 800; color: var(--hx-ink);
}
html body .s-Form .categories > .category > .category-title::before { display: none !important; content: none !important; }
html body .s-Form .categories > .category > .category-title a, html body .s-Form .categories > .category > .category-title a.category-anchor { color: inherit; text-decoration: none; }

html body .hx-title-empty { display: none !important; }

/* captions above the fields on every form (the salary tab already did this): one reading order everywhere */
html body .s-Form .categories .category > .field { flex-direction: column !important; align-items: stretch !important; }
html body .s-Form .categories .category > .field > label.caption, html body .s-Form .categories .category > .field > label {
  width: auto !important; max-width: none !important; text-align: start !important; margin: 0 0 5px !important; padding: 0 !important; float: none !important;
}
html body .s-Form .categories .category > .field > .vx { margin-inline-start: 0; }

/* a lookup with its in-place button keeps both on one row under the caption, on every form */
html body .s-Form .categories .category > .field:has(> .inplace-button) { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 6px; }
html body .s-Form .categories .category > .field:has(> .inplace-button) > label { grid-column: 1 / -1; }
html body .s-Form .categories .category > .field:has(> .inplace-button) > .vx { grid-column: 1 / -1; }
html body .s-Form .categories .category > .field:has(> .inplace-button) > .inplace-button { margin-block-start: 0 !important; margin-inline-start: 0 !important; }

/* the e-mail field is two inputs around an "@": keep them on one row under the caption */
html body .s-Form .categories .category > .field:has(input.emailuser) { flex-direction: row !important; flex-wrap: wrap; align-items: center !important; column-gap: 8px; }
html body .s-Form .categories .category > .field:has(input.emailuser) > label { flex: 0 0 100%; }
html body .s-Form .categories .category > .field:has(input.emailuser) > input.emailuser,
html body .s-Form .categories .category > .field:has(input.emailuser) > input.emaildomain { flex: 1 1 0; min-width: 0; }
html body .s-Form .categories .category > .field:has(input.emailuser) > .vx { flex: 0 0 100%; }

/* the calendar icon sits inside its date box on every form */
html body .s-Form .categories .category > .field .ui-datepicker-trigger {
  position: relative !important; inset: auto !important; display: block !important; float: none !important;
  margin-block: -30px 10px !important; margin-inline: auto 14px !important; height: 20px !important; width: 20px !important;
  border: 0 !important; background: none !important; opacity: .75;
}
html body .s-Form .categories .category > .field:has(input.emailuser) .ui-datepicker-trigger { margin-block: 0 !important; }

/* Bugs 7094, 7095: a date AND time field (Employee Check, Business Trip From/To Date) is a date box,
   its calendar button, then a time dropdown with a clock button. The -30px nudge above assumes the
   button follows a lone date box, so here it fell outside the box (in the clock-button grid it even
   took the second column). A small grid puts the button inside the date box (same cell, end side)
   and the time row below it, in English and Arabic. */
html body .s-Form .categories .category > .field:has(> .ui-datepicker-trigger):has(> .inplace-now) {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 6px;
}
html body .s-Form .categories .category > .field:has(> .ui-datepicker-trigger):has(> .inplace-now) > label { grid-column: 1 / -1; grid-row: 1; }
html body .s-Form .categories .category > .field:has(> .ui-datepicker-trigger):has(> .inplace-now) > input.s-DateTimeEditor.dateQ { grid-column: 1; grid-row: 2; order: 0; }
html body .s-Form .categories .category > .field:has(> .ui-datepicker-trigger):has(> .inplace-now) > .ui-datepicker-trigger {
  grid-column: 1; grid-row: 2; order: 0; justify-self: end; align-self: center; position: relative !important; inset: auto !important;
  margin-block: 0 !important; margin-inline: 0 14px !important; z-index: 2;
}
html body .s-Form .categories .category > .field:has(> .ui-datepicker-trigger):has(> .inplace-now) > .select2-container.time,
html body .s-Form .categories .category > .field:has(> .ui-datepicker-trigger):has(> .inplace-now) > select.time:not(.select2-offscreen) { grid-column: 1; grid-row: 3; order: 0; margin-block-start: 8px !important; }
html body .s-Form .categories .category > .field:has(> .ui-datepicker-trigger):has(> .inplace-now) > .inplace-now { grid-column: 2; grid-row: 3; order: 0; margin-block-start: 8px !important; }
html body .s-Form .categories .category > .field:has(> .ui-datepicker-trigger):has(> .inplace-now) > .vx { grid-column: 1 / -1; grid-row: 4; }

.hx-kpi-value .hx-cur { font: 600 12px var(--hx-font-ui); color: var(--hx-muted); margin-inline-start: 2px; }

/* a single checkbox field: caption above, box at the start, like every other field */
html body .s-Form .categories .category > .field:has(> input[type="checkbox"]) { align-items: flex-start !important; }
html body .s-Form .categories .category > .field > input[type="checkbox"] { margin: 2px 0 0 !important; align-self: flex-start; }

/* fields keep the theme's soft fill (requested 7 Oct): tinted at rest, white while being edited */
html body .s-Form input.editor:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html body .s-Form select.editor,
html body .s-Form textarea.editor,
html body .s-Form .select2-container .select2-choice,
html body .s-Form .select2-container-multi .select2-choices,
html body .s-Form .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not(.select2-input):not(.select2-focusser):not(.select2-offscreen):not(.s-QuickSearchInput) {
  background: var(--hx-surface-soft) !important;
}
html body .s-Form input.editor:focus,
html body .s-Form textarea.editor:focus,
html body .s-Form .field input:not([type="checkbox"]):not([type="radio"]):not(.s-QuickSearchInput):focus,
html body .s-Form .select2-container-active .select2-choice,
html body .s-Form .select2-dropdown-open .select2-choice { background: #fff !important; }
html body .s-Form input.editor[readonly], html body .s-Form input.editor:disabled,
html body .s-Form .select2-container-disabled .select2-choice { background: var(--hx-line-soft) !important; }

/* =====================================================================
   Section (accordion) headers: a soft header strip across the card,
   an icon in a circle, the arrow in a round button. Folded = a neat bar.
   ===================================================================== */
html body .s-Form .categories > .category.hx-acc > .category-title {
  display: flex !important; align-items: center; gap: 12px; cursor: pointer; user-select: none;
  margin: -12px -16px 14px !important; padding: 12px 16px !important;
  background: linear-gradient(180deg, var(--hx-surface-soft) 0%, var(--hx-surface) 100%) !important;
  border: 0 !important; border-bottom: 1px solid var(--hx-line) !important;
  border-radius: 14px 14px 0 0 !important;
  font-family: var(--hx-font-display); font-size: 14.5px; font-weight: 800; color: var(--hx-navy) !important;
  transition: background-color .15s ease;
}
html body .s-Form .categories > .category.hx-acc > .category-title a,
html body .s-Form .categories > .category.hx-acc > .category-title a.category-anchor { color: inherit !important; }
html body .s-Form .categories > .category.hx-acc > .category-title:hover { background: var(--hx-surface-soft) !important; }

/* the icon circle, for sections that do not bring their own icon */
html body .s-Form .categories > .category.hx-acc > .category-title:not(:has(.hx-card-icon))::before {
  content: "" !important; display: block !important; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  background-color: var(--hx-navy-bg);
  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='%231B3B82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='3'/%3E%3Cpath d='M8 9h8M8 13h8M8 17h5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 16px 16px;
}

/* the arrow in a round button at the end */
html body .s-Form .categories > .category.hx-acc > .category-title::after {
  content: "" !important; margin-inline-start: auto !important; margin-inline-end: 0 !important;
  flex: 0 0 28px; width: 28px !important; height: 28px !important; border-radius: 50%;
  border: 1px solid var(--hx-line) !important; background-color: var(--hx-surface);
  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='%238592AC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 14px 14px;
  transform: none !important; transition: transform .2s ease, border-color .15s ease;
}
html body .s-Form .categories > .category.hx-acc > .category-title:hover::after { border-color: var(--hx-sky-deep) !important; }
html body .s-Form .categories > .category.hx-acc.hx-acc-closed > .category-title::after { transform: rotate(-90deg) !important; }
[dir="rtl"] .s-Form .categories > .category.hx-acc.hx-acc-closed > .category-title::after,
:lang(ar) .s-Form .categories > .category.hx-acc.hx-acc-closed > .category-title::after { transform: rotate(90deg) !important; }

/* folded: the header is the whole card */
html body .s-Form .categories > .category.hx-acc.hx-acc-closed { padding-bottom: 12px !important; }
html body .s-Form .categories > .category.hx-acc.hx-acc-closed > .category-title {
  margin-bottom: -12px !important; border-bottom: 0 !important; border-radius: 14px !important;
}

/* grids inside a section (Identity, Family, Contacts...): one border around the search, the add button in line.
   The search box is an <input> inside a .field, so the broad field-input rules above skip it
   (:not(.s-QuickSearchInput)); otherwise it got a second border and its own focus ring inside the pill. */
html body .s-Form .field .grid-toolbar .s-QuickSearchBar,
html body .s-Form .categories .grid-toolbar .s-QuickSearchBar {
  display: inline-flex !important; align-items: center; height: 36px !important; padding: 0 10px !important;
  border: 1px solid var(--hx-line) !important; border-radius: 10px !important; background: var(--hx-surface) !important;
}
html body .s-Form .field .grid-toolbar .s-QuickSearchBar input.s-QuickSearchInput,
html body .s-Form .categories .grid-toolbar .s-QuickSearchBar input.s-QuickSearchInput {
  border: 0 !important; box-shadow: none !important; background: transparent !important; height: 32px !important;
  min-height: 0 !important; max-height: none !important; padding: 0 6px !important; border-radius: 0 !important;
}
html body .s-Form .field .grid-toolbar .s-QuickSearchBar:focus-within { border-color: var(--hx-sky-deep) !important; box-shadow: 0 0 0 3px rgba(73, 179, 228, .22) !important; background: #fff !important; }
html body .s-Form .field .grid-toolbar .s-QuickSearchBar input.s-QuickSearchInput:focus { border: 0 !important; box-shadow: none !important; outline: 0 !important; background: transparent !important; }
html body .s-Form .field .grid-toolbar,
html body .s-Form .categories .grid-toolbar { display: flex !important; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 0 10px !important; background: transparent !important; border: 0 !important; }
html body .s-Form .categories .grid-toolbar .tool-buttons { margin-inline-start: auto; }

/* insurance history inside the Manage Social Insurance drawer: a titled, properly sized list */
.hx-sub-title { flex: 0 0 100%; margin: 14px 0 8px; font-weight: 700; font-size: 13.5px; color: var(--hx-ink); display: flex; flex-direction: column; }
.hx-sub-title small { font-weight: 400; font-size: 12px; color: var(--hx-muted); margin-top: 2px; }
.hx-si-drawer .si-history { flex: 0 0 100%; width: 100%; }
.hx-si-drawer .si-history .s-QuickSearchBar { display: none !important; }
.hx-si-drawer .si-history .grid-container, .hx-si-drawer .si-history .slick-viewport { min-height: 140px; }
.hx-si-drawer .si-history .s-DataGrid, .hx-si-drawer .si-history .s-GridEditorBase { width: 100% !important; }

/* ---------------------------------------------------------------------
   Payroll history tab (compensation page)
   --------------------------------------------------------------------- */
.hx-ph { display: flex; flex-direction: column; gap: 14px; }
.hx-ph .hx-kpis { margin-bottom: 0; }
/* the history tiles are the overview's .hx-kpi tiles unchanged (one KPI style in the module) */
.hx-ph-card > header { align-items: center; flex-wrap: wrap; }
.hx-ph-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hx-ph-tools label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: 13px; color: var(--hx-ink); }
.hx-select { height: 38px; min-width: 120px; padding: 0 30px 0 12px; border: 1px solid var(--hx-line); border-radius: 10px; background: var(--hx-surface) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238592AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; appearance: none; font: 13px var(--hx-font-ui); color: var(--hx-ink); }
[dir="rtl"] .hx-select, :lang(ar) .hx-select { background-position: left 10px center; padding: 0 12px 0 30px; }
.hx-ph-search { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border: 1px solid var(--hx-line); border-radius: 10px; background: var(--hx-surface); color: var(--hx-muted); }
.hx-ph-search .hx-search { border: 0; outline: 0; background: transparent; height: 34px; width: 190px; font: 13px var(--hx-font-ui); color: var(--hx-ink); }
.hx-table-wrap { overflow-x: auto; }
.hx-comp-table.is-history th { white-space: nowrap; }
.hx-comp-table.is-history td { padding: 12px 8px; }
.hx-comp-table.is-history th:nth-child(2), .hx-comp-table.is-history th:nth-child(3), .hx-comp-table.is-history th:nth-child(4) { text-align: end; }
.hx-ph-row { cursor: pointer; }
.hx-ph-row:hover td { background: var(--hx-surface-soft); }
.hx-ph-row.is-selected td { background: var(--hx-navy-bg); }
.hx-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.hx-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hx-status.is-paid { background: var(--hx-green-bg); color: var(--hx-green-deep); }
.hx-status.is-processed { background: var(--hx-orange-bg); color: var(--hx-orange-deep); }
.hx-ph-actions { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.hx-icon-btn { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--hx-line); background: var(--hx-surface); color: var(--hx-navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.hx-icon-btn:hover { border-color: var(--hx-navy); background: var(--hx-surface-soft); }
.hx-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hx-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 4px 4px; font-size: 13px; color: var(--hx-ink-2); }
.hx-pager-btns { display: flex; align-items: center; gap: 8px; }
.hx-pager-btns .hx-btn:disabled { opacity: .45; cursor: default; }
.hx-page { min-width: 54px; text-align: center; font-weight: 700; color: var(--hx-navy); }
.hx-note { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--hx-navy-bg); color: var(--hx-ink-2); font-size: 13px; }
.hx-note-i { width: 20px; height: 20px; border-radius: 50%; background: var(--hx-navy); color: #fff; font: 700 12px var(--hx-font-ui); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.hx-ph-detail { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hx-ph-detail-title { display: flex; gap: 12px; align-items: flex-start; flex: 0 1 300px; padding-inline-end: 20px; border-inline-end: 1px solid var(--hx-line); }
.hx-ph-detail-title h4 { margin: 0; font-family: var(--hx-font-display); font-size: 15px; font-weight: 800; }
.hx-ph-month { display: block; font-size: 15px; margin-top: 2px; }
.hx-ph-detail-title p { margin: 4px 0 0; font-size: 12px; color: var(--hx-muted); }
.hx-ph-cells { display: flex; flex: 1 1 auto; gap: 0; flex-wrap: wrap; }
.hx-ph-cell { display: flex; flex-direction: column; gap: 4px; padding: 0 18px; border-inline-start: 1px solid var(--hx-line-soft); }
.hx-ph-cell:first-child { border-inline-start: 0; padding-inline-start: 0; }
.hx-ph-cell span { font-size: 12px; color: var(--hx-muted); }
.hx-ph-cell b { font-size: 15px; font-variant-numeric: tabular-nums; }
.hx-ph-cell b.strong { font-size: 17px; font-weight: 800; }
@media (max-width: 900px) { .hx-ph-detail-title { border-inline-end: 0; padding-inline-end: 0; flex-basis: 100%; } }

/* a folded section hides its content in every dialog and drawer (the drawer's field rules are more specific) */
html body .ui-dialog .s-Form .categories > .category.hx-acc.hx-acc-closed > :not(.category-title),
html body .ui-dialog.hx-drawer .s-Form .categories > .category.hx-acc.hx-acc-closed > .field,
html body .s-Form .categories > .category.hx-acc.hx-acc-closed > :not(.category-title) { display: none !important; }
/* and no section strip under a popup's header */
html body .ui-dialog .hx-drawer-tabbar { display: none !important; }

/* ---------------------------------------------------------------------
   Compensation page (EmployeeDialog in compensation mode) and the read-only summary on the employee form
   --------------------------------------------------------------------- */
html body .s-EmployeeDialog.hx-comp-mode .property-tabs,
html body .s-EmployeeDialog.hx-comp-mode .s-PropertyGrid > .property-tabs,
html body .s-EmployeeDialog.hx-comp-mode .ui-tabs-nav { display: none !important; }
html body .s-EmployeeDialog.hx-comp-mode .s-DialogToolbar .tool-button.hx-gone { display: none !important; }
.hx-comp-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; font-weight: 600; font-size: 13px; color: var(--hx-navy-3); text-decoration: none; }
.hx-comp-back:hover { text-decoration: underline; }

.hx-comp-mini { background: var(--hx-surface); border: 1px solid var(--hx-line); border-radius: 14px; padding: 14px 16px; margin-bottom: 14px; }
.hx-mini-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.hx-mini-head > div { flex: 1 1 auto; min-width: 0; }
.hx-mini-head h4 { margin: 0; font-family: var(--hx-font-display); font-size: 15px; font-weight: 800; color: var(--hx-ink); }
.hx-mini-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--hx-muted); }
/* The "Additional Info" section heading above already names this summary, so its own title and icon are not shown. */
.hx-mini-head > .hx-card-icon, .hx-mini-head h4 { display: none; }
.hx-mini-head p { margin: 0; }
.hx-mini-head .hx-btn { text-decoration: none; }
.hx-mini-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hx-mini-figure { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--hx-line); border-inline-start: 4px solid var(--hx-navy); background: var(--hx-surface); min-width: 0; }
.hx-mini-figure span { font-size: 12px; color: var(--hx-ink-2); font-weight: 600; }
.hx-mini-figure b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--hx-ink); }
.hx-mini-figure.is-cost { border-inline-start-color: var(--hx-navy); }
.hx-mini-figure.is-net { border-inline-start-color: var(--hx-green); }
.hx-mini-figure.is-ded { border-inline-start-color: var(--hx-orange); }
.hx-mini-figure.is-ben { border-inline-start-color: var(--hx-violet); }
.hx-mini-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 12px; border-top: 1px solid var(--hx-line-soft); padding-top: 10px; }
.hx-mini-fact { display: flex; flex-direction: column; gap: 2px; padding-inline: 12px; border-inline-start: 1px solid var(--hx-line-soft); min-width: 0; }
.hx-mini-fact:first-child { border-inline-start: 0; padding-inline-start: 0; }
.hx-mini-fact span { font-size: 12px; color: var(--hx-muted); }
.hx-mini-fact b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1000px) { .hx-mini-figures, .hx-mini-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hx-mini-fact:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; } }

/* the validation box under a field shows only when it holds a message (it kept its pink background while empty) */
html body .s-Form .field label.error:empty,
html body .s-Form .field label.error[style*="display: none"],
html body .s-Form .field .vx:not(:has(label.error:not(:empty))):not(:has(:not(label):not(:empty))) { display: none !important; }
html body .s-Form .field label.error:not(:empty) { display: block; margin-top: 4px; padding: 4px 8px; border-radius: 6px; font-size: 12px; }

/* one structure table: earnings and deductions together */
.hx-comp-table.is-structure tr.is-deduction td.num { color: var(--hx-ink-2); }
.hx-comp-table.is-structure tr.is-unsaved td { background: #fffaf2; }
.hx-chip.is-earn { background: var(--hx-green-bg); color: var(--hx-green-deep); }
.hx-chip.is-ded { background: var(--hx-red-bg); color: var(--hx-red); }
.hx-comp-table.is-structure td .hx-chip + .hx-chip { margin-inline-start: 6px; }

/* the compensation page never shows the old edit form: everything is edited in drawers */
html body .s-EmployeeDialog.hx-comp-mode .hx-salary-tab > .categories,
html body .s-EmployeeDialog.hx-comp-mode .hx-comp-edit-title { display: none !important; }
.hx-fields-drawer .category.hx-card > .field { flex: 0 0 100%; }
/* Income tax drawer: treatment (and the previous employer's number) on their own rows; the two shares side by side, as percentages.
   Same specificity as the site-wide column rules above, scoped to the fields drawer. */
html body .s-Form.hx-fields-drawer .categories > .category.hx-card:not(.hx-salary-tab .category) > .field.TaxTreatmentCode,
html body .s-Form.hx-fields-drawer .categories > .category.hx-card:not(.hx-salary-tab .category) > .field.TaxOriginalEmployerRegNo { flex: 0 0 100% !important; max-width: 100% !important; }
html body .s-Form.hx-fields-drawer .categories > .category.hx-card:not(.hx-salary-tab .category) > .field.EmployeeTaxShareRatio,
html body .s-Form.hx-fields-drawer .categories > .category.hx-card:not(.hx-salary-tab .category) > .field.CompanyTaxShareRatio { flex: 1 1 calc(50% - var(--hx-col-gap) / 2 - .5px) !important; max-width: calc(50% - var(--hx-col-gap) / 2) !important; position: relative; }
.hx-fields-drawer .field.EmployeeTaxShareRatio input,
.hx-fields-drawer .field.CompanyTaxShareRatio input { padding-inline-end: 34px !important; }
.hx-fields-drawer .field.EmployeeTaxShareRatio::after,
.hx-fields-drawer .field.CompanyTaxShareRatio::after { content: "%"; position: absolute; inset-inline-end: 14px; bottom: 0; height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--hx-muted); pointer-events: none; }
@media (max-width: 520px) { html body .s-Form.hx-fields-drawer .categories > .category.hx-card:not(.hx-salary-tab .category) > .field.EmployeeTaxShareRatio, html body .s-Form.hx-fields-drawer .categories > .category.hx-card:not(.hx-salary-tab .category) > .field.CompanyTaxShareRatio { flex-basis: 100% !important; max-width: 100% !important; } }

/* dropdown clear "x" and arrow: one quiet pair, same weight and colour, on the text's centre line */
html body .s-Form .select2-container .select2-choice abbr.select2-search-choice-close {
  width: 22px !important; height: 22px !important; margin: 0 2px !important; border-radius: 50%;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238592AC' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") no-repeat center / 11px 11px !important;
  opacity: 1 !important; transition: background-color .15s ease;
}
html body .s-Form .select2-container .select2-choice abbr.select2-search-choice-close:hover {
  background-color: var(--hx-red-bg) !important;
  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='%23E5484D' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") !important;
}
html body .s-Form .select2-container .select2-choice .select2-arrow {
  flex: 0 0 30px; width: 30px !important; border-inline-start: 1px solid var(--hx-line-soft) !important; margin-inline-start: 2px;
}
html body .s-Form .select2-container .select2-choice .select2-arrow b {
  width: 22px !important; height: 22px !important; border-radius: 50%;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238592AC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat center / 14px 14px !important;
  transition: transform .2s ease, background-color .15s ease;
}
html body .s-Form .select2-container:not(.select2-container-disabled) .select2-choice:hover .select2-arrow b { background-color: var(--hx-surface-soft) !important; }
html body .s-Form .select2-dropdown-open .select2-choice .select2-arrow b { transform: rotate(180deg); }

/* row actions in the salary structure: visible icon buttons instead of a "..." menu */
.hx-row-actions { display: inline-flex; gap: 6px; justify-content: flex-end; }
.hx-row-btn {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--hx-line); background: var(--hx-surface);
  color: var(--hx-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.hx-row-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hx-row-btn.is-edit:hover { color: var(--hx-navy); border-color: var(--hx-navy-line); background: var(--hx-navy-bg); }
.hx-row-btn.is-remove:hover { color: var(--hx-red); border-color: #f5c2c4; background: var(--hx-red-bg); }
.hx-row-btn:focus-visible { outline: 3px solid var(--hx-sky-deep); outline-offset: 2px; }

/* ---------------------------------------------------------------------
   Confidential data on the compensation page
   --------------------------------------------------------------------- */
/* salary channel as a labelled pill */
.hx-channel { display: inline-flex; align-items: center; gap: 6px; padding-block: 3px; padding-inline: 8px 10px; border-radius: 999px; font-weight: 600; font-size: 12.5px; }
.hx-channel.is-bank { background: var(--hx-navy-bg); color: var(--hx-navy-3); }
.hx-channel.is-other { background: var(--hx-green-bg); color: var(--hx-green-deep); }
.hx-channel .hx-btn-icon svg { width: 14px; height: 14px; }

/* masked numbers with a timed reveal */
.hx-secret { display: inline-flex; align-items: center; gap: 6px; }
.hx-secret-text { font-family: var(--hx-font-data); font-size: 13px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.hx-secret.is-shown .hx-secret-text { color: var(--hx-navy-3); }
.hx-secret-timer { font-size: 11px; font-weight: 600; color: var(--hx-ink-2); min-width: 0; font-variant-numeric: tabular-nums; }
.hx-secret .hx-row-btn { width: 26px; height: 26px; border-radius: 7px; }
.hx-secret .hx-row-btn svg { width: 13px; height: 13px; }
.hx-secret .hx-secret-eye:hover { color: var(--hx-navy); border-color: var(--hx-navy-line); background: var(--hx-navy-bg); }
.hx-secret .hx-secret-copy:hover { color: var(--hx-green-deep); border-color: #bfe6cf; background: var(--hx-green-bg); }

/* privacy mode: a hidden amount is the fixed text '••••••' (AmountPrivacy.text) in a .hx-masked span, never the real
   digits blurred (the blur gave away the size of the number and left the figure in the page) */
.hx-masked { color: var(--hx-muted); font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; white-space: nowrap; filter: none; user-select: none; }
td.num .hx-masked, .hx-kpi-value .hx-masked { font-weight: 700; }
/* "Show amounts" is a neutral ghost button in both states; the countdown in its label keeps a steady width */
.hx-privacy-btn { font-variant-numeric: tabular-nums; }
.hx-privacy-btn .hx-btn-icon svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------------
   Focused drawers (Manage social insurance, compensation, payment, tax): spacing and alignment
   --------------------------------------------------------------------- */
/* cards never touch: one steady gap between every block of the drawer */
html body .ui-dialog .hx-si-drawer .categories > .category.hx-card,
html body .ui-dialog .hx-si-drawer .categories > .hx-calc { margin: 0 0 14px !important; }
html body .ui-dialog .hx-si-drawer .categories > :last-child { margin-bottom: 0 !important; }
/* the header runs edge to edge: it cancels the card's side padding on both sides (works in RTL too) */
html body .ui-dialog .hx-si-drawer .categories > .category.hx-card > .category-title {
  flex: 0 0 calc(100% + 32px) !important; width: calc(100% + 32px) !important; max-width: none !important; box-sizing: border-box !important;
}
/* fields side by side share a row height and sit their inputs on one line, even when a label wraps */
html body .ui-dialog .hx-si-drawer .categories > .category.hx-card { align-items: stretch !important; }
html body .ui-dialog .hx-si-drawer .categories > .category.hx-card > .field { justify-content: flex-end; }
html body .ui-dialog .hx-si-drawer .categories > .category.hx-card > .field > label.caption { margin-bottom: auto; }
/* every editor in a drawer has the same height: dropdowns match the text and date boxes */
html body .ui-dialog .hx-si-drawer .categories .field .select2-container:not(.select2-container-multi),
html body .ui-dialog .hx-si-drawer .categories .field .select2-container:not(.select2-container-multi) .select2-choice { height: 44px !important; min-height: 44px !important; box-sizing: border-box !important; }
html body .ui-dialog .hx-si-drawer .categories .field .select2-container:not(.select2-container-multi) .select2-choice { display: flex !important; align-items: center; }
/* the field is a column now stretched to its row: editors keep their own height instead of growing into it */
html body .ui-dialog .hx-si-drawer .categories > .category.hx-card > .field > .editor,
html body .ui-dialog .hx-si-drawer .categories > .category.hx-card > .field > .select2-container { flex: 0 0 auto !important; }
/* the calendar button sits inside the date box and takes no room of its own, so the date box lines up with its neighbour */
html body .ui-dialog .hx-si-drawer .categories > .category.hx-card > .field:has(> .ui-datepicker-trigger) { position: relative; }
html body .ui-dialog .hx-si-drawer .categories > .category.hx-card > .field > .ui-datepicker-trigger {
  position: absolute !important; inset-inline-end: 11px !important; inset-inline-start: auto !important; inset-block-end: 11px !important; top: auto !important; margin: 0 !important; z-index: 2;
}

/* compensation page: the page has its own header; the employee form's "Edit Employee (...)" bar is not shown */
html body .s-EmployeeDialog.hx-comp-mode > .panel-titlebar { display: none !important; }

/* split salary payment: the note under the toggle, the summary on the compensation page */
.hx-split-note { font-size: 12.5px; color: var(--hx-muted); line-height: 1.45; padding: 0 0 2px !important; }
.hx-split-note.hx-gone { display: none !important; }
.hx-kv.hx-split-line { justify-content: flex-start; }
.hx-split-pill { display: inline-block; font-size: 12px; font-weight: 600; color: var(--hx-sky-deep); background: var(--hx-surface-soft); border: 1px solid var(--hx-line); border-radius: 999px; padding: 2px 10px; }
.hx-split-pill b, .hx-sum-split b { font-weight: inherit; display: inline-block; }
.hx-sum-split { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0 0 4px; padding-inline-start: 18px; font-size: 12px; color: var(--hx-muted); font-variant-numeric: tabular-nums; }
.bank-split { font-size: 10.5px; color: var(--hx-muted); text-transform: uppercase; letter-spacing: .03em; }

/* =====================================================================
   Form layout (7 Oct 2026): tighter rows, a real gutter between the two
   columns, short fields three or four to a row, no ragged holes.
   ---------------------------------------------------------------------
   Short fields: next to [HalfWidth] add CssClass("hx-third") or
   CssClass("hx-quarter"). hrklix-accordion.js writes data-hx-cols (1-4) on
   every section from the section's own width (not the window's), so short
   fields sit three or four to a row only where the section is wide enough,
   two to a row on medium widths and one on narrow ones.
   A tall field (the photo) beside the next fields: CssClass("hx-rows-2") or
   CssClass("hx-rows-3") turns that section into a two-column grid.
   A half or short field that ends up alone at the end of a row grows to the
   row's end instead of leaving an empty slot.
   The Salary tab cards keep their own grid and are left alone.
   ===================================================================== */
:root { --hx-col-gap: 18px; }

/* rows: 83px -> 72px apart (field top padding 4 -> 0, caption gap 5 -> 4, row gap 14 -> 8) */
html body .s-Form .categories .category { row-gap: 8px; }
html body .s-Form .categories .category > .field { padding-top: 0 !important; }
html body .s-Form .categories .category > .field > label.caption,
html body .s-Form .categories .category > .field > label { margin-bottom: 4px !important; }

/* columns: one gutter, the same in pages, dialogs and drawers (was 6-8px between two inputs) */
html body .s-Form .categories > .category:not(.hx-salary-tab .category) { column-gap: var(--hx-col-gap) !important; }
/* drawers set gap: 0 8px !important (rows touched once the field padding went): the same 8px row gap there */
html body .s-Form .categories > .category:not(.hx-salary-tab .category) { row-gap: 8px !important; }
html body .ui-dialog.hx-drawer .s-Form .categories > .category:not(.hx-salary-tab .category) { row-gap: 5px !important; }

/* widths net of the gutter; flex-grow closes the hole after a lone field */
html body .s-Form .categories > .category:not(.hx-salary-tab .category) > .field.col-sm-6,
html body .s-Form .categories > .category:not(.hx-salary-tab .category) > .field.col-md-6 {
  flex: 1 1 calc(50% - var(--hx-col-gap) / 2 - .5px) !important; min-width: 0 !important; max-width: none !important;
}
html body .s-Form .categories > .category:not(.hx-salary-tab .category) > .field.col-sm-4,
html body .s-Form .categories > .category:not(.hx-salary-tab .category) > .field.col-md-4 {
  flex: 1 1 calc(33.3333% - var(--hx-col-gap) * 2 / 3 - .5px) !important; min-width: 0 !important; max-width: none !important;
}
html body .s-Form .categories > .category:not(.hx-salary-tab .category) > .field.col-sm-8,
html body .s-Form .categories > .category:not(.hx-salary-tab .category) > .field.col-md-8 {
  flex: 1 1 calc(66.6666% - var(--hx-col-gap) / 3 - .5px) !important; min-width: 0 !important; max-width: none !important;
}
html body .s-Form .categories > .category:not(.hx-salary-tab .category) > .field.col-sm-3,
html body .s-Form .categories > .category:not(.hx-salary-tab .category) > .field.col-md-3 {
  flex: 1 1 calc(25% - var(--hx-col-gap) * 3 / 4 - .5px) !important; min-width: 0 !important; max-width: none !important;
}

/* short fields: three or four to a row where the section is wide enough */
html body .s-Form .categories > .category[data-hx-cols="3"]:not(.hx-salary-tab .category) > .field.hx-third,
html body .s-Form .categories > .category[data-hx-cols="4"]:not(.hx-salary-tab .category) > .field.hx-third {
  flex: 1 1 calc(33.3333% - var(--hx-col-gap) * 2 / 3 - .5px) !important;
}
html body .s-Form .categories > .category[data-hx-cols="4"]:not(.hx-salary-tab .category) > .field.hx-quarter {
  flex: 1 1 calc(25% - var(--hx-col-gap) * 3 / 4 - .5px) !important;
}

/* a narrow section (or a phone): one field per row */
html body .s-Form .categories > .category[data-hx-cols="1"]:not(.hx-salary-tab .category) > .field[class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; }
@media (max-width: 767px) {
  html body .s-Form .categories > .category:not(.hx-salary-tab .category) > .field[class*="col-sm-"],
  html body .s-Form .categories > .category:not(.hx-salary-tab .category) > .field[class*="col-md-"] { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* a tall field beside the next ones: the section becomes a two-column grid */
@media (min-width: 768px) {
  html body .s-Form .categories > .category:is(:has(> .field.hx-rows-2), :has(> .field.hx-rows-3)):not([data-hx-cols="1"]) {
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start !important;
  }
  html body .s-Form .categories > .category:is(:has(> .field.hx-rows-2), :has(> .field.hx-rows-3)):not([data-hx-cols="1"]) > * { grid-column: 1 / -1; width: auto !important; }
  html body .s-Form .categories > .category:is(:has(> .field.hx-rows-2), :has(> .field.hx-rows-3)):not([data-hx-cols="1"]) > .field[class*="col-sm-6"],
  html body .s-Form .categories > .category:is(:has(> .field.hx-rows-2), :has(> .field.hx-rows-3)):not([data-hx-cols="1"]) > .field[class*="col-md-6"] { grid-column: auto; }
  html body .s-Form .categories > .category:not([data-hx-cols="1"]) > .field.hx-rows-2 { grid-row: span 2; }
  html body .s-Form .categories > .category:not([data-hx-cols="1"]) > .field.hx-rows-3 { grid-row: span 3; }
}
/* compensation page: no tab-strip spacing above the page header (the tabs and title bar are hidden) */
html body .s-EmployeeDialog.hx-comp-mode > .s-DialogContent,
html body .s-EmployeeDialog.hx-comp-mode .s-DialogContent > .tab-pane,
html body .s-EmployeeDialog.hx-comp-mode .tab-pane.hx-salary-tab { padding-top: 0 !important; margin-top: 0 !important; }
html body .s-EmployeeDialog.hx-comp-mode .hx-comp-back { margin-bottom: 8px; }
html body .s-EmployeeDialog.hx-comp-mode > .s-DialogContent { padding-top: 16px !important; }
/* a section header runs edge to edge across its card (it fell 32px short of the end side in flex sections) */
html body .s-Form .categories > .category.hx-acc:not(.hx-salary-tab .category) > .category-title {
  flex: 0 0 calc(100% + 32px) !important; max-width: none !important; box-sizing: border-box !important;
}
/* Arabic: the date picker puts its calendar button BEFORE the box (jQuery UI, isRTL), so the
   "inside the box" nudge above lifted it over the caption; show it after the box, as in English */
html body .s-Form .categories .category > .field:has(> .ui-datepicker-trigger + input):not(:has(> .select2-container.time)) > .ui-datepicker-trigger { order: 1; }
html body .s-Form .categories .category > .field:has(> .ui-datepicker-trigger + input):not(:has(> .select2-container.time)) > .vx,
html body .s-Form .categories .category > .field:has(> .ui-datepicker-trigger + input):not(:has(> .select2-container.time)) > .clear { order: 2; }
/* Arabic: a dropdown's text kept its 12px gap on the left, so it touched the box's right edge */
html body .s-Form .select2-container .select2-choice { padding-inline: 12px 0 !important; }

/* social insurance drawer: the record history sits behind a clock button in the employee strip */
.hx-mg-who .hx-si-history-btn { margin-inline-start: auto; width: 38px; height: 38px; border-radius: 50%; color: var(--hx-ink-soft, #475569); transition: background .15s, color .15s, border-color .15s; }
.hx-mg-who .hx-si-history-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hx-mg-who .hx-si-history-btn:hover, .hx-mg-who .hx-si-history-btn.is-active { color: var(--hx-navy); border-color: var(--hx-navy-line); background: var(--hx-navy-bg); }
.hx-mg-who .hx-si-history-btn:focus-visible { outline: 3px solid var(--hx-sky-deep); outline-offset: 2px; }
.hx-si-history { border: 1px solid var(--hx-line); border-radius: 14px; padding: 12px 14px 14px; background: var(--hx-surface); }
.hx-si-history-hint { margin: 0 0 10px; font-size: 12px; color: var(--hx-muted); }

/* =====================================================================
   Compensation page, list and pay drawers: UI/UX review, phase 1 (10 Oct 2026)
   ===================================================================== */

/* ---- layout follows the page's own width, not the window's ----
   At 1280 the two navy sidebars leave the page about 800px, yet the viewport @media rules
   above still gave it the desktop layout. The page is a size container; the @media rules
   stay as the fallback for browsers without container queries. */
@supports (container-type: inline-size) {
  .hx-comp { container-type: inline-size; container-name: hxcomp; width: 100%; box-sizing: border-box; }
}
@container hxcomp (max-width: 900px) {
  .hx-comp-grid { grid-template-columns: minmax(0, 1fr); }
  .hx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-glances { grid-template-columns: minmax(0, 1fr); }
  .hx-glance { border-inline-start: 0; padding: 10px 0; border-top: 1px solid var(--hx-line-soft); }
  .hx-glance:first-child { border-top: 0; padding-top: 4px; }
}
@container hxcomp (max-width: 480px) {
  .hx-kpis { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hx-kpi { padding: 12px 14px; }
  /* header actions: an even two-column grid, the primary action on a full row of its own */
  .hx-comp-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  /* a label that does not fit its half (e.g. "Hide amounts · 24s") wraps to two lines instead of being clipped,
     so the countdown stays visible */
  .hx-comp-actions .hx-btn { justify-content: center; min-width: 0; height: auto; min-height: 38px; padding-block: 6px; white-space: normal; text-align: center; line-height: 1.25; }
  .hx-comp-actions .hx-btn.is-primary { grid-column: 1 / -1; }
  /* the card actions take the row under the title, starting where the title starts */
  .hx-card-actions { flex: 1 1 100%; justify-content: flex-start; margin-inline-start: 0; }
  .hx-card-actions > div { justify-content: flex-start; }
  /* the three tabs fit a phone: tighter padding, no icons */
  .hx-comp-tab { padding: 10px 10px; gap: 6px; }
  .hx-comp-tab .hx-btn-icon { display: none; }
}

/* ---- tabs: scroll sideways inside their own bar when they still do not fit (never clipped) ---- */
.hx-comp-tabs { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

/* ---- the empty "Upcoming changes" card: when it is stretched to the column's height, the empty state sits in the middle ---- */
.hx-comp-side > .hx-comp-card:last-child { display: flex; flex-direction: column; }
.hx-comp-side > .hx-comp-card:last-child > header { flex: 0 0 auto; }
.hx-comp-side > .hx-comp-card:last-child > .hx-empty { flex: 1 1 auto; justify-content: center; }

/* ---- links with a direction arrow: the arrow comes from CSS (not a '→' in the text) so it mirrors in Arabic ---- */
.hx-link.has-arrow::after { content: "\2192"; display: inline-block; margin-inline-start: 4px; }
.rtl .hx-link.has-arrow::after, [dir="rtl"] .hx-link.has-arrow::after, :lang(ar) .hx-link.has-arrow::after { transform: scaleX(-1); }
/* any other directional icon marked .hx-flip-rtl (not the back chevron: CompensationOverview already draws it
   pointing the right way for the page direction, so a CSS flip would turn it back the wrong way) */
.rtl .hx-flip-rtl, [dir="rtl"] .hx-flip-rtl, :lang(ar) .hx-flip-rtl { transform: scaleX(-1); }

/* ---------------------------------------------------------------------
   Pay drawers while amounts are hidden (AmountPrivacy)
   The drawer root carries .is-private, each sensitive field row .hx-private-field
   (salary, bank account, card number, insured wage, medical premium / employee amount).
   Focusing such a field reveals the amounts (script), so the value is never typed blind.
   --------------------------------------------------------------------- */
.is-private .hx-private-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { -webkit-text-security: disc; }
/* browsers without -webkit-text-security: the digits go transparent and a fixed mask is drawn over the box */
@supports not (-webkit-text-security: disc) {
  .is-private .hx-private-field { position: relative; }
  html body .is-private .hx-private-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(:focus) { color: transparent !important; text-shadow: none !important; }
  .is-private .hx-private-field:not(:focus-within)::after {
    content: "\2022\2022\2022\2022\2022\2022"; position: absolute; inset-inline-start: 13px; bottom: 0; height: 40px;
    display: flex; align-items: center; pointer-events: none; color: var(--hx-muted); letter-spacing: .08em;
  }
}
/* a dropdown's chosen text (select2) is masked with the same fixed text */
.is-private .hx-private-field .select2-chosen { position: relative; color: transparent !important; }
.is-private .hx-private-field .select2-chosen::after {
  content: "\2022\2022\2022\2022\2022\2022"; position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  display: flex; align-items: center; color: var(--hx-muted); letter-spacing: .08em; pointer-events: none;
}
/* the strip at the top of the drawer: "Amounts are hidden" and a small "Show amounts" button */
.hx-private-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 12px; padding: 8px 10px; padding-inline-start: 12px;
  border: 1px solid var(--hx-navy-line); border-radius: 10px; background: var(--hx-navy-bg);
  color: var(--hx-navy); font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
.hx-private-bar > :first-child { flex: 1 1 auto; min-width: 0; }
.hx-private-bar svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hx-private-bar button, .hx-private-bar .hx-btn {
  flex: 0 0 auto; margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 1px solid var(--hx-navy-line); border-radius: 8px; background: var(--hx-surface); color: var(--hx-navy);
  font: 600 12.5px var(--hx-font-ui); white-space: nowrap; cursor: pointer; box-shadow: none;
}
.hx-private-bar button:hover, .hx-private-bar .hx-btn:hover { border-color: var(--hx-navy); background: var(--hx-surface-soft); }

/* ---- pay drawers never edit shared master data: no in-place edit/add button next to a lookup
   (the pencil beside Bank opened the Banks record itself, with Delete). Banks, contracts and
   profiles are maintained in Payroll settings. ---- */
html body .ui-dialog .hx-si-drawer .inplace-button,
html body .ui-dialog:has(.hx-mg-head) .inplace-button { display: none !important; }
html body .ui-dialog .hx-si-drawer .categories .category > .field:has(> .inplace-button),
html body .ui-dialog:has(.hx-mg-head) .s-Form .categories .category > .field:has(> .inplace-button) { grid-template-columns: minmax(0, 1fr); }

/* ---------------------------------------------------------------------
   Phone dialogs and drawers (600px and narrower)
   Serenity's own mobile layout skips the drawer chrome, so its fields kept their desktop
   widths and floated to the end of the row at ragged edges.
   --------------------------------------------------------------------- */
@media (max-width: 600px) {
  html body .ui-dialog .s-Form .categories .category > .field { flex-direction: column !important; flex-wrap: nowrap !important; height: auto !important; justify-content: flex-start !important; align-items: stretch !important; flex: 0 0 100% !important; max-width: 100% !important; }
  /* the desktop row layout stretched the caption to the field height; stacked, it must take only its own line */
  html body .ui-dialog .s-Form .categories .category > .field > label.caption { height: auto !important; flex: 0 0 auto !important; margin-bottom: 6px !important; }
  html body .ui-dialog .s-Form .categories > .category.hx-card > .category-title { width: auto !important; max-width: 100% !important; flex: 1 1 100% !important; box-sizing: border-box !important; }
  html body .ui-dialog .s-Form .categories .category > .field > label {
    display: block !important; width: auto !important; max-width: none !important; float: none !important; text-align: start !important;
  }
  html body .ui-dialog .s-Form .categories .category > .field > .editor:not([type="checkbox"]):not([type="radio"]):not(.select2-offscreen),
  html body .ui-dialog .s-Form .categories .category > .field > .select2-container,
  html body .ui-dialog .s-Form .categories .category > .field > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.select2-offscreen):not(.select2-focusser),
  html body .ui-dialog .s-Form .categories .category > .field > textarea,
  html body .ui-dialog .s-Form .categories .category > .field > select:not(.select2-offscreen) {
    width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-inline: 0 !important; box-sizing: border-box !important;
  }
  /* a lone checkbox sits at the start under its caption, not in the middle of the row */
  html body .ui-dialog .s-Form .categories .category > .field > input[type="checkbox"] { align-self: flex-start !important; margin-inline: 0 !important; }

  /* jQuery UI button bar (dialogs that use the plain buttons option, e.g. the pay drawers in the
     mobile layout): one row, the buttons share it evenly, labels never wrap, 16px from the edges */
  html body .ui-dialog:not(.hx-popup) .ui-dialog-buttonpane { padding: 12px 16px !important; margin: 0 !important; }
  html body .ui-dialog:not(.hx-popup) .ui-dialog-buttonpane .ui-dialog-buttonset { display: flex !important; gap: 8px; float: none !important; width: 100%; }
  html body .ui-dialog:not(.hx-popup) .ui-dialog-buttonpane .ui-dialog-buttonset > button { flex: 1 1 0; min-width: 0; margin: 0 !important; white-space: nowrap; }

  /* the compensation page: no card touches the screen edge */
  .hx-comp-head { padding: 12px 14px; }
}

/* the jQuery UI button bar outside popups: Cancel and other plain buttons are white ghost buttons
   with navy text; the primary keeps its navy fill (.tool-button.save-and-close-button) */
html body .ui-dialog:not(.hx-popup) .ui-dialog-buttonpane .ui-dialog-buttonset > button {
  min-height: 40px; padding: 0 18px; border-radius: 10px !important; font-weight: 700; box-shadow: none !important;
}
html body .ui-dialog:not(.hx-popup) .ui-dialog-buttonpane .ui-dialog-buttonset > button:not(.tool-button) {
  background: var(--hx-surface) !important; border: 1px solid var(--hx-line) !important; color: var(--hx-navy) !important;
}
html body .ui-dialog:not(.hx-popup) .ui-dialog-buttonpane .ui-dialog-buttonset > button:not(.tool-button):hover {
  background: var(--hx-surface-soft) !important; border-color: var(--hx-navy) !important;
}

/* ---- Employee dialog, Account tab: the employee's login as one card (EmployeeAccountEditor.ts) */
html body .s-EmployeeDialog .field.UserAccount { display: block; width: 100%; max-width: none; padding: 4px 0 0; }
html body .s-EmployeeDialog .field.UserAccount > label { display: none; }
.hx-acct { display: block; width: 100%; max-width: 860px; }
.hx-acct .hx-comp-mini { margin-bottom: 0; }
.hx-acct-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hx-acct-head > div { flex: 1 1 auto; min-width: 0; }
.hx-acct-head h4 { margin: 0; font-family: var(--hx-font-display); font-size: 16px; font-weight: 800; color: var(--hx-ink); overflow: hidden; text-overflow: ellipsis; }
.hx-acct-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--hx-muted); }
.hx-acct .hx-mini-fact b.text-muted { color: var(--hx-muted); font-weight: 500; }
.hx-acct .hx-mini-fact b.hx-acct-bad { color: var(--hx-red); }
.hx-acct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hx-line-soft); }
.hx-acct-actions .hx-link { margin-inline-start: auto; }
.hx-acct-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; align-items: end; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hx-line-soft); }
.hx-acct-form > label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12px; font-weight: 600; color: var(--hx-ink-2); }
.hx-acct-form > label small { font-weight: 500; color: var(--hx-muted); }
.hx-acct-form > label.hx-acct-check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; min-height: 38px; }
.hx-acct-form > label.hx-acct-check input { margin: 0; }
.hx-acct-form > div { display: flex; gap: 8px; flex-wrap: wrap; }
.hx-acct-input { height: 38px; border: 1px solid var(--hx-line); border-radius: 10px; padding: 0 12px; font-size: 13px; color: var(--hx-ink); background: #fff; width: 100%; box-sizing: border-box; }
.hx-acct-input:focus { outline: none; border-color: var(--hx-navy); box-shadow: 0 0 0 3px var(--hx-navy-bg); }
.hx-acct-empty { padding-bottom: 0; }
.hx-acct-empty b { font-size: 15px; color: var(--hx-ink); }
.hx-acct-empty p { margin: 0; font-size: 12.5px; color: var(--hx-muted); }

/* ---- Employee dialog: one row of tabs. The template's outer Employee / Subordinates bar is
   hidden and the subordinates grid is a tab in the form's own row (EmployeeDialog.ts). The
   row wears the card-tab look the outer bar had: white active tab with a navy top accent. */
html body .s-EmployeeDialog > .s-DialogContent > ul.ui-tabs-nav { display: none !important; }
html body .s-EmployeeDialog > .s-DialogContent > .tab-pane.s-TabInfo { border: 0 !important; padding: 0 !important; }
html body .s-EmployeeDialog .s-PropertyGrid > ul.property-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; margin: 0 0 16px; padding: 0; border: 0; border-bottom: 1px solid var(--hx-line); background: transparent; }
html body .s-EmployeeDialog .s-PropertyGrid > ul.property-tabs > li { float: none; margin: 0 0 -1px; }
html body .s-EmployeeDialog .s-PropertyGrid > ul.property-tabs > li > a { display: block; margin: 0; padding: 9px 16px; border: 1px solid var(--hx-line); border-bottom: 1px solid var(--hx-line); border-top: 3px solid #c9d0e0; border-radius: 10px 10px 0 0; background: #f3f5f9; color: var(--hx-ink-2); font: 700 13px var(--hx-font-ui); line-height: 18px; transition: background .15s ease, color .15s ease; }
html body .s-EmployeeDialog .s-PropertyGrid > ul.property-tabs > li > a:hover { background: #fff; color: var(--hx-navy); }
html body .s-EmployeeDialog .s-PropertyGrid > ul.property-tabs > li.active > a { background: var(--hx-navy); color: #fff; border-color: var(--hx-navy); box-shadow: 0 -2px 0 var(--hx-navy) inset; }
html body .s-EmployeeDialog .s-PropertyGrid > ul.property-tabs > li.active > a:hover { background: var(--hx-navy-2, var(--hx-navy)); color: #fff; }
html body .s-EmployeeDialog .s-PropertyGrid > ul.property-tabs > li.hx-subordinates-tab > a { border-top-color: var(--hx-violet); }
html body .s-EmployeeDialog .s-PropertyGrid > ul.property-tabs > li.hx-subordinates-tab.active > a { background: var(--hx-violet); border-color: var(--hx-violet); color: #fff; box-shadow: none; }
.hx-subordinates-pane > .s-DataGrid { min-height: 420px; }

/* Account tab: roles and permissions under the actions */
.hx-acct-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hx-line-soft); }
.hx-acct-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.hx-acct-section-head b { font-size: 13px; color: var(--hx-ink); }
.hx-acct-chips { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; }
.hx-acct-chips .hx-chip { margin: 0; }

/* "When should this apply?" (Payroll.ApplyWhenDialog): the small centred popup every dated pay change
   goes through — apply now, or schedule for a day. .hx-ask keeps it out of the drawer conversion. */
.ui-dialog.hx-ask { width: 460px !important; max-width: calc(100vw - 32px) !important; }
.ui-dialog.hx-ask .ui-dialog-content { padding: 20px 22px 14px !important; }
.hx-when-what { margin: 0 0 14px; font: 600 13.5px var(--hx-font-ui); color: var(--hx-ink); }
.hx-when-options { display: flex; flex-direction: column; gap: 10px; }
.hx-when-opt { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 12px 14px; border: 1px solid var(--hx-line); border-radius: var(--hx-radius-md); background: var(--hx-surface); cursor: pointer; font-weight: normal; }
.hx-when-opt:hover { border-color: var(--hx-navy-line); }
.hx-when-opt.is-on { border-color: var(--hx-navy); box-shadow: 0 0 0 1px var(--hx-navy) inset; background: var(--hx-navy-bg); }
.hx-when-opt input[type=radio] { margin: 3px 0 0; flex: 0 0 auto; accent-color: var(--hx-navy); }
.hx-when-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.hx-when-body b { font: 600 14px var(--hx-font-ui); color: var(--hx-ink); }
.hx-when-body small { font-size: 12.5px; line-height: 1.45; color: var(--hx-muted); }
.hx-when-date { display: none; position: relative; margin-top: 8px; max-width: 220px; }
.hx-when-opt.is-on .hx-when-date { display: block; }
.hx-when-date input { width: 100%; height: 40px; box-sizing: border-box; border: 1px solid var(--hx-line); border-radius: 10px; padding: 0 38px 0 12px; font: 500 13.5px var(--hx-font-ui); color: var(--hx-ink); background: var(--hx-surface); }
[dir=rtl] .hx-when-date input { padding: 0 12px 0 38px; }
.hx-when-date input:focus { outline: none; border-color: var(--hx-sky-deep); box-shadow: var(--hx-focus); }
.hx-when-date input.error { border-color: var(--hx-red); }
.hx-when-date .ui-datepicker-trigger { position: absolute; top: 50%; inset-inline-end: 10px; transform: translateY(-50%); margin: 0; cursor: pointer; }
.hx-when-err { display: none; margin: 10px 0 0; font-size: 12.5px; color: var(--hx-red); }
.hx-when-err.is-on { display: block; }
.ui-dialog.hx-ask .ui-dialog-buttonset .ui-button.hx-when-ok { background: var(--hx-navy) !important; border-color: var(--hx-navy) !important; color: #fff !important; }
.ui-dialog.hx-ask .ui-dialog-buttonset .ui-button.hx-when-ok:hover { background: var(--hx-navy-2) !important; border-color: var(--hx-navy-2) !important; }

/* Upcoming changes: what it was → what it becomes, "Due" when the day has come, and a way to take it back */
.hx-comp .hx-up-row { grid-template-columns: 78px 1fr auto auto auto; }
.hx-up-row.is-due .hx-up-date { color: var(--hx-orange-deep); font-weight: 700; }
.hx-up-amount { white-space: nowrap; }
.hx-up-amount .hx-up-arrow { color: var(--hx-muted); }
.hx-up-cancel { margin-inline-start: 2px; }

/* Payment drawer: the method as one segmented choice (Cash / Bank / Cash and Bank) and the other percent beside the stored one */
.hx-fields-drawer .field.hx-pay-method-field { flex: 0 0 100% !important; }
.hx-pay-method-field > label.caption { margin-bottom: 6px; }
.hx-pay-method .hx-seg-opt { font-family: var(--hx-font-ui); font-weight: 700; }
.hx-fields-drawer .field.hx-cash-percent > input.editor { width: 100%; height: 44px; box-sizing: border-box; border: 1px solid var(--hx-line); border-radius: 10px; padding: 0 12px; font: 500 13.5px var(--hx-font-ui); color: var(--hx-ink); background: var(--hx-surface); }
.hx-fields-drawer .field.hx-cash-percent > input.editor:focus { outline: none; border-color: var(--hx-sky-deep); box-shadow: var(--hx-focus); }

/* Social insurance drawer: the history panel is titled like the cards above it */
.hx-si-history-title { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.hx-si-history-title .hx-title-text { display: flex; flex-direction: column; gap: 2px; font: 700 14px var(--hx-font-display); color: var(--hx-ink); }
.hx-si-history-title .hx-title-text small { font: 400 12px var(--hx-font-ui); color: var(--hx-muted); }
.hx-si-history .hx-filters, .hx-si-history .s-Toolbar:empty { display: none !important; }
.hx-si-history .slick-header-column { white-space: normal; line-height: 1.25; }

/* Insurance & tax: the section header sits level with its icon; the first item lines up under the title */
.hx-comp-card:has(> .hx-glances) > header { align-items: center; padding-bottom: 10px; margin-bottom: 10px; }
.hx-comp-card:has(> .hx-glances) > header h4 { font-size: 15px; }
.hx-comp-card:has(> .hx-glances) > header p { margin-top: 1px; }
.hx-glances > .hx-glance:first-child { border-inline-start: 0; padding-inline-start: 0; }

/* Staged changes: the bar under the tabs, and how a staged row reads in the structure table */
.hx-comp-pending { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--hx-navy-line); border-radius: var(--hx-radius-md); background: var(--hx-navy-bg); }
.hx-comp-pending-text { flex: 1 1 auto; min-width: 0; }
.hx-comp-pending-text b { display: block; font: 700 14px var(--hx-font-display); color: var(--hx-ink); }
.hx-comp-pending-text ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; color: var(--hx-ink-2); }
.hx-comp-pending-text p { margin: 4px 0 0; font-size: 12px; color: var(--hx-muted); }
.hx-comp-pending-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.hx-comp-table tr.is-ending td:first-child > span:first-child { text-decoration: line-through; color: var(--hx-muted); }
.hx-comp-table tr.is-ending td.num { color: var(--hx-muted); }
.hx-when-list { margin: 0 0 14px; padding: 0 0 0 18px; font-size: 13px; color: var(--hx-ink); line-height: 1.5; }
[dir=rtl] .hx-when-list { padding: 0 18px 0 0; }
@media (max-width: 640px) {
  .hx-comp-pending { flex-wrap: wrap; }
  .hx-comp-pending-actions { width: 100%; justify-content: flex-end; }
}

/* =====================================================================
   Salary item drawer (Payroll/AccountBalanceType) - the rule flags are
   option cards. AccountBalanceTypeForm.cs tags them [CssClass("hx-check")]
   and [HalfWidth], so they sit two to a row inside the drawer's 8px-gap
   category. The drawer stacks caption over editor; a grid puts the box
   back beside its caption, with the hint the dialog appends under the
   caption. Specificity is one class above the drawer's .field rules.
   ===================================================================== */
.ui-dialog.hx-drawer .s-Form .field.hx-check {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 2px;
  align-items: start;
  margin-bottom: 8px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius-md);
  background: var(--hx-surface);
  transition: border-color .15s ease, background-color .15s ease;
}
.ui-dialog.hx-drawer .s-Form .field.hx-check:hover { border-color: #C9D4E6; }
.ui-dialog.hx-drawer .s-Form .field.hx-check:has(> input:checked) {
  border-color: var(--hx-navy-line);
  background: var(--hx-navy-bg);
}
.ui-dialog.hx-drawer .s-Form .field.hx-check:has(> input:disabled) {
  background: var(--hx-surface-soft);
}
.ui-dialog.hx-drawer .s-Form .field.hx-check:has(> input:disabled) > label.caption {
  color: var(--hx-muted) !important;
  cursor: default;
}
.ui-dialog.hx-drawer .s-Form .field.hx-check > label.caption {
  grid-column: 2;
  grid-row: 1;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 20px !important;
  cursor: pointer;
}
.ui-dialog.hx-drawer .s-Form .field.hx-check > input[type="checkbox"] {
  grid-column: 1;
  grid-row: 1;
  margin: 0 !important;
}
.ui-dialog.hx-drawer .s-Form .field.hx-check > .hx-field-hint {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  line-height: 1.4;
}
/* keep PropertyGrid's inline display:none working, as the drawer rules do */
.ui-dialog.hx-drawer .s-Form .field.hx-check[style*="display: none"],
.ui-dialog.hx-drawer .s-Form .field.hx-check[style*="display:none"] {
  display: none !important;
}

/* ---- Employee dialog, Account tab: the employee's login as one card (EmployeeAccountEditor.ts) */
html body .s-EmployeeDialog .field.UserAccount { display: block; width: 100%; max-width: none; padding: 4px 0 0; }
html body .s-EmployeeDialog .field.UserAccount > label { display: none; }
.hx-acct { display: block; width: 100%; max-width: 860px; }
.hx-acct .hx-comp-mini { margin-bottom: 0; }
.hx-acct-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hx-acct-head > div { flex: 1 1 auto; min-width: 0; }
.hx-acct-head h4 { margin: 0; font-family: var(--hx-font-display); font-size: 16px; font-weight: 800; color: var(--hx-ink); overflow: hidden; text-overflow: ellipsis; }
.hx-acct-head p { margin: 2px 0 0; font-size: 12.5px; color: var(--hx-muted); }
.hx-acct .hx-mini-fact b.text-muted { color: var(--hx-muted); font-weight: 500; }
.hx-acct .hx-mini-fact b.hx-acct-bad { color: var(--hx-red); }
.hx-acct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hx-line-soft); }
.hx-acct-actions .hx-link { margin-inline-start: auto; }
.hx-acct-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; align-items: end; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hx-line-soft); }
.hx-acct-form > label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12px; font-weight: 600; color: var(--hx-ink-2); }
.hx-acct-form > label small { font-weight: 500; color: var(--hx-muted); }
.hx-acct-form > label.hx-acct-check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; min-height: 38px; }
.hx-acct-form > label.hx-acct-check input { margin: 0; }
.hx-acct-form > div { display: flex; gap: 8px; flex-wrap: wrap; }
.hx-acct-input { height: 38px; border: 1px solid var(--hx-line); border-radius: 10px; padding: 0 12px; font-size: 13px; color: var(--hx-ink); background: #fff; width: 100%; box-sizing: border-box; }
.hx-acct-input:focus { outline: none; border-color: var(--hx-navy); box-shadow: 0 0 0 3px var(--hx-navy-bg); }
.hx-acct-empty { padding-bottom: 0; }
.hx-acct-empty b { font-size: 15px; color: var(--hx-ink); }
.hx-acct-empty p { margin: 0; font-size: 12.5px; color: var(--hx-muted); }

/* ---- Employee dialog: one row of tabs. The template's outer Employee / Subordinates bar is
   hidden and the subordinates grid is a tab in the form's own row (EmployeeDialog.ts). The
   row wears the card-tab look the outer bar had: white active tab with a navy top accent. */
html body .s-EmployeeDialog > .s-DialogContent > ul.ui-tabs-nav { display: none !important; }
html body .s-EmployeeDialog > .s-DialogContent > .tab-pane.s-TabInfo { border: 0 !important; padding: 0 !important; }
html body .s-EmployeeDialog .s-PropertyGrid > ul.property-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; margin: 0 0 16px; padding: 0; border: 0; border-bottom: 1px solid var(--hx-line); background: transparent; }
html body .s-EmployeeDialog .s-PropertyGrid > ul.property-tabs > li { float: none; margin: 0 0 -1px; }
html body .s-EmployeeDialog .s-PropertyGrid > ul.property-tabs > li > a { display: block; margin: 0; padding: 9px 16px; border: 1px solid var(--hx-line); border-bottom: 1px solid var(--hx-line); border-top: 3px solid #c9d0e0; border-radius: 10px 10px 0 0; background: #f3f5f9; color: var(--hx-ink-2); font: 700 13px var(--hx-font-ui); line-height: 18px; transition: background .15s ease, color .15s ease; }
html body .s-EmployeeDialog .s-PropertyGrid > ul.property-tabs > li > a:hover { background: #fff; color: var(--hx-navy); }
html body .s-EmployeeDialog .s-PropertyGrid > ul.property-tabs > li.active > a { background: var(--hx-navy); color: #fff; border-color: var(--hx-navy); box-shadow: 0 -2px 0 var(--hx-navy) inset; }
html body .s-EmployeeDialog .s-PropertyGrid > ul.property-tabs > li.active > a:hover { background: var(--hx-navy-2, var(--hx-navy)); color: #fff; }
html body .s-EmployeeDialog .s-PropertyGrid > ul.property-tabs > li.hx-subordinates-tab > a { border-top-color: var(--hx-violet); }
html body .s-EmployeeDialog .s-PropertyGrid > ul.property-tabs > li.hx-subordinates-tab.active > a { background: var(--hx-violet); border-color: var(--hx-violet); color: #fff; box-shadow: none; }
.hx-subordinates-pane > .s-DataGrid { min-height: 420px; }

/* Account tab: roles and permissions under the actions */
.hx-acct-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hx-line-soft); }
.hx-acct-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.hx-acct-section-head b { font-size: 13px; color: var(--hx-ink); }
.hx-acct-chips { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; }
.hx-acct-chips .hx-chip { margin: 0; }

/* "When should this apply?" (Payroll.ApplyWhenDialog): the small centred popup every dated pay change
   goes through — apply now, or schedule for a day. .hx-ask keeps it out of the drawer conversion. */
.ui-dialog.hx-ask { width: 460px !important; max-width: calc(100vw - 32px) !important; }
.ui-dialog.hx-ask .ui-dialog-content { padding: 20px 22px 14px !important; }
.hx-when-what { margin: 0 0 14px; font: 600 13.5px var(--hx-font-ui); color: var(--hx-ink); }
.hx-when-options { display: flex; flex-direction: column; gap: 10px; }
.hx-when-opt { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 12px 14px; border: 1px solid var(--hx-line); border-radius: var(--hx-radius-md); background: var(--hx-surface); cursor: pointer; font-weight: normal; }
.hx-when-opt:hover { border-color: var(--hx-navy-line); }
.hx-when-opt.is-on { border-color: var(--hx-navy); box-shadow: 0 0 0 1px var(--hx-navy) inset; background: var(--hx-navy-bg); }
.hx-when-opt input[type=radio] { margin: 3px 0 0; flex: 0 0 auto; accent-color: var(--hx-navy); }
.hx-when-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.hx-when-body b { font: 600 14px var(--hx-font-ui); color: var(--hx-ink); }
.hx-when-body small { font-size: 12.5px; line-height: 1.45; color: var(--hx-muted); }
.hx-when-date { display: none; position: relative; margin-top: 8px; max-width: 220px; }
.hx-when-opt.is-on .hx-when-date { display: block; }
.hx-when-date input { width: 100%; height: 40px; box-sizing: border-box; border: 1px solid var(--hx-line); border-radius: 10px; padding: 0 38px 0 12px; font: 500 13.5px var(--hx-font-ui); color: var(--hx-ink); background: var(--hx-surface); }
[dir=rtl] .hx-when-date input { padding: 0 12px 0 38px; }
.hx-when-date input:focus { outline: none; border-color: var(--hx-sky-deep); box-shadow: var(--hx-focus); }
.hx-when-date input.error { border-color: var(--hx-red); }
.hx-when-date .ui-datepicker-trigger { position: absolute; top: 50%; inset-inline-end: 10px; transform: translateY(-50%); margin: 0; cursor: pointer; }
.hx-when-err { display: none; margin: 10px 0 0; font-size: 12.5px; color: var(--hx-red); }
.hx-when-err.is-on { display: block; }
.ui-dialog.hx-ask .ui-dialog-buttonset .ui-button.hx-when-ok { background: var(--hx-navy) !important; border-color: var(--hx-navy) !important; color: #fff !important; }
.ui-dialog.hx-ask .ui-dialog-buttonset .ui-button.hx-when-ok:hover { background: var(--hx-navy-2) !important; border-color: var(--hx-navy-2) !important; }

/* Upcoming changes: what it was → what it becomes, "Due" when the day has come, and a way to take it back */
.hx-comp .hx-up-row { grid-template-columns: 78px 1fr auto auto auto; }
.hx-up-row.is-due .hx-up-date { color: var(--hx-orange-deep); font-weight: 700; }
.hx-up-amount { white-space: nowrap; }
.hx-up-amount .hx-up-arrow { color: var(--hx-muted); }
.hx-up-cancel { margin-inline-start: 2px; }

/* Social insurance drawer: the history panel is titled like the cards above it */
.hx-si-history-title { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.hx-si-history-title .hx-title-text { display: flex; flex-direction: column; gap: 2px; font: 700 14px var(--hx-font-display); color: var(--hx-ink); }
.hx-si-history-title .hx-title-text small { font: 400 12px var(--hx-font-ui); color: var(--hx-muted); }
.hx-si-history .hx-filters, .hx-si-history .s-Toolbar:empty { display: none !important; }
.hx-si-history .slick-header-column { white-space: normal; line-height: 1.25; }

/* Insurance & tax: the section header sits level with its icon; the first item lines up under the title */
.hx-comp-card:has(> .hx-glances) > header { align-items: center; padding-bottom: 10px; margin-bottom: 10px; }
.hx-comp-card:has(> .hx-glances) > header h4 { font-size: 15px; }
.hx-comp-card:has(> .hx-glances) > header p { margin-top: 1px; }
.hx-glances > .hx-glance:first-child { border-inline-start: 0; padding-inline-start: 0; }

/* Staged changes: the bar under the tabs, and how a staged row reads in the structure table */
.hx-comp-pending { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--hx-navy-line); border-radius: var(--hx-radius-md); background: var(--hx-navy-bg); }
.hx-comp-pending-text { flex: 1 1 auto; min-width: 0; }
.hx-comp-pending-text b { display: block; font: 700 14px var(--hx-font-display); color: var(--hx-ink); }
.hx-comp-pending-text ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; color: var(--hx-ink-2); }
.hx-comp-pending-text p { margin: 4px 0 0; font-size: 12px; color: var(--hx-muted); }
.hx-comp-pending-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.hx-comp-table tr.is-ending td:first-child > span:first-child { text-decoration: line-through; color: var(--hx-muted); }
.hx-comp-table tr.is-ending td.num { color: var(--hx-muted); }
.hx-when-list { margin: 0 0 14px; padding: 0 0 0 18px; font-size: 13px; color: var(--hx-ink); line-height: 1.5; }
[dir=rtl] .hx-when-list { padding: 0 18px 0 0; }
@media (max-width: 640px) {
  .hx-comp-pending { flex-wrap: wrap; }
  .hx-comp-pending-actions { width: 100%; justify-content: flex-end; }
}

/* =====================================================================
   Salary item drawer (Payroll/AccountBalanceType) - the rule flags are
   option cards. AccountBalanceTypeForm.cs tags them [CssClass("hx-check")]
   and [HalfWidth], so they sit two to a row inside the drawer's 8px-gap
   category. The drawer stacks caption over editor; a grid puts the box
   back beside its caption, with the hint the dialog appends under the
   caption. Specificity is one class above the drawer's .field rules.
   ===================================================================== */
.ui-dialog.hx-drawer .s-Form .field.hx-check {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 2px;
  align-items: start;
  margin-bottom: 8px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius-md);
  background: var(--hx-surface);
  transition: border-color .15s ease, background-color .15s ease;
}
.ui-dialog.hx-drawer .s-Form .field.hx-check:hover { border-color: #C9D4E6; }
.ui-dialog.hx-drawer .s-Form .field.hx-check:has(> input:checked) {
  border-color: var(--hx-navy-line);
  background: var(--hx-navy-bg);
}
.ui-dialog.hx-drawer .s-Form .field.hx-check:has(> input:disabled) {
  background: var(--hx-surface-soft);
}
.ui-dialog.hx-drawer .s-Form .field.hx-check:has(> input:disabled) > label.caption {
  color: var(--hx-muted) !important;
  cursor: default;
}
.ui-dialog.hx-drawer .s-Form .field.hx-check > label.caption {
  grid-column: 2;
  grid-row: 1;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 20px !important;
  cursor: pointer;
}
.ui-dialog.hx-drawer .s-Form .field.hx-check > input[type="checkbox"] {
  grid-column: 1;
  grid-row: 1;
  margin: 0 !important;
}
.ui-dialog.hx-drawer .s-Form .field.hx-check > .hx-field-hint {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  line-height: 1.4;
}
/* keep PropertyGrid's inline display:none working, as the drawer rules do */
.ui-dialog.hx-drawer .s-Form .field.hx-check[style*="display: none"],
.ui-dialog.hx-drawer .s-Form .field.hx-check[style*="display:none"] {
  display: none !important;
}

/* Payment drawer: the "Paid to" chooser (bank account / payroll card) takes its own line; the number it picks follows */
.hx-bank-ident { flex: 0 0 100%; width: 100%; }
.hx-bank-ident .hx-segmented { max-width: 440px; }