/*
 * grids.css — modern data-grid look for every ZK Listbox & Grid, app-wide
 * --------------------------------------------------------------------------
 * The legacy ZK theme renders listboxes/grids with heavy 3D borders, grey
 * gradient headers and boxed cells. This restyles them to a clean, flat
 * "ag-Grid Quartz"-style data grid: light header, thin row separators, no
 * vertical cell borders, comfortable padding, blue hover/selection, and a
 * rounded bordered container. Colours come from tokens.css (--hd-*).
 *
 * Loaded globally via <theme-uri> in WEB-INF/zk.xml. Kept to single-class
 * selectors so per-page rules (callcentre-redesign / reports-redesign, which
 * are scoped to an sclass + !important) always win over this base.
 */

/* ---- container ---- */
.z-listbox,
.z-grid{
  border:1px solid var(--hd-border) !important;
  border-radius:10px !important;
  background:var(--hd-surface) !important;
  overflow:hidden;
  font-family:var(--hd-font) !important;
}
.z-listbox-body,
.z-grid-body{
  background:var(--hd-surface) !important;
  border:none !important;
}

/* ---- header ---- */
.z-listbox-header,
.z-listhead,
.z-grid-header,
.z-columns,
.z-tree-header,
.z-treecols{
  background:var(--hd-surface-2) !important;
  background-image:none !important;
  border:none !important;
  border-bottom:1px solid var(--hd-border) !important;
}
.z-listheader,
.z-column,
.z-treecol{
  background:transparent !important;
  background-image:none !important;
  border:none !important;
  border-right:1px solid var(--hd-line) !important;
}
.z-listheader:last-child,
.z-column:last-child,
.z-treecol:last-child{ border-right:none !important; }

.z-listheader-content,
.z-column-content,
.z-treecol-content{
  color:var(--hd-text-muted) !important;
  font-weight:700 !important;
  font-size:11.5px !important;
  letter-spacing:.03em;
  text-transform:uppercase;
  padding:11px 12px !important;
  line-height:1.2 !important;
}

/* sortable header affordance */
.z-listheader:hover,
.z-column:hover,
.z-treecol:hover{ background:rgba(0,51,150,.04) !important; cursor:pointer; }
.z-listheader-sorticon,
.z-column-sorticon,
.z-treecol-sorticon{ color:var(--hd-primary) !important; }

/* ---- rows ---- */
.z-listitem,
.z-row{ background:var(--hd-surface) !important; }
/* neutralise ZK's grey zebra into a whisper-faint band (data-grid feel) */
.z-listbox-odd,
.z-listbox-odd > .z-listcell,
.z-row-odd,
.z-row-odd > .z-cell{ background:#FAFBFC !important; background-image:none !important; }

.z-listcell,
.z-cell{
  background:transparent !important;
  background-image:none !important;
  border:none !important;
  border-bottom:1px solid var(--hd-line) !important;
  color:var(--hd-text) !important;
  vertical-align:middle;
}
.z-listcell-content,
.z-cell{
  padding:9px 12px !important;
  font-size:13px !important;
  line-height:1.35 !important;
}

/* hover + selection */
.z-listitem:hover > .z-listcell,
.z-row:hover > .z-cell{
  background:var(--hd-row-hover) !important;
  background-image:none !important;
  cursor:pointer;
}
.z-listitem-selected > .z-listcell,
.z-listitem-seld > .z-listcell,
.z-row-selected > .z-cell,
.z-row-seld > .z-cell{
  background:var(--hd-primary-soft) !important;
  background-image:none !important;
  color:var(--hd-text) !important;
}

/* empty state */
.z-listbox-emptybody-content,
.z-grid-emptybody-content{
  color:var(--hd-text-muted) !important;
  font-size:13px !important;
  padding:18px 12px !important;
}

/* ---- paging -> modern pill buttons ---- */
.z-paging{
  background:transparent !important;
  border:none !important;
  padding:8px 0 !important;
}
.z-paging-button{
  background:var(--hd-surface) !important;
  background-image:none !important;
  border:1px solid var(--hd-border) !important;
  border-radius:8px !important;
  color:var(--hd-text) !important;
  min-width:30px; height:30px;
  margin:0 2px !important;
}
.z-paging-button:hover{
  border-color:var(--hd-field-hover) !important;
  color:var(--hd-primary) !important;
  cursor:pointer;
}
.z-paging-input{
  border:1px solid var(--hd-border) !important;
  border-radius:6px !important;
  padding:3px 6px !important;
}
.z-paging-info{ color:var(--hd-text-muted) !important; }