/* =====================================================================
   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;
}
/* 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;
}
.select2-drop.select2-drop-above {
  border-radius: var(--hx-radius-md) !important;
  margin-top: -4px !important;
}
.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;
}
.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: the field is a column
   flex (caption above input), so an in-flow trigger landed on its own line
   BELOW the input, 38x44 and unmissable. */
.field:has(> img.ui-datepicker-trigger),
.field:has(> .ui-datepicker-trigger) { position: relative; }
.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;
}
.s-Form .ui-datepicker-trigger:hover { opacity: 1; }
/* 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;
}

/* =====================================================================
   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;
}