/* =====================================================================
   HRKLIX Design System — Grid / panel layer
   Implements the mock's .stats / .panel / .filters / table / .pager
   sections on top of Serenity's .s-DataGrid markup.
   ---------------------------------------------------------------------
   Companion script: hrklix-grid.js — wraps the title + toolbar into one
   header row, lifts the quick-search bar into the filters row, collapses
   secondary toolbar buttons into icon chips, and appends the reset link.
   Everything here degrades gracefully if that script does not run.
   ---------------------------------------------------------------------
   Selectors verified against Content/serenity/serenity.css
   (.grid-title 1686, .s-SlickPager 1445, .quick-filters-bar 3205,
    .s-QuickSearchBar 3266, .s-Toolbar 3331) — not guessed.
   Loaded LAST, after theme / shell / forms.
   ===================================================================== */

/* =====================================================================
   1. Stat cards — mock section .stats
   Base .hx-stats / .hx-stat live in hrklix-theme.css section 12c; this
   adds the icon tile, the tinted corner blob and the hover lift.
   Deliberately NO sparkline and NO invented trend delta — the only trend
   rendered is the one ratio that is actually derivable from the data.
   ===================================================================== */
.hx-stat {
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.hx-stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 34px -14px rgba(20, 47, 104, .22);
}
.hx-stat::after {
  content: "";
  position: absolute;
  inset: auto -30% -60% auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  opacity: .10;
  pointer-events: none;
}
.hx-stat-navy::after { background: var(--hx-navy); }
.hx-stat-sky::after { background: var(--hx-sky); }
.hx-stat-green::after { background: var(--hx-green); }
.hx-stat-orange::after { background: var(--hx-orange); }

.hx-stat-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  position: relative;
}
.hx-stat-ic {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.hx-stat-ic .icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hx-stat-navy .hx-stat-ic { background: rgba(20, 47, 104, .10); color: var(--hx-navy); }
.hx-stat-sky .hx-stat-ic { background: rgba(73, 179, 228, .15); color: var(--hx-sky-deep); }
.hx-stat-green .hx-stat-ic { background: var(--hx-green-bg); color: var(--hx-green-deep); }
.hx-stat-orange .hx-stat-ic { background: var(--hx-orange-bg); color: var(--hx-orange-deep); }

.hx-stat-trend {
  font-size: 11.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.hx-stat-trend .icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hx-trend-up { background: var(--hx-green-bg); color: var(--hx-green-deep); }
.hx-trend-flag { background: var(--hx-orange-bg); color: var(--hx-orange-deep); }
.hx-trend-muted { background: var(--hx-line-soft); color: var(--hx-muted); }

/* value/label sit above the blob */
.hx-stat-value { margin-top: 14px; position: relative; }
.hx-stat-label { position: relative; }

/* =====================================================================
   2. Panel card — mock section .panel
   The whole .s-DataGrid becomes the white rounded card.
   ===================================================================== */
section.content > .s-DataGrid,
.s-DataGrid.hx-panel {
  background: var(--hx-surface) !important;
  border: 1px solid var(--hx-line) !important;
  border-radius: var(--hx-radius-lg) !important;
  box-shadow: var(--hx-shadow-card) !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  /* flex column so the grid body absorbs the leftover height that
     Q.initFullHeightGridPage assigns to the card — without this the
     new padding pushes the pager below the fold. */
  display: flex !important;
  flex-direction: column !important;
}
section.content > .s-DataGrid > .grid-container,
.s-DataGrid.hx-panel > .grid-container {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  border: 1px solid var(--hx-line-soft) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}
/* the header row / filters / pager / filter-display strip must not be squeezed by the flex
   body. The grid body (.grid-container) is flex:1 1 auto and greedily takes the full-height
   card's leftover space; any sibling left at the default flex:0 1 auto gets shrunk below its
   content. The Serenity filter-display bar (its "Advance Filter" button) was missing here, so
   it was squeezed to a sliver and the 30px button was clipped by the rows above and below. */
.s-DataGrid > .hx-panel-head,
.s-DataGrid > .hx-filters,
.s-DataGrid > .s-SlickPager,
.s-DataGrid > .s-Toolbar,
.s-DataGrid > .s-FilterDisplayBar,
.s-DataGrid > .grid-title {
  flex: 0 0 auto !important;
}

/* ---- header row: title block on one side, actions on the other ---- */
.hx-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.hx-panel-head > .hx-panel-titlewrap {
  flex: 1 1 auto;
  min-width: 0;
}
/* title + count pill on one line; the pill is a SIBLING of .grid-title so
   Serenity's getTitle()/setTitle() round-trip stays clean. */
.hx-panel-titleline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.hx-panel-head .grid-title {
  border-bottom: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
}
.hx-panel-head > .s-Toolbar {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  border: none !important;
  flex: 0 0 auto;
}
.grid-title .title-text {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--hx-ink) !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* record-count pill, appended by hrklix-grid.js from ListResponse.TotalCount */
.hx-cnt {
  font-size: 12px;
  font-weight: 800;
  background: var(--hx-sky);
  color: #fff;
  padding: 2px 9px;
  border-radius: 999px;
  line-height: 1.6;
}
/* optional one-line description, from data-hx-subtitle on the grid div */
.hx-panel-sub {
  font-size: 12.5px;
  color: var(--hx-muted);
  margin-top: 4px;
  font-weight: 600;
}

/* List/Card view switch (CardViewMixin.ts): a segmented control in the grid title,
   navy for the active half, inline SVG icons so it stays crisp at any zoom. */
.grid-title .hx-view-switch.btn-group {
  display: inline-flex; vertical-align: middle; margin-inline-start: 12px;
  padding: 3px; gap: 2px; border-radius: 10px; background: var(--hx-surface-soft);
  border: 1px solid var(--hx-line); float: none !important;
}
.grid-title .hx-view-switch.btn-group .btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 28px; padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 7px !important; box-shadow: none !important;
  background: transparent !important; color: var(--hx-muted); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.grid-title .hx-view-switch.btn-group .btn:hover { color: var(--hx-navy); background: #fff !important; }
.grid-title .hx-view-switch.btn-group .btn.active { background: var(--hx-navy) !important; color: #fff; }
.grid-title .hx-view-switch.btn-group .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; display: block; }
.grid-title .hx-view-switch.btn-group .btn input { position: absolute; clip: rect(0,0,0,0); pointer-events: none; }

/* =====================================================================
   3. Toolbar — one navy primary CTA, everything else an icon chip
   ===================================================================== */
.s-DataGrid .s-Toolbar .buttons-inner,
.s-DataGrid .s-Toolbar .tool-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  float: none !important;
  padding: 0 !important;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.s-DataGrid .s-Toolbar .separator { display: none !important; }

/* secondary buttons collapsed to 40px chips by hrklix-grid.js */
.s-DataGrid .s-Toolbar .tool-button.hx-icon-only {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border-radius: 11px !important;
}
.s-DataGrid .s-Toolbar .tool-button.hx-icon-only .button-inner {
  padding: 0 !important;
  background-image: none !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}
/* the label is preserved in the title attribute, not shown */
.s-DataGrid .s-Toolbar .tool-button.hx-icon-only .hx-btn-label { display: none !important; }
/* the single labelled primary keeps its width and navy fill
   (gradient itself comes from hrklix-theme.css section 7) */
.s-DataGrid .s-Toolbar .tool-button.add-button {
  width: auto !important;
  min-width: 120px !important;
  height: 40px !important;
}
.s-DataGrid .s-Toolbar .tool-button.add-button .button-inner {
  gap: 8px;
  padding: 0 16px !important;
  background-image: none !important;
}

/* ---- polished labelled toolbar buttons: grouping = outlined chips, Calculate/Bulk/Post = navy filled ---- */
.s-DataGrid .s-Toolbar .tool-button.expand-all-button,
.s-DataGrid .s-Toolbar .tool-button.collapse-all-button,
.s-DataGrid .s-Toolbar .tool-button.calculate-button,
.s-DataGrid .s-Toolbar .tool-button.submit-button {
  height: 40px !important; min-height: 40px !important;
  border: 1px solid var(--hx-line) !important;
  border-radius: 11px !important;
  background: var(--hx-surface, #fff) !important;
  box-shadow: none !important;
  transition: background .15s, border-color .15s, color .15s;
}
.s-DataGrid .s-Toolbar .tool-button.expand-all-button .button-inner,
.s-DataGrid .s-Toolbar .tool-button.collapse-all-button .button-inner,
.s-DataGrid .s-Toolbar .tool-button.calculate-button .button-inner,
.s-DataGrid .s-Toolbar .tool-button.submit-button .button-inner {
  padding: 0 15px !important;
  background-image: none !important;
  font-weight: 600 !important;
  display: flex !important; align-items: center !important; gap: 7px !important;
  color: var(--hx-ink, #1b2435) !important;
}
.s-DataGrid .s-Toolbar .tool-button.expand-all-button:hover,
.s-DataGrid .s-Toolbar .tool-button.collapse-all-button:hover { border-color: var(--hx-navy) !important; }
.s-DataGrid .s-Toolbar .tool-button.expand-all-button:hover .button-inner,
.s-DataGrid .s-Toolbar .tool-button.collapse-all-button:hover .button-inner { color: var(--hx-navy) !important; }
/* primary actions filled navy */
.s-DataGrid .s-Toolbar .tool-button.calculate-button,
.s-DataGrid .s-Toolbar .tool-button.submit-button {
  background: var(--hx-navy) !important;
  border-color: var(--hx-navy) !important;
}
.s-DataGrid .s-Toolbar .tool-button.calculate-button .button-inner,
.s-DataGrid .s-Toolbar .tool-button.submit-button .button-inner { color: #fff !important; }
.s-DataGrid .s-Toolbar .tool-button.calculate-button:hover,
.s-DataGrid .s-Toolbar .tool-button.submit-button:hover {
  background: var(--hx-navy-2, #2b4e86) !important;
  border-color: var(--hx-navy-2, #2b4e86) !important;
}
/* payroll-month nav (Previous / Next month): match the outlined chip style and never
   wrap to two lines, so they sit at the same 40px height as the rest of the toolbar. */
.s-DataGrid .s-Toolbar .tool-button.month-nav-button {
  height: 40px !important; min-height: 40px !important;
  border: 1px solid var(--hx-line) !important;
  border-radius: 11px !important;
  background: var(--hx-surface, #fff) !important;
  box-shadow: none !important;
  transition: background .15s, border-color .15s, color .15s;
}
.s-DataGrid .s-Toolbar .tool-button.month-nav-button .button-inner {
  padding: 0 14px !important;
  background-image: none !important;
  font-weight: 600 !important;
  color: var(--hx-ink, #1b2435) !important;
  white-space: nowrap !important;
  display: flex !important; align-items: center !important; gap: 6px !important;
}
.s-DataGrid .s-Toolbar .tool-button.month-nav-button:hover { border-color: var(--hx-navy) !important; }
.s-DataGrid .s-Toolbar .tool-button.month-nav-button:hover .button-inner { color: var(--hx-navy) !important; }

/* tighter grid cells so the narrower columns read clean */
.s-DataGrid .slick-cell { padding-left: 6px !important; padding-right: 6px !important; }

/* =====================================================================
   4. Filters row — mock section .filters
   hrklix-grid.js builds .hx-filters and moves the quick-search bar and
   the quick-filters bar into it.
   ===================================================================== */
.hx-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px dashed var(--hx-line);
}

/* ---- quick search as the mock's pill (.search-field) ---- */
.hx-filters .s-QuickSearchBar,
.s-DataGrid .s-QuickSearchBar {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  background: var(--hx-surface-soft) !important;
  border: 1px solid var(--hx-line) !important;
  border-radius: 999px !important;
  padding: 0 8px 0 14px !important;
  margin: 0 !important;
  float: none !important;
  height: 40px !important;
  min-width: 240px;
  max-width: 340px;
  flex: 1 1 240px;
  box-sizing: border-box !important;
}
/* the maroon magnifier tile becomes a plain inline icon */
.s-DataGrid .s-QuickSearchBar .quick-search-icon {
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto;
}
.s-DataGrid .s-QuickSearchBar .quick-search-icon i {
  width: 17px !important;
  height: 17px !important;
  /* replaces serenity.css's dark base64 magnifier with the design system's
     stroke icon, tinted to the muted ink colour */
  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%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") !important;
  background-size: 17px 17px !important;
  background-position: center !important;
}
.s-DataGrid .s-QuickSearchBar input.s-QuickSearchInput {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  height: 38px !important;
  line-height: 38px !important;
  padding: 0 !important;
  font-size: 13px !important;
  color: var(--hx-ink) !important;
  border-radius: 0 !important;
  float: none !important;
  flex: 1 1 auto;
  min-width: 0;
}
.s-DataGrid a.quick-search-field {
  border: none !important;
  background-color: transparent !important;
  border-radius: 999px !important;
  color: var(--hx-sky-deep) !important;
  font-weight: 700 !important;
  height: 32px !important;
  line-height: 32px !important;
  float: none !important;
  margin: 0 !important;
  flex: 0 0 auto;
}

/* ---- quick filters as chip-selects ---- */
.hx-filters .quick-filters-bar,
.s-DataGrid .quick-filters-bar {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.s-DataGrid .quick-filters-bar hr { display: none !important; }
.s-DataGrid .quick-filter-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--hx-surface-soft) !important;
  border: 1px solid var(--hx-line) !important;
  border-radius: 999px !important;
  padding: 0 10px 0 14px !important;
  margin: 0 !important;
  height: 40px !important;
  box-sizing: border-box !important;
}
.s-DataGrid .quick-filter-item .quick-filter-label {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--hx-muted) !important;
  text-transform: none !important;
  white-space: nowrap;
  margin: 0 !important;
  text-align: start !important;
}
.s-DataGrid .quick-filter-active .quick-filter-label { color: var(--hx-sky-deep) !important; }
.s-DataGrid .quick-filter-active { border-color: var(--hx-sky) !important; }
/* editors inside a chip lose their own chrome — the chip is the control */
.s-DataGrid .quick-filter-item input,
.s-DataGrid .quick-filter-item select,
.s-DataGrid .quick-filter-item .select2-container .select2-choice {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  height: 36px !important;
  min-height: 36px !important;
  line-height: 36px !important;
  top: 0 !important;
  margin: 0 !important;
  padding: 0 4px !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--hx-ink-2) !important;
}
.s-DataGrid .quick-filter-item .select2-container { min-width: 110px; }
.s-DataGrid .quick-filter-item .select2-container .select2-arrow { border: none !important; background: transparent !important; }

/* ---- reset link, appended by hrklix-grid.js ---- */
.hx-reset-link {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--hx-sky-deep);
  cursor: pointer;
  background: none;
  border: none;
  padding: 6px 4px;
  font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}
.hx-reset-link:hover { color: var(--hx-navy); }
.hx-reset-link .icon {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* =====================================================================
   5. Table body
   Header/cell colours already come from hrklix-theme.css section 10;
   this adds the row hover and the row-actions cell.
   ===================================================================== */
/* Bug 6963: .Penalty/.Overtime cells (Attendance Calculation) always carry
   their own solid black/green background with white text - these generic
   hover/selected overrides have no idea that text is only readable against
   that specific background, so they were stripping it out from under the
   text. Leave those two cells alone. */
/* row hover highlight removed per request: no background change on mouse-over */

/* ---- vertical centring inside the taller (44px) rows ----
   Deliberately NOT `display:flex` on .slick-cell itself: SlickGrid relies on
   the cell being a block box for its text-overflow:ellipsis, and turning
   every cell into a flex container would silently drop ellipsis truncation
   on every plain-text column in the app. These rules target only the
   design-system cell wrappers, so untouched columns keep stock behaviour. */
.s-DataGrid .slick-cell > .hx-cell-name,
.s-DataGrid .slick-cell > .hx-row-actions {
  height: 100%;
  align-items: center;
}
.s-DataGrid .slick-cell > .hx-cell-emp {
  height: 100%;
  justify-content: center;
}
/* inline pills centre without disturbing the cell's block layout */
.s-DataGrid .slick-cell > .hx-tag,
.s-DataGrid .slick-cell > .hx-badge {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.hx-emp-unit {
  font-weight: 600;
  color: var(--hx-muted);
  font-size: 11.5px;
}

/* trailing actions cell (GridBase inline-actions column) */
.hx-row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.hx-ic-btn {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid var(--hx-line);
  background: var(--hx-surface);
  color: var(--hx-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
  text-decoration: none !important;
}
.hx-ic-btn:hover {
  border-color: var(--hx-sky);
  color: var(--hx-sky-deep);
  background: rgba(73, 179, 228, .08);
}
/* the row's Delete button: quiet like Edit until hovered, then red */
.hx-ic-btn.hx-ic-danger:hover {
  border-color: var(--hx-red);
  color: var(--hx-red);
  background: var(--hx-red-bg);
}
.hx-ic-btn .icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
/* SlickGrid clips cells, so the row menu is rendered at <body> level by
   hrklix-grid.js and positioned against the button. */
.hx-row-menu {
  position: absolute;
  z-index: 1200;
  min-width: 168px;
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius-md);
  box-shadow: var(--hx-shadow-pop);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hx-row-menu-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: var(--hx-radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--hx-ink-2);
  background: none;
  border: none;
  width: 100%;
  text-align: start;
  font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}
.hx-row-menu-item:hover { background: var(--hx-surface-soft); }
.hx-row-menu-item.hx-danger { color: var(--hx-red); }
.hx-row-menu-item.hx-danger:hover { background: var(--hx-red-bg); }
.hx-row-menu-item .icon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

/* =====================================================================
   6. Pager — mock section .pager
   Restyle of Serenity's existing SlickPager controls. The mock's literal
   "1 2 3" page list would require rebuilding the pager DOM, which is not
   worth the risk across every grid — the controls below keep Serenity's
   own paging behaviour untouched.
   ===================================================================== */
.s-DataGrid .s-SlickPager {
  background: transparent !important;
  border: none !important;
  height: auto !important;
  min-height: 46px !important;
  padding: 14px 2px 0 !important;
  overflow: visible !important;
  color: var(--hx-muted) !important;
  font-size: 12.5px !important;
}
.s-DataGrid .slick-pg-in {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap;
}
.s-DataGrid .slick-pg-grp {
  float: none !important;
  height: auto !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.s-DataGrid .slick-pg-btn {
  float: none !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  border: 1px solid var(--hx-line) !important;
  background-color: var(--hx-surface) !important;
  background-size: 11px auto !important;
  background-position: center !important;
  transition: border-color .12s ease, background-color .12s ease;
}
.s-DataGrid .slick-pg-btn:hover {
  border-color: var(--hx-sky) !important;
  background-color: rgba(73, 179, 228, .08) !important;
}
.s-DataGrid .slick-pg-btn-span { display: none !important; }
/* Serenity's pager arrows are dark base64 PNGs that clash with the palette.
   Replace them with the design system's stroke chevrons, tinted muted. */
.s-DataGrid .slick-pg-first { 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='%233E4A66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 18l-6-6 6-6M7 6v12'/%3E%3C/svg%3E") !important; }
.s-DataGrid .slick-pg-prev  { 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='%233E4A66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important; }
.s-DataGrid .slick-pg-next  { 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='%233E4A66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important; }
.s-DataGrid .slick-pg-last  { 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='%233E4A66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 6l6 6-6 6M17 6v12'/%3E%3C/svg%3E") !important; }
.s-DataGrid .slick-pg-reload { 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='%233E4A66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 0 1 14-5.3L21 9M21 4v5h-5M20 12a8 8 0 0 1-14 5.3L3 15M3 20v-5h5'/%3E%3C/svg%3E") !important; }
.s-DataGrid .slick-pg-btn:hover { background-color: rgba(73,179,228,.08) !important; }

/* the InplaceAdd "+" button inside a quick-filter chip still carried
   serenity.css's grey gradient + star-pencil sprite — neutralise it the same
   way hrklix-forms.css does for form editors. */
.s-DataGrid .quick-filter-item .inplace-button {
  border: 1px solid var(--hx-line) !important;
  border-radius: 8px !important;
  background: var(--hx-surface) !important;
  background-image: none !important;
  filter: none !important;
  width: 26px !important;
  height: 26px !important;
  float: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.s-DataGrid .quick-filter-item .inplace-button:hover {
  border-color: var(--hx-sky) !important;
  background: rgba(73,179,228,.08) !important;
}
.s-DataGrid .quick-filter-item .inplace-button b {
  width: 14px !important;
  height: 14px !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='%232C93C7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-size: 12px 12px !important;
}

/* Serenity's filter-display strip under the grid */
.s-DataGrid .s-FilterDisplayBar {
  background: var(--hx-surface-soft) !important;
  border: 1px solid var(--hx-line-soft) !important;
  border-radius: var(--hx-radius-sm) !important;
  margin-top: 10px !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
  color: var(--hx-muted) !important;
}
.s-DataGrid .s-FilterDisplayBar a { color: var(--hx-sky-deep) !important; font-weight: 700 !important; }
.s-DataGrid .slick-pg-control input[type=text] {
  width: 42px !important;
  height: 30px !important;
  line-height: 30px !important;
  text-align: center !important;
  border: 1px solid var(--hx-navy) !important;
  background: var(--hx-navy) !important;
  color: #fff !important;
  font-weight: 800 !important;
  border-radius: 9px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.s-DataGrid .slick-pg-size {
  height: 30px !important;
  line-height: 30px !important;
  border: 1px solid var(--hx-line) !important;
  border-radius: 9px !important;
  background: var(--hx-surface) !important;
  color: var(--hx-ink-2) !important;
  font-weight: 700 !important;
  padding: 0 8px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.s-DataGrid .slick-pg-stat {
  top: 0 !important;
  color: var(--hx-muted) !important;
  font-size: 12.5px !important;
  margin-inline-start: auto !important;
}

/* =====================================================================
   7. Responsive
   ===================================================================== */
@media (max-width: 900px) {
  section.content > .s-DataGrid { padding: 14px !important; }
  .hx-panel-head { gap: 12px; }
  .s-DataGrid .s-Toolbar .buttons-inner { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .s-DataGrid .s-QuickSearchBar { max-width: none; flex: 1 1 100%; }
  .hx-reset-link { margin-inline-start: 0; }
}

/* =====================================================================
   8. Panel-mode suppression
   hrklix-drawer.js adds .hx-panel-suppressed to the grid while a
   @Decorators.panel() form is open. Declared HERE (not in
   hrklix-forms.css) because section 2 above sets
       section.content > .s-DataGrid { display:flex !important }
   in this same file — the earlier-loading rule could never win.
   ===================================================================== */
.hx-panel-suppressed,
section.content > .s-DataGrid.hx-panel-suppressed,
.s-DataGrid.hx-panel-suppressed,
.hx-stats.hx-panel-suppressed {
  display: none !important;
}

/* =====================================================================
   9. Analytics screen (Power BI board, moved off the dashboard)
   ===================================================================== */
.hx-analytics {
  display: flex;
  min-height: 420px;
}
.hx-analytics-frame {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius-lg);
  box-shadow: var(--hx-shadow-card);
  overflow: hidden;
}
.hx-analytics-frame > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Grid footer / aggregate row ----------
   Serenity core paints the totals row pink (#EDD6E2, serenity.css:1436) --
   a leftover from its stock skin that clashes with everything around it.
   Core is off-limits, so it is re-skinned here to the theme surface. */
.slick-footerrow,
.slick-footerrow-columns {
  background: var(--hx-surface-soft) !important;
  border-top: 1px solid var(--hx-line) !important;
}
.slick-footerrow-column,
.slick-footerrow-column.ui-state-default {
  background: var(--hx-surface-soft) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-right: 1px solid var(--hx-line) !important;
  color: var(--hx-navy) !important;
  font-weight: 700;
  font-size: 12.5px;
  display: flex;
  align-items: center;
}

/* ---------- Quick-filter select2 (multi) ----------
   A multi-value lookup renders <ul class="select2-choices">, which select2
   paints with a 1px #aaa square border and a white fill. The existing rules
   only covered the singular .select2-choice, so a multi filter (e.g.
   Employee Name on OverTime Request) showed a grey rectangle sitting inside
   the rounded filter pill. */
.quick-filter-item .select2-container .select2-choices,
.quick-filter-item .select2-container-multi .select2-choices,
.s-Toolbar .select2-container-multi .select2-choices,
.quick-filters-bar .select2-container-multi .select2-choices {
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  min-height: 34px !important;
  padding: 0 !important;
}
.quick-filter-item .select2-container-multi .select2-choices li.select2-search-field input,
.quick-filters-bar .select2-container-multi .select2-choices li.select2-search-field input {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  height: 32px !important;
}
.quick-filter-item .select2-container-multi.select2-container-active .select2-choices {
  border: 0 !important;
  box-shadow: none !important;
}

/* ---------- Employee card view ----------
   The grid's card mode (view-switch -> Card View). CardViewMixin renders
   .card-container > .card-items > [itemCssClass] > .card-item, and the
   template inside is ours. */
.card-container { background: transparent !important; overflow: auto; }
.card-container .card-items {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.card-container .card-item { padding: 0 !important; }

.hx-emp-card {
  display: flex; flex-direction: column; gap: 4px;
  height: 100%; padding: 18px 18px 14px;
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  border-radius: var(--hx-radius-md, 14px);
  cursor: pointer;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.hx-emp-card:hover {
  border-color: var(--hx-navy-line);
  box-shadow: var(--hx-shadow-card, 0 10px 24px -12px rgba(20, 47, 104, .25));
  transform: translateY(-2px);
}
.hx-emp-card.is-inactive { background: var(--hx-surface-soft); }
.hx-emp-card.is-inactive .hx-emp-name { color: var(--hx-muted); }
.hx-emp-card.is-inactive .hx-emp-avatar { filter: grayscale(1); opacity: .7; }

.hx-emp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.hx-emp-avatar {
  width: 56px; height: 56px; border-radius: 16px; object-fit: cover; display: block; flex: 0 0 auto;
  background: var(--hx-navy-bg);
}
.hx-emp-initials {
  display: flex; align-items: center; justify-content: center;
  font: 800 17px var(--hx-font-display); color: var(--hx-navy); letter-spacing: .02em;
  background: linear-gradient(135deg, var(--hx-navy-bg), #DCE6F7);
}

/* one pill: today's attendance (or Inactive for someone off the roll) */
.hx-emp-state {
  display: inline-flex; align-items: center; gap: 6px; max-width: 60%;
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 16px;
  background: var(--hx-surface-soft); color: var(--hx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hx-emp-state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.hx-emp-state.is-in, .hx-emp-pill.is-in { background: var(--hx-green-bg); color: var(--hx-green-deep); }
.hx-emp-state.is-absent, .hx-emp-pill.is-absent { background: var(--hx-red-bg); color: var(--hx-red); }
.hx-emp-state.is-leave, .hx-emp-pill.is-leave { background: var(--hx-orange-bg); color: var(--hx-orange-deep); }
.hx-emp-state.is-off, .hx-emp-pill.is-off { background: var(--hx-navy-bg); color: var(--hx-navy-3); }
.hx-emp-state.is-none, .hx-emp-pill.is-none { background: var(--hx-surface-soft); color: var(--hx-muted); }
.hx-emp-state.is-off-roll { background: #EEF1F6; color: #64748B; }

.hx-emp-name {
  font: 800 15px/1.3 var(--hx-font-display); color: var(--hx-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hx-emp-title { font-size: 12.5px; font-weight: 600; color: var(--hx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hx-emp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hx-emp-tag {
  display: inline-block; max-width: 100%; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 16px; background: #F1F4F9; color: var(--hx-ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hx-emp-tag.is-dept { background: var(--hx-navy-bg); color: var(--hx-navy-3); }

.hx-emp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.hx-emp-code { font: 600 11.5px var(--hx-font-data); color: var(--hx-muted); letter-spacing: .02em; }
.hx-emp-links { display: flex; gap: 6px; }
.hx-emp-link {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 9px; border: 1px solid var(--hx-line); background: #fff; color: var(--hx-ink-2);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hx-emp-link:hover { background: var(--hx-navy); border-color: var(--hx-navy); color: #fff; }
.hx-emp-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* the same status as a pill in the list view */
.hx-emp-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 18px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }

/* "26 employees" next to the directory title */
.grid-title .hx-dir-count { margin-inline-start: 10px; font-size: 12.5px; font-weight: 600; color: var(--hx-muted); vertical-align: middle; }

/* ---------- Collapsible filters ----------
   The editors used to sit inline and cost ~200px on every grid, which is why
   only six rows fitted on screen. They now live in a panel that opens from
   the Filters button; the lead row keeps the search pill plus a chip for
   whatever is actually applied. */
.hx-filters { position: relative; margin-bottom: 10px; }
.hx-filters-lead {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hx-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--hx-line);
  background: var(--hx-surface);
  color: var(--hx-text-2, #5A6B85);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.hx-filters-toggle:hover { border-color: var(--hx-sky); color: var(--hx-navy); }
.hx-filters.is-open .hx-filters-toggle,
.hx-filters.has-applied .hx-filters-toggle {
  border-color: var(--hx-sky);
  color: var(--hx-navy);
  background: rgba(73, 179, 228, .08);
}
.hx-filters-count {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 20px; background: var(--hx-sky); color: #fff;
  font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center;
}

.hx-filters-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.hx-filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 6px 0 12px;
  border-radius: 999px;
  background: var(--hx-surface-soft);
  border: 1px solid var(--hx-line);
  font-size: 12px; max-width: 280px;
}
.hx-filter-chip-key { color: var(--hx-text-3, #8494AD); font-weight: 700; white-space: nowrap; }
.hx-filter-chip-val {
  color: var(--hx-navy); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hx-filter-chip-x {
  width: 20px; height: 20px; flex: 0 0 auto;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--hx-text-3, #8494AD);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.hx-filter-chip-x:hover { background: rgba(224, 78, 78, .12); color: #C93B3B; }

/* the panel overlays the grid instead of pushing it, so the row count does
   not jump every time you open the filters */
.hx-filters-panel {
  display: none;
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  z-index: 40;
  padding: 14px;
  padding-top: 38px;
  border-radius: 16px;
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  box-shadow: 0 14px 38px rgba(16, 33, 71, .14);
}
.hx-filters.is-open .hx-filters-panel { display: block; }
.hx-filters-panel .quick-filters-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; }

/* explicit close affordance on the open panel, in addition to re-clicking
   the Filters toggle - see Bug 6912 */
.hx-filters-panel-close {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--hx-muted, #6B7A99);
  cursor: pointer;
}
.hx-filters-panel-close:hover { background: rgba(16, 33, 71, .08); color: var(--hx-navy); }

/* the reset link only earns its place once something is applied */
.hx-filters .hx-reset-link { margin-inline-start: auto; }
.hx-filters:not(.has-applied) .hx-reset-link { display: none !important; }

/* ---------- Grid fills the window ----------
   The panel is a column: head and filters take what they need, the grid takes
   the rest, and scrolling happens inside the grid rather than on the page. */
.s-DataGrid { display: flex; flex-direction: column; }
.s-DataGrid > .grid-container { flex: 1 1 auto; min-height: 220px; }

/* Bug 6977: AttendanceDeductionRuleList/AttendanceOvertimeRuleList are small
   RowField grids embedded inside a page category (not a full standalone grid
   page), reusing the ".s-DataGrid > .grid-container { flex: 1 1 auto }" rule
   above. Opening and closing the per-row edit dialog for one of their rows
   can leave that flex-grow chain reading stale/oversized available space,
   inflating the embedded grid and pushing "Assign to Employees"/"Assign to
   Groups" down with a large empty gap. Cap the WIDGET (not .grid-container
   itself - SlickGrid sets its own inline pixel height there, and overriding
   it directly fights that and collapses the grid to 0, per Bug 6974) so
   whatever triggers the oversized reading can only ever produce an internal
   scrollbar, never a runaway empty section. */
.s-AttendanceDeductionRuleListEditor.s-DataGrid,
.s-AttendanceOvertimeRuleListEditor.s-DataGrid {
  max-height: 340px !important;
  overflow-y: auto !important;
}

/* ---------- Grouped rows (the tree view) ----------
   slick.grid.css ships .slick-group and .slick-group-toggle empty -- no fill, no
   indent, and no toggle glyph at all -- so a grouped grid renders as rows of
   plain text with an invisible expander. Everything below is that missing
   presentation, not a restyle of something that already worked.

   Logical properties (inline-start / margin-inline) so the same rules hold when
   the shell flips to RTL for Arabic. */
.slick-row .slick-group-title { font-weight: 800; }

.slick-group {
  background: var(--hx-surface-soft) !important;
  border-bottom: 1px solid var(--hx-line) !important;
}

.slick-group .slick-cell {
  color: var(--hx-navy) !important;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  letter-spacing: .01em;
}

/* The expander. A CSS triangle rather than an icon font: it inherits colour,
   needs no extra request, and rotates rather than swapping glyphs, so the
   open and closed states cannot drift apart. */
.slick-group-toggle {
  width: 0;
  height: 0;
  margin-inline-end: 9px;
  vertical-align: middle;
  border-block: 4.5px solid transparent;
  border-inline-start: 6px solid var(--hx-sky-deep);
  border-inline-end: 0;
  cursor: pointer;
  transition: transform .15s ease;
}

.slick-group-toggle.expanded { transform: rotate(90deg); }

/* RTL: the closed arrow must point the other way, and rotating it the same
   direction would then point up instead of down. */
.rtl .slick-group-toggle.expanded { transform: rotate(-90deg); }

/* The count beside a heading: how many objectives sit under it, quiet enough
   not to compete with the name. */
.hx-group-count {
  display: inline-block;
  margin-inline-start: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  color: var(--hx-muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* A toolbar toggle that is currently on. */
.s-DataGrid .hx-toggle-button.active,
.hx-panel .hx-toggle-button.active {
  background: rgba(73, 179, 228, .12) !important;
  border-color: var(--hx-sky) !important;
  color: var(--hx-sky-deep) !important;
}

/* ---- empty state (hrklix-grid.js attachEmptyState): an overlay under the
   column header of any grid with no rows. pointer-events none, so the
   grid body behind it keeps its own clicks and drops. ---- */
.s-DataGrid > .grid-container { position: relative; }
.hx-grid-empty {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 3;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  text-align: center;
  color: var(--hx-muted);
}
.hx-grid-empty.is-on { display: flex; }
.hx-grid-empty-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--hx-navy-bg);
  color: var(--hx-navy-3);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.hx-grid-empty b { font-size: 13.5px; font-weight: 800; color: var(--hx-ink); }
.hx-grid-empty p { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--hx-muted); max-width: 360px; }
/* a grid editor's body is short: keep the message compact there */
.s-Form .s-DataGrid .hx-grid-empty { padding: 8px; }
.s-Form .s-DataGrid .hx-grid-empty-icon { width: 36px; height: 36px; border-radius: 10px; }

/* ---------- Card view: even 24px gutters, no stray horizontal scrollbar ----------
   Bootstrap's columns give 30px side gutters and none between rows, and the item
   padding set from the grid is zeroed above; the spacing lives on the column instead.
   The negative margin on .card-items made the container 12px wider than its box, which
   drew the grey scrollbar strip above the pager. */
.card-container { overflow-x: hidden !important; overflow-y: auto; }
.card-container .card-items { margin: 0 -12px; padding: 6px 0 2px; }
.card-container .card-items > [class*="col-"] { padding: 0 12px 24px !important; }
.card-container .card-item { padding: 0 !important; height: 100%; }

/* ---------- Footer: the filter strip under the grid as a quiet right-aligned row ---------- */
.s-DataGrid .s-FilterDisplayBar {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  margin: 8px 0 0 !important; padding: 0 !important; min-height: 0 !important; font-size: 12.5px !important;
  /* the grid body (.grid-container) is positioned (SlickGrid) and its rounded bottom corner can
     overlap this strip; without a stacking context of its own the strip (and its "Advance Filter"
     button) was painted UNDER that corner and looked clipped. position+z-index lifts it above. */
  position: relative !important; z-index: 2 !important;
}
.s-DataGrid .s-FilterDisplayBar > div { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.s-DataGrid .s-FilterDisplayBar a.edit,
.s-DataGrid .s-FilterDisplayBar a.reset {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px !important; margin: 0 !important;
  border: 1px solid var(--hx-line); border-radius: 9px; background: var(--hx-surface) !important; background-image: none !important;
  color: var(--hx-navy) !important; font-weight: 600 !important; font-size: 12.5px !important; text-decoration: none !important; line-height: 28px;
  transition: border-color .12s ease, background-color .12s ease;
}
.s-DataGrid .s-FilterDisplayBar a.edit:hover,
.s-DataGrid .s-FilterDisplayBar a.reset:hover { border-color: var(--hx-navy); background: var(--hx-surface-soft) !important; }
.s-DataGrid .s-FilterDisplayBar a.edit::before,
.s-DataGrid .s-FilterDisplayBar a.reset::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 auto; background-position: center; background-repeat: no-repeat; background-size: 14px 14px;
}
.s-DataGrid .s-FilterDisplayBar a.edit::before { 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='%23142F68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8v5l-4 2v-7z'/%3E%3C/svg%3E"); }
.s-DataGrid .s-FilterDisplayBar a.reset { width: 30px; padding: 0 !important; justify-content: center; }
.s-DataGrid .s-FilterDisplayBar a.reset::before { 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.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.s-DataGrid .s-FilterDisplayBar .current {
  display: inline-flex !important; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--hx-navy-bg); color: var(--hx-navy-3); font-size: 12.5px; max-width: 70%; min-width: 0;
}
.s-DataGrid .s-FilterDisplayBar .current[style*="display: none"],
.s-DataGrid .s-FilterDisplayBar a.reset[style*="display: none"],
.s-DataGrid .s-FilterDisplayBar a.edit[style*="display: none"] { display: none !important; }
.s-DataGrid .s-FilterDisplayBar .current .cap { font-weight: 700; white-space: nowrap; }
.s-DataGrid .s-FilterDisplayBar .current a.txt { color: var(--hx-navy-3) !important; font-weight: 600 !important; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-DataGrid .s-FilterDisplayBar .current a.txt:hover { text-decoration: underline; }
.s-DataGrid .slick-pg { padding-top: 10px !important; }

/* ---------- Edit Filter dialog: the criteria panel in the theme's controls ---------- */
html body .ui-dialog.s-FilterDialog .ui-dialog-content { padding: 18px 22px 10px !important; }
html body .s-FilterPanel { padding: 0 !important; }
html body .s-FilterPanel div.filter-lines { margin: 0 !important; }
html body .s-FilterPanel div.filter-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 5px 0 !important; }
html body .s-FilterPanel div.f, html body .s-FilterPanel div.l, html body .s-FilterPanel div.o, html body .s-FilterPanel div.v { float: none !important; padding: 0 !important; width: auto !important; }
html body .s-FilterPanel div.l:not([style*="display: none"]) { display: flex !important; align-items: center; gap: 4px; }
html body .s-FilterPanel div.l a.andor {
  float: none !important; width: auto !important; min-width: 40px; margin: 0 !important; padding: 0 10px !important; line-height: 24px !important;
  border-radius: 999px; background: var(--hx-navy-bg); color: var(--hx-navy-3); font-weight: 700; font-size: 11.5px !important; text-decoration: none; text-transform: uppercase;
}
html body .s-FilterPanel div.l a.leftparen, html body .s-FilterPanel div.l a.rightparen { color: var(--hx-muted) !important; text-decoration: none; font-size: 16px !important; line-height: 24px !important; width: 10px !important; float: none !important; }
html body .s-FilterPanel div.l a.active { color: var(--hx-green-deep) !important; }
html body .s-FilterPanel div.f .select2-container { width: 220px !important; }
html body .s-FilterPanel div.o .select2-container { width: 150px !important; }
html body .s-FilterPanel div.v { flex: 1 1 140px; min-width: 140px; max-width: 460px; }
html body .s-FilterPanel div.v .select2-container, html body .s-FilterPanel div.v input[type="text"], html body .s-FilterPanel div.v select { width: 100% !important; max-width: none !important; }
html body .s-FilterPanel .select2-container .select2-choice {
  height: 36px !important; line-height: 34px !important; border: 1.5px solid var(--hx-line) !important; border-radius: 10px !important;
  background: var(--hx-surface) !important; background-image: none !important; padding: 0 30px 0 12px !important; color: var(--hx-ink) !important;
  box-shadow: none !important; font-size: 13px !important;
}
html body .s-FilterPanel .select2-container-active .select2-choice, html body .s-FilterPanel .select2-dropdown-open .select2-choice { border-color: var(--hx-navy) !important; box-shadow: 0 0 0 3px var(--hx-navy-bg) !important; }
html body .s-FilterPanel .select2-container .select2-choice .select2-chosen { margin: 0 !important; color: var(--hx-ink) !important; }
html body .s-FilterPanel .select2-container .select2-choice.select2-default .select2-chosen { color: var(--hx-muted) !important; }
html body .s-FilterPanel .select2-container .select2-choice .select2-arrow { border: 0 !important; background: transparent !important; width: 28px !important; }
html body .s-FilterPanel .select2-container .select2-choice .select2-arrow b {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6B85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat !important;
}
html body .s-FilterPanel .select2-container .select2-choice abbr { top: 50% !important; margin-top: -6px !important; }
html body .s-FilterPanel div.v input[type="text"], html body .s-FilterPanel div.v input.editor {
  height: 36px !important; border: 1.5px solid var(--hx-line) !important; border-radius: 10px !important; padding: 0 12px !important;
  background: var(--hx-surface) !important; color: var(--hx-ink) !important; font-size: 13px !important; box-shadow: none !important; box-sizing: border-box;
}
html body .s-FilterPanel div.v input[type="text"]:focus { border-color: var(--hx-navy) !important; box-shadow: 0 0 0 3px var(--hx-navy-bg) !important; outline: none; }
html body .s-FilterPanel a.delete {
  display: inline-flex !important; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 auto;
  float: none !important; margin: 0 !important; padding: 0 !important; border: 1px solid var(--hx-line); border-radius: 9px; background: var(--hx-surface) !important;
  transition: border-color .12s ease, background-color .12s ease;
}
html body .s-FilterPanel a.delete:hover { border-color: var(--hx-red); background: var(--hx-red-bg) !important; }
html body .s-FilterPanel a.delete span {
  display: block; width: 14px; height: 14px; margin: 0 !important;
  background: 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.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / 14px 14px no-repeat !important;
}
html body .s-FilterPanel div.buttons { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--hx-line-soft); }
html body .s-FilterPanel div.buttons .btn {
  display: inline-flex; align-items: center; height: 36px !important; padding: 0 14px !important; margin: 0 !important;
  border-radius: 10px !important; border: 1px solid var(--hx-line) !important; background: var(--hx-surface) !important; background-image: none !important;
  color: var(--hx-navy) !important; font: 600 13px var(--hx-font-ui) !important; box-shadow: none !important; text-shadow: none !important; text-transform: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
html body .s-FilterPanel div.buttons .btn[style*="display: none"] { display: none !important; }
html body .s-FilterPanel div.buttons .btn:hover { border-color: var(--hx-navy) !important; background: var(--hx-surface-soft) !important; color: var(--hx-navy) !important; }
html body .s-FilterPanel div.buttons .btn.add { background: var(--hx-navy) !important; border-color: var(--hx-navy) !important; color: #fff !important; }
html body .s-FilterPanel div.buttons .btn.add:hover { background: var(--hx-navy-2) !important; border-color: var(--hx-navy-2) !important; color: #fff !important; }
html body .s-FilterPanel div.buttons .btn.search { border-color: var(--hx-green) !important; color: var(--hx-green-deep) !important; }
html body .s-FilterPanel div.buttons .btn.reset { color: var(--hx-red) !important; }
html body .s-FilterPanel div.buttons .btn.reset:hover { border-color: var(--hx-red) !important; background: var(--hx-red-bg) !important; color: var(--hx-red) !important; }

/* =====================================================================
   10. Employee Logs (Attendance/EmployeeCheck)
   Period presets beside the Filters button, and the check cells.
   ===================================================================== */
.hx-period {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--hx-line);
  background: var(--hx-surface-soft);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  box-sizing: border-box;
}
.hx-period::-webkit-scrollbar { display: none; }
.hx-period-btn {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--hx-ink-2);
  font: 700 12.5px var(--hx-font-ui);
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.hx-period-btn:hover { background: var(--hx-surface); color: var(--hx-navy); }
.hx-period-btn:focus-visible { outline: none; box-shadow: var(--hx-focus); }
.hx-period-btn.active,
.hx-period-btn.active:hover { background: var(--hx-navy); color: #fff; }
.hx-period-standalone { margin-bottom: 12px; }

.hx-check-inout .hx-badge { padding: 2px 10px; vertical-align: baseline; }
/* Employee Logs: refused mobile punches listed among the punches (EmployeeCheckGrid, "Show refused punches") */
.hx-refused-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 10px; font-size: 12px; line-height: 18px; white-space: nowrap; background: #fde8e8; color: #b42318; font-weight: 700; }
.hx-refused-why { color: #b42318; font-size: 12px; }
.s-DataGrid .slick-row.hx-refused-row .slick-cell { background: #fff6f6; }
.hx-refused-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 10px; padding: 0 8px; font-weight: 500; font-size: 12px; color: #374151; cursor: pointer; white-space: nowrap; }
html[dir="rtl"] .hx-refused-toggle { margin: 0 10px 0 0; }
.hx-refused-toggle input { margin: 0; }
.s-DataGrid .slick-cell .hx-check-time {
  font-weight: 700;
  color: var(--hx-ink);
  font-variant-numeric: tabular-nums;
}
.s-DataGrid .slick-cell .hx-check-date {
  margin-inline-start: 8px;
  font-size: 12px;
  color: var(--hx-muted);
}
.hx-check-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--hx-line-soft);
  color: var(--hx-muted);
}
.hx-check-source .fa { font-size: 12px; }
.hx-check-source-mobile { background: rgba(73, 179, 228, .12); color: var(--hx-sky-deep); }
.hx-check-source-manual { background: var(--hx-violet-bg); color: var(--hx-violet); }

/* ---------- Employee Directory: tick a card, and the "Send message" popup ---------- */
.hx-emp-card { position: relative; }
.hx-emp-topright { display: flex; align-items: center; gap: 8px; max-width: 65%; }
.hx-emp-topright .hx-emp-state { max-width: 100%; }
.hx-emp-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0; cursor: pointer; flex: 0 0 auto; }
.hx-emp-check input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--hx-navy); }
.hx-emp-card.is-selected { border-color: var(--hx-navy); box-shadow: 0 0 0 2px var(--hx-navy-bg); }
.ui-dialog.hx-ask.hx-msg-dialog { width: 560px !important; }
.hx-msg-lead { margin: 0 0 14px; font-size: 13px; color: var(--hx-muted); }
.hx-msg-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; font-size: 12.5px; font-weight: 600; color: var(--hx-ink-2); }
.hx-msg-field input, .hx-msg-field textarea {
  width: 100%; box-sizing: border-box; border: 1.5px solid var(--hx-line); border-radius: 10px; padding: 9px 12px;
  font: 500 13.5px var(--hx-font-ui); color: var(--hx-ink); background: var(--hx-surface); resize: vertical;
}
.hx-msg-field input:focus, .hx-msg-field textarea:focus { outline: none; border-color: var(--hx-navy); box-shadow: 0 0 0 3px var(--hx-navy-bg); }
.hx-msg-hint { margin: 0; font-size: 12px; color: var(--hx-muted); }
.hx-msg-err { display: none; margin: 10px 0 0; font-size: 12.5px; color: var(--hx-red); }
.hx-msg-err.is-on { display: block; }

/* Punch approval request dialog: in / out, time and place at the top (PunchRequestDialog) */
.hx-punch-summary { margin: 4px 0 14px; }
.hx-punch-card {
  border: 1px solid var(--hx-line);
  border-left: 4px solid var(--hx-navy);
  border-radius: 8px;
  background: var(--hx-surface);
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.hx-punch-line { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.hx-punch-time { font-weight: 700; color: var(--hx-ink); font-variant-numeric: tabular-nums; }
.hx-punch-where { color: var(--hx-ink); }
.hx-punch-map { display: inline-flex; align-items: center; gap: 6px; color: var(--hx-navy); font-weight: 600; }
.hx-punch-map .icon { width: 16px; height: 16px; }
.slick-cell .open-map .icon { width: 16px; height: 16px; }

/* =====================================================================
   Bulk actions bar (25 Oct 2026)
   ---------------------------------------------------------------------
   The navy row that opens between the filters and the rows the moment
   something is ticked, from BulkActionsMixin. It never replaces the panel
   head: the screen title, the record count and the toolbar stay where
   they are, because the count is exactly what the user needs to read
   while picking many records.

   Written with logical properties only, so Arabic mirrors with no extra
   rules. The bar lives INSIDE .s-DataGrid, above .grid-container, and
   SlickGrid scrolls under it, so it stays in view without sticky (see
   the shell note: the document scrolls, not the grid).
   ===================================================================== */
.hx-bulkbar {
  display: none;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 16px;
  background: var(--hx-navy);
  color: #fff;
  box-shadow: 0 10px 20px -16px rgba(13, 32, 80, .9);
  font-family: var(--hx-font-ui);
}
.hx-bulkbar.is-on { display: flex; animation: hx-bulk-in .18s ease; }
@keyframes hx-bulk-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hx-bulkbar.is-on { animation: none; } }

.hx-bulk-count {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.hx-bulk-mark {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .16);
  display: grid; place-items: center;
}
.hx-bulk-mark .icon { width: 15px; height: 15px; }

.hx-bulk-scope { font-size: 12.5px; color: #C7D6F2; }
.hx-bulk-link {
  background: none; border: 0; padding: 0;
  color: #fff; font: 700 12.5px var(--hx-font-ui);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.hx-bulk-link:hover { color: #BBD6FF; }
.hx-bulk-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }

.hx-bulk-acts { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hx-bulk-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--hx-radius-sm);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font: 600 13px var(--hx-font-ui);
  cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s;
}
.hx-bulk-btn:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); }
.hx-bulk-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(73, 179, 228, .9); }
.hx-bulk-btn .icon { width: 16px; height: 16px; flex: none; }
.hx-bulk-btn.is-solid { background: #fff; border-color: #fff; color: var(--hx-navy); }
.hx-bulk-btn.is-solid:hover { background: #EAF1FF; }
.hx-bulk-btn.is-icon { width: 34px; padding: 0; justify-content: center; }
.hx-bulk-sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .26); }

/* =====================================================================
   Picking rows: the whole row is the target, and a picked row says so
   ---------------------------------------------------------------------
   Clicking anywhere on a row that is not a link or a button ticks it
   (BulkActionsMixin). The tick box is kept, because it is what tells a
   first-time user the list can be picked from at all.
   ===================================================================== */

/* the row itself: a pointer, and no text selection while shift-picking a range */
.s-DataGrid .slick-row .slick-cell { cursor: default; }
.s-DataGrid.hx-pickable .slick-row { user-select: none; -webkit-user-select: none; }
/* pickable row-hover background removed per request */

/* a picked row: a soft navy wash and a navy edge down its start side.
   Scoped with :not(.hx-attcalc-grid): the Attendance Calculation grid highlights selected
   rows through its own .hx-rowsel row class (section 10 / 15, no :has), so it is excluded
   here to avoid a double highlight. Other checkbox grids keep this generic highlight. */
.s-DataGrid:not(.hx-attcalc-grid) .slick-row:has(.select-item.checked) .slick-cell { background: #E4EDFB; }
.s-DataGrid:not(.hx-attcalc-grid) .slick-row:has(.select-item.checked) .slick-cell:first-child {
  box-shadow: inset 3px 0 0 0 var(--hx-navy);
}
.rtl .s-DataGrid:not(.hx-attcalc-grid) .slick-row:has(.select-item.checked) .slick-cell:first-child {
  box-shadow: inset -3px 0 0 0 var(--hx-navy);
}

/* the tick box itself, in the theme: Serenity renders a span, not an input */
.s-DataGrid .select-item,
.s-DataGrid .select-all-items {
  display: inline-block;
  width: 18px; height: 18px;
  border: 1.5px solid var(--hx-navy-line);
  border-radius: 5px;
  background: var(--hx-surface);
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  transition: background-color .12s, border-color .12s;
}
.s-DataGrid .slick-row:hover .select-item { border-color: var(--hx-navy); }
.s-DataGrid .select-item.checked,
.s-DataGrid .select-all-items.checked {
  background: var(--hx-navy);
  border-color: var(--hx-navy);
}
.s-DataGrid .select-item.checked::after,
.s-DataGrid .select-all-items.checked::after {
  content: '';
  position: absolute;
  inset-inline-start: 5px;
  top: 2px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* some of the page is picked: a dash rather than a tick */
.s-DataGrid .select-all-items.hx-partial { background: var(--hx-surface); border-color: var(--hx-navy); }
.s-DataGrid .select-all-items.hx-partial::after {
  content: '';
  position: absolute;
  inset-inline-start: 3px;
  top: 7px;
  width: 10px; height: 2px;
  border: 0;
  border-radius: 2px;
  background: var(--hx-navy);
  transform: none;
}

/* the card view keeps its own tick, highlighted the same way */
.hx-emp-card.is-selected { border-color: var(--hx-navy); box-shadow: 0 0 0 2px var(--hx-navy-bg); }

/* the bar at phone width: the actions take their own line, full width */
@media (max-width: 720px) {
  .hx-bulk-acts { width: 100%; margin-inline-start: 0; }
  .hx-bulk-btn { flex: 1 1 auto; justify-content: center; }
  .hx-bulk-btn.is-icon { flex: 0 0 auto; }
}

/* group headings and dividers in the body-level row menu (the More menu) */
.hx-row-menu-head {
  padding: 8px 10px 4px;
  font: 800 10.5px var(--hx-font-ui);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--hx-muted);
}
.hx-row-menu-div { height: 1px; background: var(--hx-line-soft); margin: 6px 4px; }

/* =====================================================================
   Bulk edit drawer (EmployeeBulkEditDialog)

   Three blocks, in the order the decision is made: what to change, when
   and why, what will happen. Each field is a line that carries its own
   footer, because the count alone never says what the picked employees
   hold today.
   ===================================================================== */
.hx-be { display: flex; flex-direction: column; gap: 18px; }

/* who the run covers, in words, before anything else */
.hx-be-scope {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--hx-navy-bg); border: 1px solid var(--hx-navy-line);
  border-radius: var(--hx-radius-md); padding: 10px 13px;
}
.hx-be-scope-what { font: 700 13px var(--hx-font-ui); color: var(--hx-navy); }
.hx-be-scope-filter { font-size: 12.5px; color: var(--hx-ink-2); }

/* each stage is a card: a title, one sentence under it, and its own work
   inside, so nothing floats loose between two sections */
.hx-be-blk {
  border: 1px solid var(--hx-line); border-radius: var(--hx-radius-lg);
  background: var(--hx-surface); overflow: hidden;
}
.hx-be-blk-h {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px;
  padding: 11px 14px; background: var(--hx-surface-soft);
  border-bottom: 1px solid var(--hx-line);
}
.hx-be-blk-h b { font: 700 13.5px var(--hx-font-ui); color: var(--hx-navy); }
.hx-be-blk-h small {
  flex: 1 1 100%; font-size: 12px; line-height: 1.5; color: var(--hx-muted);
}
.hx-be-blk-b { display: flex; flex-direction: column; gap: 12px; padding: 14px; }

/* ---- one field line ---- */
.hx-be-lines { display: flex; flex-direction: column; gap: 9px; }
.hx-be-line { border: 1px solid var(--hx-line); border-radius: var(--hx-radius-md); overflow: hidden; }
.hx-be-line.is-wait { border-style: dashed; background: var(--hx-surface-soft); }
.hx-be-line.is-clearing { border-color: var(--hx-red); }
.hx-be-line-top {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 36px;
  gap: 10px; align-items: center; padding: 10px 12px;
}
.hx-be-line-lab {
  text-align: start; background: none; border: 0; padding: 0; cursor: pointer;
  font: 700 13.5px var(--hx-font-ui); color: var(--hx-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hx-be-line-lab:hover { color: var(--hx-navy); text-decoration: underline; text-underline-offset: 3px; }
/* before a field is picked the line is one control across the width */
.hx-be-line-pick { grid-column: 1 / span 2; }
.hx-be-line-val { min-width: 0; }
.hx-be-line-val.is-off { opacity: .4; pointer-events: none; }
.hx-be-line-top select,
.hx-be-line-top input,
.hx-be-line-top .select2-container { width: 100% !important; min-width: 0; }
.hx-be-line-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; border-top: 1px solid var(--hx-line-soft);
  background: var(--hx-surface-soft); font-size: 12.5px; color: var(--hx-ink-2);
}
.hx-be-line.is-wait .hx-be-line-foot { background: transparent; }
.hx-be-line-split b { font-variant-numeric: tabular-nums; color: var(--hx-ink); }
.hx-be-line-wait { color: var(--hx-orange-deep); }
.hx-be-line-clear {
  margin-inline-start: auto; background: none; border: 0; padding: 0; cursor: pointer;
  font: 600 12.5px var(--hx-font-ui); color: var(--hx-navy);
  text-decoration: underline; text-underline-offset: 3px;
}
.hx-be-line-clear.is-danger { color: var(--hx-red); }
/* what they hold now, as a bar: changing, already set, blocked */
.hx-be-bar {
  display: flex; height: 7px; border-radius: 999px; overflow: hidden;
  background: var(--hx-line); min-width: 110px; flex: 1 1 120px; max-width: 200px;
}
.hx-be-bar i { display: block; height: 100%; }
.hx-be-bar i.is-change { background: var(--hx-navy); }
.hx-be-bar i.is-same { background: var(--hx-green); }
.hx-be-bar i.is-block { background: var(--hx-orange); }

.hx-be-del {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--hx-line); border-radius: var(--hx-radius-sm);
  background: var(--hx-surface); color: var(--hx-muted); cursor: pointer;
}
.hx-be-del:hover { background: var(--hx-red-bg); border-color: var(--hx-red); color: var(--hx-red); }
.hx-be-del .icon { width: 15px; height: 15px; }
.hx-be-add {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: none; border: 1px dashed var(--hx-navy-line);
  border-radius: var(--hx-radius-sm); padding: 8px 12px;
  font: 700 13px var(--hx-font-ui); color: var(--hx-navy);
}
.hx-be-add:hover { background: var(--hx-navy-bg); }
.hx-be-add .icon { width: 16px; height: 16px; }
.hx-be-add[disabled] { color: var(--hx-muted); border-color: var(--hx-line); cursor: not-allowed; }

/* ---- when and why ---- */
.hx-be-when { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.hx-be-fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hx-be-fld > span { font: 700 12px var(--hx-font-ui); color: var(--hx-muted); }
.hx-be-fld small { font-size: 11.5px; color: var(--hx-muted); line-height: 1.45; }
.hx-be-fld > input,
.hx-be-fld .select2-container { width: 100% !important; min-width: 0; }
/* the date editor is an input plus its calendar button: one row, not two */
.hx-be-fld-in { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hx-be-fld-in input { flex: 1 1 auto; width: auto !important; min-width: 0; }
.hx-be-fld-in .ui-datepicker-trigger,
.hx-be-fld-in img { flex: none; margin: 0; }
/* one quiet line, not a panel: the long explanation is the label's tooltip.
   It sits under the fields it governs, behind a hairline of its own. */
.hx-be-opt {
  display: flex; gap: 9px; align-items: center;
  font-size: 13px; color: var(--hx-ink-2); cursor: pointer;
  border-top: 1px solid var(--hx-line-soft); padding-top: 12px; margin-top: 2px;
}
.hx-be-opt input { margin: 0; width: 16px; height: 16px; flex: none; }

/* ---- what will happen ---- */
.hx-be-export {
  margin-inline-start: auto; background: none; border: 0; padding: 0; cursor: pointer;
  font: 700 12.5px var(--hx-font-ui); color: var(--hx-navy);
  text-decoration: underline; text-underline-offset: 3px;
}
/* already inside a card: a second border around the list reads as a box in a box */
.hx-be-pf { display: flex; flex-direction: column; }
.hx-be-pf-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; font-size: 13px; border-bottom: 1px solid var(--hx-line-soft); }
.hx-be-pf-row:last-child { border-bottom: 0; }
.hx-be-pf-row b { min-width: 34px; text-align: end; font-size: 14px; font-variant-numeric: tabular-nums; }
.hx-be-pf-row span { color: var(--hx-ink-2); }
.hx-be-pf-row.is-ok b { color: var(--hx-green-deep); }
.hx-be-pf-row.is-skip b { color: var(--hx-muted); }
.hx-be-pf-row.is-block b { color: var(--hx-orange-deep); }
.hx-be-pf-row .hx-be-pf-names { margin-inline-start: auto; font: 700 12px var(--hx-font-ui); color: var(--hx-navy); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.hx-be-key { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--hx-muted); padding: 0 2px; }
.hx-be-key span { display: inline-flex; align-items: center; gap: 5px; }
.hx-be-key em { font-style: normal; }
.hx-be-key i { width: 8px; height: 8px; border-radius: 2px; display: block; }
.hx-be-key i.is-ok { background: var(--hx-navy); }
.hx-be-key i.is-skip { background: var(--hx-green); }
.hx-be-key i.is-block { background: var(--hx-orange); }
/* a note, not a banner: one line of amber text behind a rule */
.hx-be-warn {
  font-size: 12.5px; line-height: 1.55;
  color: var(--hx-orange-deep);
  border-inline-start: 3px solid var(--hx-orange);
  padding: 2px 0 2px 10px;
  padding-inline-start: 10px;
}
.hx-be-err { display: none; margin: 0; font-size: 12.5px; color: var(--hx-red); }
.hx-be-err.is-on { display: block; }

/* a run that only empties fields is a deletion, and the button says so */
.hx-be-apply.is-danger,
.hx-be-apply.is-danger:hover {
  background: var(--hx-red) !important;
  border-color: var(--hx-red) !important;
  color: #fff !important;
}

/* the confirmation: the same decision, with an emptied field in red */
.hx-ask-lines { margin: 10px 0 0; padding-inline-start: 18px; font-size: 13px; }
.hx-ask-lines li { margin-bottom: 3px; }
.hx-ask-lines li.is-danger { color: var(--hx-red); }
.hx-ask-lines span { color: var(--hx-muted); }
.hx-ask-note { margin: 10px 0 0; font-size: 12.5px; color: var(--hx-muted); }

/* the run result: counts, then the reasons, then undo */
.hx-bulk-result { display: flex; flex-direction: column; gap: 12px; }
.hx-bulk-result-list { border: 1px solid var(--hx-line); border-radius: var(--hx-radius-md); overflow: hidden; }
.hx-bulk-result-item { display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--hx-line-soft); }
.hx-bulk-result-item:last-child { border-bottom: 0; }
.hx-bulk-result-item b { min-width: 30px; text-align: end; font-variant-numeric: tabular-nums; }
.hx-bulk-result-item span { color: var(--hx-ink-2); }
.hx-bulk-result-item ul { margin: 4px 0 0; padding-inline-start: 18px; color: var(--hx-muted); font-size: 12.5px; }

/* What a clean run leaves behind: a quiet strip where the bar was, with Undo
   on it for ten minutes (Serenity's toasts close after about five seconds,
   which is no time at all to decide to put three hundred rows back). */
.hx-bulk-done {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--hx-green-bg);
  color: var(--hx-green-deep);
  border-bottom: 1px solid var(--hx-line-soft);
  font: 600 13px var(--hx-font-ui);
  animation: hx-bulk-in .18s ease;
}
.hx-bulk-done-mark {
  flex: none; width: 24px; height: 24px; border-radius: 7px;
  background: var(--hx-green-deep); color: #fff; display: grid; place-items: center;
}
.hx-bulk-done-mark .icon { width: 14px; height: 14px; }
.hx-bulk-done-text { color: var(--hx-ink); font-weight: 700; }
.hx-bulk-done-acts { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.hx-bulk-done-undo {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px;
  border: 1px solid var(--hx-green-deep); border-radius: var(--hx-radius-sm);
  background: var(--hx-surface); color: var(--hx-green-deep);
  font: 700 12.5px var(--hx-font-ui); cursor: pointer;
}
.hx-bulk-done-undo:hover { background: var(--hx-green-deep); color: #fff; }
.hx-bulk-done-undo .icon { width: 15px; height: 15px; }
.hx-bulk-done-x {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--hx-muted); cursor: pointer;
}
.hx-bulk-done-x:hover { background: rgba(21, 150, 87, .12); color: var(--hx-green-deep); }
.hx-bulk-done-x .icon { width: 14px; height: 14px; }


/* ===== Attendance Calculation: tinted OT/lateness columns, readable explanation, pro day-status rows ===== */
/* Overtime columns -> soft blue; lateness/deduction columns -> soft red (win over the row status colour) */
.slick-cell.ai-ot-cell  { background-color:#eaf2fc !important; box-shadow: inset 2px 0 0 rgba(31,78,134,.28); }
.slick-cell.ai-del-cell { background-color:#fdeef1 !important; box-shadow: inset 2px 0 0 rgba(178,59,78,.28); }
/* The tint overrides the old green/black HasOvertimeValue/HasPenaltyValue background, which paired with white text -> white on light. Force dark, readable figures (blue for OT, red for deduction) and drop the shadow. */
.slick-cell.ai-ot-cell, .slick-cell.ai-ot-cell * { color:#1b3b68 !important; font-weight:700 !important; text-shadow:none !important; }
.slick-cell.ai-del-cell, .slick-cell.ai-del-cell * { color:#b23b4e !important; font-weight:700 !important; text-shadow:none !important; }
.slick-header-columns .slick-header-column.ai-ot-cell  { background:#e3eefb; }
.slick-header-columns .slick-header-column.ai-del-cell { background:#fce7ea; }
/* the band-by-band proof column: wrap, readable, quiet */
.slick-cell.ai-explain-cell { white-space:normal !important; line-height:1.55; font-size:12px; color:#334155; padding:6px 10px; }
.slick-cell.ai-explain-cell:empty::after { content:"-"; color:#c3cad6; }

/* Full-row day-status backgrounds removed per request: the status colour is now on the
   status cell only (see the .slick-row.ds-* .slick-cell.col-unit-price rules below). */
/* keep the status tint on hover but a touch stronger, and a crisp selected state.
   PERFORMANCE: the active/selected-cell tint uses a cheap 1px inset ring, not a huge-spread
   `inset 0 0 0 9999px` shadow (that spread repaints expensively while scrolling). */
.grid-container .slick-row.active .slick-cell { filter:brightness(.985); }
.grid-container .slick-row.slick-row-selected .slick-cell { box-shadow: inset 0 0 0 1px rgba(31,78,134,.18); }

/* ===== AI check button + verdict popup, month navigation (Calculation grid) ===== */
.month-nav-button.prev-month > .button-outer, .month-nav-button.next-month > .button-outer { font-weight:700; }
.ai-verdict { text-align:start; min-width:320px; max-width:440px; font-size:14px; }
.ai-verdict .ai-verdict-head { font-size:17px; font-weight:800; padding:4px 0 10px; display:flex; align-items:center; gap:8px; }
.ai-verdict .ai-mark { display:inline-flex; width:28px; height:28px; border-radius:50%; align-items:center; justify-content:center; color:#fff; font-size:15px; }
.ai-verdict.ok .ai-verdict-head { color:#0f7a4d; } .ai-verdict.ok .ai-mark { background:#1f9d57; }
.ai-verdict.bad .ai-verdict-head { color:#b23b4e; } .ai-verdict.bad .ai-mark { background:#c0394b; }
.ai-verdict .ai-verdict-row { padding:3px 0; color:#334155; border-bottom:1px dashed #e3e9f2; }
.ai-verdict .ai-verdict-body { margin-top:10px; background:#f5f7fb; border-radius:8px; padding:10px 12px; line-height:1.7; color:#1b2435; }

/* ===== Professional per-day-status row colours (one distinct colour each) ===== */
/* status colour on the STATUS CELL only (not the whole row), per request */
.slick-row.ds-absence   .slick-cell.col-unit-price { background:#fbe3e3 !important; box-shadow: inset 3px 0 0 0 #d9534f; }
.slick-row.ds-weekend   .slick-cell.col-unit-price { background:#e8edf4 !important; box-shadow: inset 3px 0 0 0 #8795a8; }
.slick-row.ds-holiday   .slick-cell.col-unit-price { background:#fdeec2 !important; box-shadow: inset 3px 0 0 0 #e0a92b; }
.slick-row.ds-leave     .slick-cell.col-unit-price { background:#dff3e6 !important; box-shadow: inset 3px 0 0 0 #3fa96a; }
.slick-row.ds-mission   .slick-cell.col-unit-price { background:#e7e0f7 !important; box-shadow: inset 3px 0 0 0 #6a3fa0; }
.slick-row.ds-trip      .slick-cell.col-unit-price { background:#daf0f3 !important; box-shadow: inset 3px 0 0 0 #2f9aa8; }
.slick-row.ds-attention .slick-cell.col-unit-price { background:#fde3cf !important; box-shadow: inset 3px 0 0 0 #e0772f; }
.slick-row.ds-wfh       .slick-cell.col-unit-price { background:#dcebff !important; box-shadow: inset 3px 0 0 0 #2f74e0; }

/* Weekend and Holiday are non-working days: the whole row is shown muted, like a
   disabled row, while the status cell above keeps its own colour and accent bar
   (its .col-unit-price rule has higher specificity, so it is not dimmed). Every
   other status is tinted on the status cell only, never the whole row. */
.slick-row.ds-weekend   .slick-cell,
.slick-row.ds-holiday   .slick-cell { background:#f1f3f6 !important; color:#97a0ad !important; }
.slick-row.ds-weekend   .slick-cell a,
.slick-row.ds-holiday   .slick-cell a { color:#97a0ad !important; }

/* ===== Row selection: a whole-row click selects the row (checkbox stays in sync) ===== */
/* clickable affordance on data rows; inline editors keep their own text cursor */
.s-DataGrid .grid-container .slick-row .slick-cell { cursor: pointer; }
.s-DataGrid .grid-container .slick-row .slick-cell input,
.s-DataGrid .grid-container .slick-row .slick-cell textarea,
.s-DataGrid .grid-container .slick-row .slick-cell select { cursor: text; }
/* the selected row: a solid navy-tinted fill (the app's picked-row colour) plus a navy bar
   on the status cell. This grid freezes its first columns (frozenColumn = 5), so each row is
   TWO .slick-row elements (left + right pane); .hx-rowsel is stamped on the row in BOTH panes
   by getItemCssClass, so the fill spans the whole row.
   PERFORMANCE: the fill is a plain background-color, NOT an `inset 0 0 0 9999px` box-shadow.
   A huge-spread inset shadow repainted on every selected row as it scrolls into view froze
   vertical scrolling once a few rows were selected. A solid background paints for free. */
.slick-row.hx-rowsel .slick-cell {
  background: #E4EDFB !important;
}
/* weekend / holiday keep a muted fill, still reading as selected (status cell keeps its tint) */
.slick-row.hx-rowsel.ds-weekend .slick-cell:not(.col-unit-price),
.slick-row.hx-rowsel.ds-holiday .slick-cell:not(.col-unit-price) { background: #dde6f2 !important; }
.slick-row.hx-rowsel .slick-cell.col-unit-price {
  box-shadow: inset 3px 0 0 0 #1b3b68 !important;
}
body.rtl .slick-row.hx-rowsel .slick-cell.col-unit-price {
  box-shadow: inset -3px 0 0 0 #1b3b68 !important;
}

/* ===== new design, stage 1: sharper status label + modern selection checkboxes ===== */
.s-DataGrid .slick-cell.col-unit-price { font-weight:700 !important; }
/* modern checkbox: custom square, navy fill, animated tick (row selection + exempt) */
.s-DataGrid .slick-cell input[type="checkbox"],
.s-DataGrid .slick-header-column input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; width:17px; height:17px; flex:none;
  border:1.5px solid var(--hx-line,#d4d8df); border-radius:5px; background:#fff;
  cursor:pointer; position:relative; margin:0; vertical-align:middle;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.s-DataGrid .slick-cell input[type="checkbox"]:hover,
.s-DataGrid .slick-header-column input[type="checkbox"]:hover{ border-color:var(--hx-navy,#1b3b68); }
.s-DataGrid .slick-cell input[type="checkbox"]:focus-visible,
.s-DataGrid .slick-header-column input[type="checkbox"]:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(27,59,104,.18); }
.s-DataGrid .slick-cell input[type="checkbox"]:checked,
.s-DataGrid .slick-header-column input[type="checkbox"]:checked{ background:var(--hx-navy,#1b3b68); border-color:var(--hx-navy,#1b3b68); }
.s-DataGrid .slick-cell input[type="checkbox"]:checked::after,
.s-DataGrid .slick-header-column input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:5px; top:1.5px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(43deg);
}
.s-DataGrid .slick-header-column input[type="checkbox"]:indeterminate{ background:var(--hx-navy,#1b3b68); border-color:var(--hx-navy,#1b3b68); }
.s-DataGrid .slick-header-column input[type="checkbox"]:indeterminate::after{
  content:""; position:absolute; left:3px; top:7px; width:9px; height:0; border-top:2px solid #fff;
}

/* ===== new design, stage 3: Needs-review + Stats toggle buttons, and the stat summary strip ===== */
.s-DataGrid .s-Toolbar .tool-button.needs-review-button,
.s-DataGrid .s-Toolbar .tool-button.stats-toggle-button{
  height:40px !important; min-height:40px !important;
  border:1px solid var(--hx-line) !important; border-radius:11px !important;
  background:var(--hx-surface) !important; box-shadow:none !important;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.s-DataGrid .s-Toolbar .tool-button.needs-review-button .button-inner,
.s-DataGrid .s-Toolbar .tool-button.stats-toggle-button .button-inner{
  padding:0 14px !important; background-image:none !important; font-weight:600 !important;
  color:var(--hx-ink) !important; display:flex !important; align-items:center !important; gap:7px !important;
}
.s-DataGrid .s-Toolbar .tool-button.stats-toggle-button .button-inner{ padding:0 12px !important; }
.s-DataGrid .s-Toolbar .tool-button.needs-review-button:hover,
.s-DataGrid .s-Toolbar .tool-button.stats-toggle-button:hover{ border-color:var(--hx-navy) !important; }
/* toggled on = navy filled */
.s-DataGrid .s-Toolbar .tool-button.needs-review-button.active,
.s-DataGrid .s-Toolbar .tool-button.stats-toggle-button.active{
  background:var(--hx-navy) !important; border-color:var(--hx-navy) !important;
}
.s-DataGrid .s-Toolbar .tool-button.needs-review-button.active .button-inner,
.s-DataGrid .s-Toolbar .tool-button.stats-toggle-button.active .button-inner{ color:#fff !important; }

/* stat summary strip (hidden by default; toggled by the Stats button) */
.s-DataGrid .hx-calc-summary{
  display:flex; flex-wrap:wrap; gap:0; margin:0 0 12px; overflow:hidden;
  background:var(--hx-surface); border:1px solid var(--hx-line); border-radius:12px;
}
.s-DataGrid .hx-calc-summary .hx-sum-cell{
  flex:1 1 0; min-width:140px; padding:13px 18px;
  border-inline-start:1px solid var(--hx-line);
}
.s-DataGrid .hx-calc-summary .hx-sum-cell:first-child{ border-inline-start:0; }
.s-DataGrid .hx-calc-summary .hx-sum-k{
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--hx-muted);
}
.s-DataGrid .hx-calc-summary .hx-sum-v{
  font-size:22px; font-weight:700; margin-top:5px; color:var(--hx-navy); font-variant-numeric:tabular-nums;
}
@media (max-width:760px){ .s-DataGrid .hx-calc-summary .hx-sum-cell{ flex-basis:50%; } }

/* ============ new-design polish: SVG icons, status glyph, tabular figures, dark mode ============ */
/* inline-action icons are SVG now: let clicks fall through to the anchor; navy / muted strokes */
.inline-action svg, .inline-action svg *{ pointer-events:none; }
.inline-action.view-details{ color:var(--hx-navy); }
.inline-action.view-details:hover{ color:var(--hx-navy-2); }
.inline-action.delete-row{ color:var(--hx-muted,#5b6678); }
.inline-action.delete-row:hover{ color:#c0394b; }
/* toolbar icons rendered via mask so they take the button text colour (navy or white) */
.hx-ico-dollar, .hx-ico-chart{ display:inline-block; width:15px; height:15px; vertical-align:-2px; background-color:currentColor;
  -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat; }
.hx-ico-dollar{ -webkit-mask-image:var(--u); mask-image:var(--u);
  --u:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M8 2.6v10.8M10.3 4.8C9.8 4 8.9 3.6 8 3.6c-1.6 0-2.8.9-2.8 2.1s1.2 1.9 2.8 2.2 2.8.9 2.8 2.1-1.2 2.1-2.8 2.1c-.9 0-1.9-.5-2.4-1.3' stroke-linecap='round'/%3E%3C/svg%3E"); }
.hx-ico-chart{ -webkit-mask-image:var(--u); mask-image:var(--u);
  --u:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M2.5 13.5h11M4.8 13.5V8.5M8 13.5V4.5M11.2 13.5V6.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* deduction figure: colour comes from .ai-del-cell, weight only here */
.hx-ded-figure{ font-weight:700; }
/* status glyph beside the day-status label */
.slick-cell .ds-wrap{ display:inline-flex; align-items:center; gap:6px; }
.ds-glyph{ width:14px; height:14px; flex:none; }
/* tabular figures so columns align digit-by-digit */
.s-DataGrid .slick-cell{ font-variant-numeric:tabular-nums; }

/* OS-dark auto-theming removed on purpose: the base hrklix-theme has no dark palette, so reacting to
   prefers-color-scheme left the base cell/header text light on these dark tints (dark-on-dark, unreadable).
   Dark now applies ONLY through the explicit :root[data-theme="dark"] rules below, for when a full dark
   palette ships. This keeps the grid consistently readable in every OS setting. */
/* ---- dark mode, explicit toggle ---- */
:root[data-theme="dark"] .slick-cell.ai-ot-cell{ background-color:#16213a !important; }
:root[data-theme="dark"] .slick-cell.ai-del-cell{ background-color:#2c161b !important; }
:root[data-theme="dark"] .slick-cell.ai-ot-cell, :root[data-theme="dark"] .slick-cell.ai-ot-cell *{ color:#8fb0e6 !important; }
:root[data-theme="dark"] .slick-cell.ai-del-cell, :root[data-theme="dark"] .slick-cell.ai-del-cell *{ color:#ef8597 !important; }
:root[data-theme="dark"] .slick-header-column.ai-ot-cell{ background:#1a2740 !important; }
:root[data-theme="dark"] .slick-header-column.ai-del-cell{ background:#2a1620 !important; }
:root[data-theme="dark"] .slick-cell.ai-explain-cell{ color:#c6cedd !important; }
:root[data-theme="dark"] .slick-cell.col-unit-price{ color:#e7ecf5 !important; }
/* Weekend / Holiday disabled row (dark); the status cell keeps its own tint below. */
:root[data-theme="dark"] .slick-row.ds-weekend .slick-cell,
:root[data-theme="dark"] .slick-row.ds-holiday .slick-cell { background:#1b1f26 !important; color:#5f6775 !important; }
:root[data-theme="dark"] .slick-row.ds-weekend .slick-cell a,
:root[data-theme="dark"] .slick-row.ds-holiday .slick-cell a { color:#5f6775 !important; }
:root[data-theme="dark"] .slick-row.ds-absence   .slick-cell.col-unit-price{ background:#3a2024 !important; }
:root[data-theme="dark"] .slick-row.ds-weekend   .slick-cell.col-unit-price{ background:#20262f !important; }
:root[data-theme="dark"] .slick-row.ds-holiday   .slick-cell.col-unit-price{ background:#332a15 !important; }
:root[data-theme="dark"] .slick-row.ds-leave     .slick-cell.col-unit-price{ background:#16291e !important; }
:root[data-theme="dark"] .slick-row.ds-mission   .slick-cell.col-unit-price{ background:#241d33 !important; }
:root[data-theme="dark"] .slick-row.ds-trip      .slick-cell.col-unit-price{ background:#142a2e !important; }
:root[data-theme="dark"] .slick-row.ds-attention .slick-cell.col-unit-price{ background:#33231a !important; }
:root[data-theme="dark"] .slick-row.ds-wfh       .slick-cell.col-unit-price{ background:#152538 !important; }
/* selected row wash (dark) - driven by .hx-rowsel so it spans both frozen panes (see the
   light-mode note above); a dark navy fill replaces the light picked-row fill in dark */
:root[data-theme="dark"] .slick-row.hx-rowsel .slick-cell{ background:#1d2a44 !important; }
:root[data-theme="dark"] .slick-row.hx-rowsel.ds-weekend .slick-cell:not(.col-unit-price),
:root[data-theme="dark"] .slick-row.hx-rowsel.ds-holiday .slick-cell:not(.col-unit-price){ background:#243350 !important; }
:root[data-theme="dark"] .slick-row.hx-rowsel .slick-cell.col-unit-price{ box-shadow: inset 3px 0 0 0 #5b86d6 !important; }
:root[data-theme="dark"] body.rtl .slick-row.hx-rowsel .slick-cell.col-unit-price{ box-shadow: inset -3px 0 0 0 #5b86d6 !important; }
:root[data-theme="dark"] .ai-verdict .ai-verdict-row{ color:#c6cedd; border-bottom-color:#2a3342; }
:root[data-theme="dark"] .ai-verdict .ai-verdict-body{ background:#161d29; color:#e7ecf5; }

/* Sort indicator: Serenity's default asc/desc triangle is dark red (#640202); recolour it to navy to match
   the HRKLIX palette (it was the only off-palette red glyph at the top of the grid, under the title). */
.s-DataGrid .slick-sort-indicator-asc { border-bottom-color: var(--hx-navy, #142F68) !important; }
.s-DataGrid .slick-sort-indicator-desc { border-top-color: var(--hx-navy, #142F68) !important; }

/* RTL: box-shadow insets have no logical form, so flip the status and OT/deduction accent bars to the
   inline-start (right) edge when the app is in Arabic (body.rtl). */
body.rtl .slick-row.ds-absence   .slick-cell.col-unit-price { box-shadow: inset -3px 0 0 0 #d9534f; }
body.rtl .slick-row.ds-weekend   .slick-cell.col-unit-price { box-shadow: inset -3px 0 0 0 #8795a8; }
body.rtl .slick-row.ds-holiday   .slick-cell.col-unit-price { box-shadow: inset -3px 0 0 0 #e0a92b; }
body.rtl .slick-row.ds-leave     .slick-cell.col-unit-price { box-shadow: inset -3px 0 0 0 #3fa96a; }
body.rtl .slick-row.ds-mission   .slick-cell.col-unit-price { box-shadow: inset -3px 0 0 0 #6a3fa0; }
body.rtl .slick-row.ds-trip      .slick-cell.col-unit-price { box-shadow: inset -3px 0 0 0 #2f9aa8; }
body.rtl .slick-row.ds-attention .slick-cell.col-unit-price { box-shadow: inset -3px 0 0 0 #e0772f; }
body.rtl .slick-row.ds-wfh       .slick-cell.col-unit-price { box-shadow: inset -3px 0 0 0 #2f74e0; }
body.rtl .slick-cell.ai-ot-cell  { box-shadow: inset -2px 0 0 rgba(31,78,134,.28); }
body.rtl .slick-cell.ai-del-cell { box-shadow: inset -2px 0 0 rgba(178,59,78,.28); }

/* =====================================================================
   Attendance > Calculate, "Delay rule" column (.delay-rule-cell)
   Compact single-line rendering: a colour-coded occurrence token, the
   rule name (truncated, with a "+N" chip when a day matched several
   rules), then the band with the day-rule as a quiet leading chip. One
   line only, so the row never grows tall; the full list, band and
   occurrence sit in the cell's title tooltip. Loaded after site.css, so
   these win over the older .delay-rule rules there. Display only.
   ===================================================================== */
.delay-rule-cell .delay-rule {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
}
/* occurrence stays colour-only text (no pill) to match the de-piled decision */
.delay-rule-cell .delay-occurrence {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
}
.delay-rule-cell .delay-first  { color: #1e7e34; }
.delay-rule-cell .delay-second { color: #8a6d00; }
.delay-rule-cell .delay-third  { color: #b35900; }
.delay-rule-cell .delay-fourth { color: #b71c1c; }

/* the rule name takes the remaining width and truncates with an ellipsis */
.delay-rule-cell .delay-names {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  overflow: hidden;
}
.delay-rule-cell .delay-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--hx-ink, #101A33);
}
/* "+N" when the day matched more than one rule: a very subtle navy chip */
.delay-rule-cell .delay-more {
  flex: 0 0 auto;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--hx-navy-bg, #EBF0F8);
  color: var(--hx-navy, #142F68);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  cursor: default;
}
/* band: minutes, muted; the day-rule name (if any) as a quiet leading chip */
.delay-rule-cell .delay-band {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 11.5px;
  color: var(--hx-muted, #5F6B85);
  white-space: nowrap;
}
.delay-rule-cell .delay-dayrule {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--hx-surface-soft, #F8FAFD);
  border: 1px solid var(--hx-line, #E4E9F2);
  color: var(--hx-ink-2, #3E4A66);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 16px;
}
:root[data-theme="dark"] .delay-rule-cell .delay-name    { color: #e7ecf5; }
:root[data-theme="dark"] .delay-rule-cell .delay-band    { color: #9aa7bd; }
:root[data-theme="dark"] .delay-rule-cell .delay-more    { background: #1f2c45; color: #8fb0e6; }
:root[data-theme="dark"] .delay-rule-cell .delay-dayrule { background: #161d29; border-color: #2a3342; color: #c6cedd; }
:root[data-theme="dark"] .delay-rule-cell .delay-first   { color: #5fcf87; }
:root[data-theme="dark"] .delay-rule-cell .delay-second  { color: #e0c158; }
:root[data-theme="dark"] .delay-rule-cell .delay-third   { color: #e8a060; }
:root[data-theme="dark"] .delay-rule-cell .delay-fourth  { color: #ef8597; }
body.rtl .delay-rule-cell .delay-name { text-align: right; }

/* ============================================================================
   Punch-log popup (.hx-punchlog) - employee day punch timeline card.
   Body of a Q.information() jQuery-UI dialog (.s-InformationDialog). Everything
   is scoped under .hx-punchlog, and the host-chrome tweaks under
   .s-InformationDialog:has(.hx-punchlog), so nothing leaks into the rest of the
   app. Works in light, :root[data-theme="dark"], and body.rtl (logical props).
   ============================================================================ */
.hx-punchlog {
  --navy: #16325c;   --navy2: #22508a;
  --in: #0f8a5f;     --in-bg: #e4f6ee;
  --out: #b23b4e;    --out-bg: #fbe6ea;
  --machine: #1f5a86;--machine-bg: #e2eef8;
  --card-bg: #ffffff;
  --card-line: #e4e9f1;
  --txt: #1b2a44;
  --muted: #7c8aa3;
  --stat-bg: #f4f7fb;
  font-family: inherit;
  direction: inherit;
  color: var(--txt);
}
.hx-punchlog * { box-sizing: border-box; }
.hx-pl-card {
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(16, 33, 71, .18);
}
.hx-pl-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(135deg, var(--navy), var(--navy2));
  color: #fff;
}
.hx-pl-avatar {
  flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; letter-spacing: .5px;
  background: rgba(255, 255, 255, .16); color: #fff;
}
.hx-pl-id { min-width: 0; }
.hx-pl-name {
  font-size: 17px; font-weight: 700; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hx-pl-date { font-size: 13px; opacity: .85; margin-top: 2px; }
.hx-pl-body { padding: 16px 18px 18px; background: var(--card-bg); }
.hx-pl-sec-t {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px; margin-bottom: 10px;
}
.hx-pl-sec-t .hx-pl-count {
  margin-inline-start: auto;
  font-weight: 700; text-transform: none; letter-spacing: 0;
}
.hx-pl-ic {
  width: 15px; height: 15px; flex: 0 0 auto;
  display: inline-block; vertical-align: middle;
}
.hx-pl-pill .hx-pl-ic, .hx-pl-badge .hx-pl-ic { width: 13px; height: 13px; }
.hx-pl-timeline { max-height: 320px; overflow-y: auto; }
.hx-pl-row {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  align-items: center; gap: 10px; padding: 10px 0;
}
.hx-pl-row + .hx-pl-row { border-top: 1px solid var(--card-line); }
.hx-pl-time {
  font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.hx-pl-pill {
  display: inline-flex; align-items: center; gap: 5px; justify-self: start;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1;
}
.hx-pl-pill.is-in  { color: var(--in);  background: var(--in-bg); }
.hx-pl-pill.is-out { color: var(--out); background: var(--out-bg); }
.hx-pl-badge {
  display: inline-flex; align-items: center; gap: 5px; justify-self: end;
  max-width: 180px; padding: 4px 10px; border-radius: 10px;
  font-size: 12px; font-weight: 600;
  color: var(--machine); background: var(--machine-bg);
}
.hx-pl-badge span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-pl-empty {
  padding: 22px 10px; text-align: center;
  color: var(--muted); font-size: 13px; font-weight: 600;
}
.hx-pl-sum {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px;
}
.hx-pl-stat {
  background: var(--stat-bg); border: 1px solid var(--card-line);
  border-radius: 12px; padding: 10px 8px; text-align: center;
}
.hx-pl-stat-l { display: block; font-size: 11px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.hx-pl-stat-v {
  display: block; font-size: 16px; font-weight: 800; color: var(--txt);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.s-InformationDialog:has(.hx-punchlog) {
  padding: 0; border: 1px solid #e4e9f1; background: #fff;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(16, 33, 71, .18);
}
.s-InformationDialog:has(.hx-punchlog) .ui-dialog-titlebar { display: none; }
.s-InformationDialog:has(.hx-punchlog) .ui-dialog-content {
  padding: 0; overflow: visible; background: transparent;
}
.s-InformationDialog:has(.hx-punchlog) .ui-dialog-content .message { margin: 0; }
.s-InformationDialog:has(.hx-punchlog) .hx-pl-card {
  border: 0; border-radius: 0; box-shadow: none;
}
.s-InformationDialog:has(.hx-punchlog) .ui-dialog-buttonpane {
  margin: 0; padding: 12px 18px 16px;
  background: #fff; border-top: 1px solid #e4e9f1;
}
.s-InformationDialog:has(.hx-punchlog) .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: none; text-align: center;
}
.s-InformationDialog:has(.hx-punchlog) .ui-dialog-buttonpane button {
  min-width: 120px; padding: 8px 20px;
  border: 0; border-radius: 10px;
  background: linear-gradient(135deg, #16325c, #22508a);
  color: #fff; font-weight: 700; font-size: 14px; cursor: pointer;
}
.s-InformationDialog:has(.hx-punchlog) .ui-dialog-buttonpane button:hover { filter: brightness(1.08); }
:root[data-theme="dark"] .hx-punchlog {
  --in: #5fd3a4;     --in-bg: rgba(15, 138, 95, .18);
  --out: #ef8597;    --out-bg: rgba(178, 59, 78, .22);
  --machine: #8fb8e0;--machine-bg: rgba(31, 90, 134, .25);
  --card-bg: #121926;
  --card-line: #273349;
  --txt: #e7ecf5;
  --muted: #8a97ad;
  --stat-bg: #1a2233;
}
:root[data-theme="dark"] .s-InformationDialog:has(.hx-punchlog) {
  background: #121926; border-color: #273349;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
:root[data-theme="dark"] .s-InformationDialog:has(.hx-punchlog) .ui-dialog-buttonpane {
  background: #121926; border-top-color: #273349;
}
body.rtl .hx-punchlog { direction: rtl; }
body.rtl .hx-pl-avatar { direction: ltr; }

/* =====================================================================
   10. Attendance Calculation - auto-fitted (tightened) columns
   The grid auto-sizes every column to its content once, after the first
   load (AttendanceCaluculationGrid.autoSizeColumns). These rules make the
   inline editors fit the now-narrow cells instead of the browser's default
   ~170px text-input width, so a tighter column still shows the whole value.
   Scoped to .hx-attcalc-grid (added in the grid constructor) so no other
   grid is affected. Display only - no payroll value is touched.
   ===================================================================== */
.s-DataGrid.hx-attcalc-grid .slick-cell > input.edit[type="text"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding-left: 4px;
  padding-right: 4px;
}
/* ShiftStart / ShiftEnd carry an inline max-width:72px; keep them capped but fluid */
.s-DataGrid.hx-attcalc-grid .slick-cell > input.edit[style*="max-width"] { width: 100%; }
/* wrap the header labels onto two lines instead of truncating, so the full name shows
   while the column stays narrow (auto-fit sizes to the longest word, not the whole label). */
.s-DataGrid.hx-attcalc-grid .slick-header-columns,
.s-DataGrid.hx-attcalc-grid .slick-header-column { height: 46px !important; }
.s-DataGrid.hx-attcalc-grid .slick-header-column .slick-column-name {
  white-space: normal !important;
  line-height: 1.18;
  word-break: break-word;
  display: block;
  overflow: hidden;
  max-height: 2.4em;
}
/* the inline editors make rows taller than one line, so the row-select checkbox and the
   leading action icons would sit at the top of the cell; center them vertically. Keyed off
   the hx-cell-center column class (added in getColumns), NOT :has(> .select-item): a :has()
   on every select / action cell is re-evaluated for each row the grid recycles on scroll. */
.s-DataGrid.hx-attcalc-grid .slick-cell.hx-cell-center {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
/* keep the checkbox a fixed square inside the flex cell (never let flex stretch it) */
.s-DataGrid.hx-attcalc-grid .slick-cell.hx-cell-center > .select-item { flex: 0 0 auto; }

/* The three leading controls (view-details, delete, row-select) read as one set: the same
   16px glyph box, each centred in a 32px column (select width set to 32 in getColumns). The
   checkbox was 18px and the two icons 15px, which looked mismatched and out of line. */
.s-DataGrid.hx-attcalc-grid .inline-action.view-details .hx-ico,
.s-DataGrid.hx-attcalc-grid .inline-action.delete-row .hx-ico {
  width: 16px !important; height: 16px !important;
}
.s-DataGrid.hx-attcalc-grid .select-item,
.s-DataGrid.hx-attcalc-grid .select-all-items {
  width: 16px; height: 16px; border-radius: 4px;
}
.s-DataGrid.hx-attcalc-grid .select-item.checked::after,
.s-DataGrid.hx-attcalc-grid .select-all-items.checked::after {
  inset-inline-start: 4.5px; top: 2px; width: 4px; height: 8px;
}

/* =====================================================================
   11. Attendance Calculation - mockup toolbar (THIS GRID ONLY)
   Scoped to .s-BasicSamples-ConditionalFormattingGrid. Light + dark + RTL.
   ===================================================================== */
.s-BasicSamples-ConditionalFormattingGrid .hx-grid-eyebrow {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--hx-navy); margin-bottom: 3px; line-height: 1.2;
}

/* --- date stepper --- */
.s-BasicSamples-ConditionalFormattingGrid .hx-month-stepper {
  display: inline-flex; align-items: center; height: 40px; overflow: hidden;
  border: 1px solid var(--hx-line); border-radius: 11px; background: var(--hx-surface);
}
.s-BasicSamples-ConditionalFormattingGrid .hx-month-stepper .hx-month-label {
  padding: 0 12px; font-size: 13px; font-weight: 700; color: var(--hx-ink);
  white-space: nowrap; line-height: 40px; border-inline: 1px solid var(--hx-line);
  cursor: pointer;
}
.s-BasicSamples-ConditionalFormattingGrid .hx-month-stepper .hx-month-label:hover { color: var(--hx-navy); }
.s-BasicSamples-ConditionalFormattingGrid .hx-month-stepper .tool-button.hx-step-arrow {
  width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
  box-shadow: none !important; margin: 0 !important;
  display: flex !important; align-items: center; justify-content: center;
}
.s-BasicSamples-ConditionalFormattingGrid .hx-month-stepper .tool-button.hx-step-arrow .button-inner {
  padding: 0 !important; background-image: none !important; font-size: 0 !important; /* hides text label */
  color: var(--hx-ink) !important; width: 40px; height: 40px;
  display: flex !important; align-items: center; justify-content: center;
}
.s-BasicSamples-ConditionalFormattingGrid .hx-month-stepper .tool-button.hx-step-arrow:hover .button-inner { color: var(--hx-navy) !important; }
.s-BasicSamples-ConditionalFormattingGrid .hx-month-stepper .hx-step-ic { width: 18px !important; height: 18px !important; }

/* --- segmented group-by --- */
.s-BasicSamples-ConditionalFormattingGrid .hx-seg-wrap {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
}
.s-BasicSamples-ConditionalFormattingGrid .hx-seg-label {
  font-size: 13px; font-weight: 600; color: var(--hx-muted); white-space: nowrap;
}
.s-BasicSamples-ConditionalFormattingGrid .hx-seg {
  display: inline-flex; align-items: center; height: 40px; padding: 3px; gap: 2px;
  border: 1px solid var(--hx-line); border-radius: 11px; background: var(--hx-surface-soft);
}
.s-BasicSamples-ConditionalFormattingGrid .hx-seg .tool-button.hx-seg-btn {
  height: 32px !important; min-height: 32px !important; margin: 0 !important;
  border: 0 !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important;
}
.s-BasicSamples-ConditionalFormattingGrid .hx-seg .tool-button.hx-seg-btn .button-inner {
  padding: 0 12px !important; background-image: none !important; font-weight: 600 !important;
  color: var(--hx-muted) !important; line-height: 32px; white-space: nowrap !important;
}
.s-BasicSamples-ConditionalFormattingGrid .hx-seg .tool-button.hx-seg-btn:hover .button-inner { color: var(--hx-navy) !important; }
.s-BasicSamples-ConditionalFormattingGrid .hx-seg .tool-button.hx-seg-btn.is-active { background: var(--hx-navy) !important; }
.s-BasicSamples-ConditionalFormattingGrid .hx-seg .tool-button.hx-seg-btn.is-active .button-inner { color: #fff !important; }

/* --- kebab trigger --- */
.s-BasicSamples-ConditionalFormattingGrid .hx-kebab {
  width: 40px; height: 40px; min-width: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hx-line); border-radius: 11px; background: var(--hx-surface);
  color: var(--hx-ink); cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.s-BasicSamples-ConditionalFormattingGrid .hx-kebab:hover { border-color: var(--hx-navy); color: var(--hx-navy); }
.s-BasicSamples-ConditionalFormattingGrid .hx-kebab svg { width: 18px; height: 18px; }

/* --- primary CTA cluster (pinned right by flex-end) --- */
.s-BasicSamples-ConditionalFormattingGrid .hx-head-cta { display: inline-flex; align-items: center; gap: 8px; }
/* never let Calculate / Bulk Calculate wrap to two lines */
.s-BasicSamples-ConditionalFormattingGrid .hx-head-cta .tool-button .button-inner { white-space: nowrap !important; }
/* Calculate keeps the existing navy .calculate-button rule; Bulk becomes outline.
   Same specificity as the base rule, so appearing later in the file wins. */
.s-BasicSamples-ConditionalFormattingGrid .tool-button.calculate-button.hx-cta-secondary {
  background: var(--hx-surface) !important; border: 1px solid var(--hx-line) !important;
}
.s-BasicSamples-ConditionalFormattingGrid .tool-button.calculate-button.hx-cta-secondary .button-inner { color: var(--hx-ink) !important; }
.s-BasicSamples-ConditionalFormattingGrid .tool-button.calculate-button.hx-cta-secondary:hover {
  background: var(--hx-surface) !important; border-color: var(--hx-navy) !important;
}
.s-BasicSamples-ConditionalFormattingGrid .tool-button.calculate-button.hx-cta-secondary:hover .button-inner { color: var(--hx-navy) !important; }

/* keep the moved-but-hidden originals out of layout */
.s-BasicSamples-ConditionalFormattingGrid .hx-attn-stash { display: none !important; }

/* ===== header redesign: title-row CTAs, toolbar as its own row, search-row actions ===== */
/* title-row primary buttons: Save changes (ghost) | Calculate (navy) | Submit results (ghost) */
.s-BasicSamples-ConditionalFormattingGrid .hx-head-cta { gap: 10px; align-self: flex-start; flex-wrap: wrap; }
.s-BasicSamples-ConditionalFormattingGrid .hx-head-cta .tool-button {
  height: 42px !important; min-height: 42px !important; margin: 0 !important;
  /* the base theme forces every .tool-button to width:118px, which clips long labels
     (e.g. "Submit ...") and makes them spill over the next button; let them fit content. */
  width: auto !important; min-width: 0 !important;
  border-radius: 11px !important; box-shadow: none !important;
}
.s-BasicSamples-ConditionalFormattingGrid .hx-head-cta .tool-button .button-inner {
  display: inline-flex !important; align-items: center; gap: 7px; padding: 0 16px !important;
  font-weight: 600 !important; font-size: 13.5px !important; background-image: none !important; white-space: nowrap !important;
}
.s-BasicSamples-ConditionalFormattingGrid .hx-head-cta .hx-cta-ic { width: 16px; height: 16px; flex: 0 0 auto; }
/* Calculate = navy primary */
.s-BasicSamples-ConditionalFormattingGrid .hx-head-cta .tool-button.hx-cta-primary {
  background: var(--hx-navy) !important; border: 1px solid var(--hx-navy) !important;
}
.s-BasicSamples-ConditionalFormattingGrid .hx-head-cta .tool-button.hx-cta-primary .button-inner { color: #fff !important; }
.s-BasicSamples-ConditionalFormattingGrid .hx-head-cta .tool-button.hx-cta-primary:hover {
  background: var(--hx-navy-2, #1d47a0) !important; border-color: var(--hx-navy-2, #1d47a0) !important;
}
/* Save changes / Submit results = outline ghost */
.s-BasicSamples-ConditionalFormattingGrid .hx-head-cta .tool-button.hx-cta-ghost {
  background: var(--hx-surface) !important; border: 1px solid var(--hx-line) !important;
}
.s-BasicSamples-ConditionalFormattingGrid .hx-head-cta .tool-button.hx-cta-ghost .button-inner { color: var(--hx-ink) !important; }
.s-BasicSamples-ConditionalFormattingGrid .hx-head-cta .tool-button.hx-cta-ghost:hover { border-color: var(--hx-navy) !important; }
.s-BasicSamples-ConditionalFormattingGrid .hx-head-cta .tool-button.hx-cta-ghost:hover .button-inner { color: var(--hx-navy) !important; }
.s-BasicSamples-ConditionalFormattingGrid .hx-head-cta .tool-button.hx-cta-ghost .hx-cta-ic { color: var(--hx-navy); }
/* Save changes before there are edits: quiet, non-clickable look (Serenity toggles .disabled) */
.s-BasicSamples-ConditionalFormattingGrid .hx-head-cta .tool-button.apply-changes-button.disabled { opacity: .5; }

/* the controls toolbar, now its own row: [stepper, Needs review]  <->  [Group by, Stats] */
.s-BasicSamples-ConditionalFormattingGrid > .s-Toolbar {
  margin: 0 0 14px !important; padding: 0 !important; border: 0 !important;
  min-height: 0 !important; background: transparent !important;
}
.s-BasicSamples-ConditionalFormattingGrid > .s-Toolbar .buttons-inner {
  display: flex !important; align-items: center; justify-content: flex-start;
  gap: 10px; width: 100%; flex-wrap: wrap; float: none !important;
}
.s-BasicSamples-ConditionalFormattingGrid .hx-tb-left,
.s-BasicSamples-ConditionalFormattingGrid .hx-tb-right,
.s-BasicSamples-ConditionalFormattingGrid .hx-tb-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* the search grows to absorb the slack so the row has no empty gap; the controls sit flush-right */
.s-BasicSamples-ConditionalFormattingGrid > .s-Toolbar .buttons-inner > .hx-tb-search {
  flex: 1 1 220px !important; min-width: 180px; max-width: none !important; order: -1;
}
.s-BasicSamples-ConditionalFormattingGrid .hx-tb-actions { gap: 8px; }
/* the filters row now carries only the applied-filter chips (search moved into the toolbar),
   so hide it unless a filter is applied or its panel is open */
.s-BasicSamples-ConditionalFormattingGrid .hx-filters:not(.has-applied):not(.is-open) { display: none !important; }
/* the Needs review / Stats pills must size to their label (not the fixed 118px) and never wrap */
.s-BasicSamples-ConditionalFormattingGrid .needs-review-button,
.s-BasicSamples-ConditionalFormattingGrid .stats-toggle-button { flex: 0 0 auto; width: auto !important; min-width: 0 !important; }
.s-BasicSamples-ConditionalFormattingGrid .needs-review-button .button-inner,
.s-BasicSamples-ConditionalFormattingGrid .stats-toggle-button .button-inner { white-space: nowrap !important; }
/* segmented Group-by buttons fit their label too (tighter than 118px each) */
.s-BasicSamples-ConditionalFormattingGrid .hx-seg .tool-button.hx-seg-btn { width: auto !important; min-width: 0 !important; }

/* search-row trailing actions: Refresh + More */
.s-BasicSamples-ConditionalFormattingGrid .hx-filters-lead { display: flex; align-items: center; }
.s-BasicSamples-ConditionalFormattingGrid .hx-filters-actions { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.s-BasicSamples-ConditionalFormattingGrid .hx-icon-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hx-line); border-radius: 11px; background: var(--hx-surface);
  color: var(--hx-ink); cursor: pointer; transition: border-color .15s, color .15s;
}
.s-BasicSamples-ConditionalFormattingGrid .hx-icon-btn:hover { border-color: var(--hx-navy); color: var(--hx-navy); }
.s-BasicSamples-ConditionalFormattingGrid .hx-icon-btn svg { width: 18px; height: 18px; }
.s-BasicSamples-ConditionalFormattingGrid .hx-more-btn {
  height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 0 14px;
  border: 1px solid var(--hx-line); border-radius: 11px; background: var(--hx-surface);
  color: var(--hx-navy); font-weight: 600; font-size: 13px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.s-BasicSamples-ConditionalFormattingGrid .hx-more-btn:hover { border-color: var(--hx-navy); background: var(--hx-surface-soft); }
.s-BasicSamples-ConditionalFormattingGrid .hx-more-btn svg { width: 16px; height: 16px; color: var(--hx-ink); }

/* dark mode for the new header pieces */
:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .hx-head-cta .tool-button.hx-cta-ghost { background: #16213a !important; border-color: #2a3342 !important; }
:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .hx-head-cta .tool-button.hx-cta-ghost .button-inner { color: #e7ecf5 !important; }
:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .hx-icon-btn,
:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .hx-more-btn { background: #16213a; border-color: #2a3342; color: #c6cedd; }
:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .hx-more-btn svg { color: #c6cedd; }

/* --- RTL: mirror the stepper arrow glyphs (flex order already reverses) --- */
body.rtl .s-BasicSamples-ConditionalFormattingGrid .hx-month-stepper .hx-step-arrow .hx-step-ic { transform: scaleX(-1); }

/* --- dark --- */
:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .hx-grid-eyebrow { color: #8fb0e6; }
:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .hx-month-stepper,
:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .hx-kebab { background: #16213a; border-color: #2a3342; }
:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .hx-month-stepper .hx-month-label { color: #e7ecf5; border-color: #2a3342; }
:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .hx-month-stepper .hx-step-arrow .button-inner { color: #c6cedd !important; }
:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .hx-kebab { color: #c6cedd; }
:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .hx-seg { background: #1b2234; border-color: #2a3342; }
:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .hx-seg .tool-button.hx-seg-btn .button-inner { color: #9aa7bd !important; }
:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .hx-seg .tool-button.hx-seg-btn.is-active { background: #5b86d6 !important; }
:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .tool-button.calculate-button.hx-cta-secondary { background: #16213a !important; border-color: #2a3342 !important; }
:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .tool-button.calculate-button.hx-cta-secondary .button-inner { color: #e7ecf5 !important; }

/* =====================================================================
   12. Delay rule popup (.hx-delaypop) - opened from the Delay rule button
   in a row. Body of a Q.information dialog. Light + dark + RTL.
   ===================================================================== */
.s-DataGrid.hx-attcalc-grid .slick-cell.delay-rule-cell { text-align: center; }
.hx-delaypop { min-width: 260px; }
.hx-delaypop .hx-dp-head {
  font-size: 15px; font-weight: 800; color: var(--hx-navy, #16325c);
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--hx-line, #e4e9f1);
}
.hx-delaypop .hx-dp-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 6px 0;
}
.hx-delaypop .hx-dp-row + .hx-dp-row { border-top: 1px dashed var(--hx-line, #e4e9f1); }
.hx-delaypop .hx-dp-k { color: var(--hx-muted, #7c8aa3); font-size: 13px; }
.hx-delaypop .hx-dp-v { font-weight: 700; font-size: 13.5px; text-align: end; }
:root[data-theme="dark"] .hx-delaypop .hx-dp-head { color: #8fb0e6; border-bottom-color: #273349; }
:root[data-theme="dark"] .hx-delaypop .hx-dp-row + .hx-dp-row { border-top-color: #273349; }
:root[data-theme="dark"] .hx-delaypop .hx-dp-k { color: #8a97ad; }

/* =====================================================================
   13. Date-range popover (.hx-daterange-pop) - opens from the toolbar
   range label; writes From/To into the real Date quick filter. Appended
   to <body>, so its selectors are NOT grid-scoped. Light + dark + RTL.
   ===================================================================== */
.hx-daterange-pop {
  position: absolute; z-index: 9000; min-width: 248px; box-sizing: border-box;
  background: var(--hx-surface, #fff); border: 1px solid var(--hx-line, #e4e9f1);
  border-radius: 14px; padding: 14px; box-shadow: 0 12px 34px rgba(16, 37, 74, .18);
  font-size: 13px; color: var(--hx-ink, #28313f);
}
.hx-daterange-pop .hx-dr-title {
  font-size: 13px; font-weight: 800; color: var(--hx-navy, #16325c); margin-bottom: 10px;
}
.hx-daterange-pop .hx-dr-fields { display: flex; gap: 10px; }
.hx-daterange-pop .hx-dr-field { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hx-daterange-pop .hx-dr-field > span {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--hx-muted, #7c8aa3);
}
.hx-daterange-pop input[type="date"] {
  width: 100%; box-sizing: border-box; height: 38px; padding: 0 10px;
  border: 1px solid var(--hx-line, #d4d8df); border-radius: 9px;
  background: var(--hx-surface, #fff); color: var(--hx-ink, #28313f);
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.hx-daterange-pop input[type="date"]:focus {
  outline: none; border-color: var(--hx-navy, #1b3b68);
  box-shadow: 0 0 0 3px rgba(27, 59, 104, .14);
}
.hx-daterange-pop .hx-dr-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.hx-daterange-pop .hx-dr-presets:empty { display: none; }
.hx-daterange-pop .hx-dr-chip {
  height: 28px; padding: 0 12px; border: 1px solid var(--hx-line, #d4d8df);
  border-radius: 999px; background: var(--hx-surface-soft, #f4f6fa);
  color: var(--hx-ink, #28313f); font-size: 12px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.hx-daterange-pop .hx-dr-chip:hover { border-color: var(--hx-navy, #1b3b68); color: var(--hx-navy, #1b3b68); }
.hx-daterange-pop .hx-dr-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.hx-daterange-pop .hx-dr-actions button {
  height: 36px; padding: 0 16px; border-radius: 9px; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit; border: 1px solid transparent;
}
.hx-daterange-pop .hx-dr-cancel {
  background: var(--hx-surface, #fff); border-color: var(--hx-line, #d4d8df); color: var(--hx-muted, #6b7480);
}
.hx-daterange-pop .hx-dr-cancel:hover { border-color: var(--hx-navy, #1b3b68); color: var(--hx-navy, #1b3b68); }
.hx-daterange-pop .hx-dr-apply { background: var(--hx-navy, #1b3b68); color: #fff; }
.hx-daterange-pop .hx-dr-apply:hover { filter: brightness(1.08); }
/* RTL: the actions read right-to-left too */
.hx-daterange-pop.rtl .hx-dr-actions { justify-content: flex-start; }

:root[data-theme="dark"] .hx-daterange-pop {
  background: #16213a; border-color: #2a3342; color: #e7ecf5; box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
}
:root[data-theme="dark"] .hx-daterange-pop .hx-dr-title { color: #8fb0e6; }
:root[data-theme="dark"] .hx-daterange-pop .hx-dr-field > span { color: #8a97ad; }
:root[data-theme="dark"] .hx-daterange-pop input[type="date"] {
  background: #0f1830; border-color: #2a3342; color: #e7ecf5; color-scheme: dark;
}
:root[data-theme="dark"] .hx-daterange-pop .hx-dr-chip { background: #1b2234; border-color: #2a3342; color: #c6cedd; }
:root[data-theme="dark"] .hx-daterange-pop .hx-dr-chip:hover { border-color: #5b86d6; color: #8fb0e6; }
:root[data-theme="dark"] .hx-daterange-pop .hx-dr-cancel { background: #16213a; border-color: #2a3342; color: #9aa7bd; }
:root[data-theme="dark"] .hx-daterange-pop .hx-dr-apply { background: #5b86d6; }

/* =====================================================================
   14. Professional column header (THIS GRID ONLY)
   A cohesive header band: crisp uppercase labels, vertical centring,
   faint column dividers, hover + sorted states. Light + dark.
   ===================================================================== */
.s-BasicSamples-ConditionalFormattingGrid .slick-header,
.s-BasicSamples-ConditionalFormattingGrid .slick-header-columns {
  background: var(--hx-surface-soft, #f6f8fb) !important;
  border-bottom: 1px solid var(--hx-line, #e4e9f1) !important;
}
.s-BasicSamples-ConditionalFormattingGrid .slick-header-column {
  /* inline-flex (NOT flex): the base theme lays header columns out as inline-block, so a
     block-level flex would stack them vertically. inline-flex keeps them in a row while
     letting align-items vertically centre the 1-2 line label. */
  display: inline-flex !important; align-items: center; vertical-align: top;
  background: transparent !important;
  border-right: 1px solid rgba(20, 40, 80, .06) !important; /* faint column divider */
  padding-top: 0 !important; padding-bottom: 0 !important;
}
.s-BasicSamples-ConditionalFormattingGrid .slick-header-column:hover { background: rgba(27, 59, 104, .045) !important; }
.s-BasicSamples-ConditionalFormattingGrid .slick-header-column.align-center { justify-content: center; }
.s-BasicSamples-ConditionalFormattingGrid .slick-header-column .slick-column-name {
  font-family: var(--hx-font-ui);
  font-size: 12px !important; font-weight: 700; letter-spacing: 0;
  text-transform: none; color: var(--hx-ink-2, #3e4a66);
  line-height: 1.2; white-space: normal; word-break: break-word;
}
.s-BasicSamples-ConditionalFormattingGrid .slick-header-column.slick-header-column-sorted .slick-column-name { color: var(--hx-navy, #1b3b68); }
/* the overtime / deduction column groups keep their soft tint, just harmonised */
.s-BasicSamples-ConditionalFormattingGrid .slick-header-column.ai-ot-cell { background: #e8f0fb !important; }
.s-BasicSamples-ConditionalFormattingGrid .slick-header-column.ai-del-cell { background: #fcecef !important; }

:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .slick-header,
:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .slick-header-columns {
  background: #141c2e !important; border-bottom-color: #2a3342 !important;
}
:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .slick-header-column { border-right-color: rgba(255, 255, 255, .05) !important; }
:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .slick-header-column:hover { background: rgba(120, 160, 235, .08) !important; }
:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .slick-header-column .slick-column-name { color: #9aa7bd; }
:root[data-theme="dark"] .s-BasicSamples-ConditionalFormattingGrid .slick-header-column.slick-header-column-sorted .slick-column-name { color: #8fb0e6; }

/* =====================================================================
   15. Merged "Day Status" header + cells (Day Status + Multiple Day Status).
   Both columns sit in the frozen pane (frozenColumn = 5). Blank the 2nd
   header, drop the dividers, centre the single label over both, and keep
   one status accent bar on the Day Status side. Light + dark + RTL.
   ===================================================================== */
.s-BasicSamples-ConditionalFormattingGrid .slick-header-column.hx-status-head-a { overflow: visible !important; border-right: 0 !important; }
.s-BasicSamples-ConditionalFormattingGrid .slick-header-column.hx-status-head-a .slick-column-name {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 200%; text-align: center; pointer-events: none;
}
.s-BasicSamples-ConditionalFormattingGrid .slick-header-column.hx-status-head-b { border-left: 0 !important; }
.s-BasicSamples-ConditionalFormattingGrid .slick-header-column.hx-status-head-b .slick-column-name { display: none !important; }
/* keep the pair together: no split handle, no stray sort arrow, no hover wash over the label */
.s-BasicSamples-ConditionalFormattingGrid .slick-header-column.hx-status-head-a .slick-resizable-handle,
.s-BasicSamples-ConditionalFormattingGrid .slick-header-column.hx-status-head-a .slick-sort-indicator,
.s-BasicSamples-ConditionalFormattingGrid .slick-header-column.hx-status-head-b .slick-sort-indicator { display: none !important; }
.s-BasicSamples-ConditionalFormattingGrid .slick-header-column.hx-status-head-a:hover,
.s-BasicSamples-ConditionalFormattingGrid .slick-header-column.hx-status-head-b:hover { background: transparent !important; }
body.rtl .s-BasicSamples-ConditionalFormattingGrid .slick-header-column.hx-status-head-a .slick-column-name { left: auto; right: 0; }

/* body: no divider between the two status cells, no accent bar on the 2nd cell */
.slick-cell.hx-status-a { border-right: 0 !important; }
.slick-cell.hx-status-b { border-left: 0 !important; }
.slick-cell.hx-status-b.col-unit-price { box-shadow: none !important; }
/* the merged 2nd status cell: no bar (the single bar sits on the Day Status side); the
   selection is shown by the solid row fill, so no wash box-shadow is needed here either. */
.slick-row.hx-rowsel .slick-cell.hx-status-b.col-unit-price { box-shadow: none !important; }