/* =====================================================================
   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 must not be squeezed by the flex body */
.s-DataGrid > .hx-panel-head,
.s-DataGrid > .hx-filters,
.s-DataGrid > .s-SlickPager,
.s-DataGrid > .s-Toolbar,
.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), prepended into .grid-title with
   no styling of its own beyond raw Bootstrap 3 .btn-group defaults: it sat
   flush against the title text, and the active (first) button rendered as a
   plain square inside the group's rounded outline instead of taking the
   group's own rounded corner. Bug 6954. */
.grid-title .view-switch.btn-group {
  margin-inline-start: 12px;
  vertical-align: middle;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid var(--hx-line);
}
.grid-title .view-switch.btn-group .btn {
  border-radius: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.grid-title .view-switch.btn-group .btn.active {
  background: var(--hx-sky) !important;
}
.grid-title .view-switch.btn-group .btn.active .fa {
  color: #fff !important;
}

/* =====================================================================
   3. Toolbar — one orange 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 orange gradient
   (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;
}

/* =====================================================================
   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. */
.slick-row:hover .slick-cell:not(.Penalty):not(.Overtime),
.slick-row.odd:hover .slick-cell:not(.Penalty):not(.Overtime) {
  background-color: #FAFCFF !important;
}
.slick-row:hover .slick-cell.selected:not(.Penalty):not(.Overtime) { background-color: var(--hx-orange-bg) !important; }

/* ---- 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);
}
.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;
  margin: 0 -8px;
  padding: 4px 0 12px;
}
.card-container .card-item { padding: 0 !important; }

.hx-emp-card {
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  border-radius: 16px;
  padding: 14px;
  cursor: pointer;
  height: 100%;
  box-shadow: 0 1px 2px rgba(16, 33, 71, .04);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.hx-emp-card:hover {
  border-color: rgba(73, 179, 228, .5);
  box-shadow: 0 8px 22px rgba(16, 33, 71, .10);
  transform: translateY(-2px);
}

.hx-emp-card-head { display: flex; align-items: center; gap: 11px; }
.hx-emp-avatar {
  width: 46px; height: 46px;
  /* Bug 6954: circular, like the header user avatar (.user-image), not a
     rounded square. */
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--hx-surface-soft);
  border: 1px solid var(--hx-line);
}
.hx-emp-ident { min-width: 0; flex: 1 1 auto; }
.hx-emp-name {
  font-size: 13.5px; font-weight: 800; color: var(--hx-navy);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hx-emp-role {
  font-size: 11.5px; font-weight: 600; color: var(--hx-text-3, #8494AD);
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hx-emp-badge {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 800;
  padding: 3px 9px; border-radius: 20px;
  white-space: nowrap;
}
.hx-emp-badge.is-active { background: rgba(34, 163, 110, .12); color: #1B8A5C; }
.hx-emp-badge.is-inactive { background: rgba(132, 148, 173, .16); color: #64748B; }

.hx-emp-card-body {
  margin-top: 12px; padding-top: 11px;
  border-top: 1px dashed var(--hx-line);
  display: grid; gap: 6px;
}
.hx-emp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hx-emp-key { font-size: 11px; font-weight: 700; color: var(--hx-text-3, #8494AD); white-space: nowrap; }
.hx-emp-val {
  font-size: 12px; font-weight: 700; color: var(--hx-text-1, #3E4A66);
  text-align: end; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

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