/* Shared S3-BaseGrid host (Kendo UI Grid wrapper) */
.s3-grid-host {
  width: 100%;
  max-width: 100%;
  --s3-grid-row-height: 36px;
  --s3-grid-edit-height: 36px;
}

.s3-grid-host.k-grid,
.s3-grid-host .k-grid {
  overflow: hidden;
}

.s3-grid-host .k-grid-content {
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-gutter: stable;
  overflow-anchor: none;
  /* padding-bottom is set by fitHeight so the last row border stays in scroll range */
}

.s3-grid-host .k-grid-header .k-column-title {
  font-weight: 700;
}

.s3-grid-host .k-grid-content:focus,
.s3-grid-host .k-grid-table:focus {
  outline: none;
}

.s3-grid-host tr.k-selected > td,
.s3-grid-host tr.k-state-selected > td,
.s3-grid-host tr.k-selected:hover > td,
.s3-grid-host tr.k-state-selected:hover > td {
  background-color: rgba(0, 123, 255, 0.25) !important;
}

.s3-grid-host .s3-grid-cell-focus {
  outline: 2px solid rgba(0, 123, 255, 0.85);
  outline-offset: -2px;
}

.s3-grid-host .s3-grid-inline-edit {
  width: 100%;
  box-sizing: border-box;
}

.s3-grid-host tbody td {
  height: var(--s3-grid-row-height, 36px);
  min-height: var(--s3-grid-row-height, 36px);
  max-height: var(--s3-grid-row-height, 36px);
  padding-top: 2px;
  padding-bottom: 2px;
  vertical-align: middle;
  box-sizing: border-box;
}

/* Same light-gray border on all four sides (override Kendo uneven edge colors) */
.s3-grid-host tbody td .s3-grid-inline-edit,
.s3-grid-host tbody td .k-input,
.s3-grid-host tbody td .k-textbox,
.s3-grid-host tbody td input.k-textbox {
  /* Fit inside td padding (2px top + 2px bottom) so the row does not grow while editing. */
  height: calc(var(--s3-grid-row-height, 36px) - 4px);
  max-height: calc(var(--s3-grid-row-height, 36px) - 4px);
  min-height: 0;
  box-sizing: border-box;
  padding-left: 2px;
  padding-right: 2px;
  border: 1px solid #ced4da !important;
  border-top-color: #ced4da !important;
  border-right-color: #ced4da !important;
  border-bottom-color: #ced4da !important;
  border-left-color: #ced4da !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  outline: none !important;
}

.s3-grid-host tbody td .s3-grid-inline-edit:focus,
.s3-grid-host tbody td .k-input:focus-within,
.s3-grid-host tbody td .k-textbox:focus,
.s3-grid-host tbody td input.k-textbox:focus {
  border: 1px solid #adb5bd !important;
  border-top-color: #adb5bd !important;
  border-right-color: #adb5bd !important;
  border-bottom-color: #adb5bd !important;
  border-left-color: #adb5bd !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Toolbar: stretch across grid so Up/Down (and its ...) sit far right */
.s3-grid-host .k-grid-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  gap: 0.25rem;
  position: relative;
  z-index: 5;
  overflow: visible !important;
}

.s3-grid-host .k-grid-toolbar .k-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 0.25rem;
}

.s3-grid-host .k-grid-toolbar .k-toolbar-item {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
}

.s3-grid-host .k-grid-toolbar .k-toolbar-item:has(.s3-grid-toolbar-wrap) {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.s3-grid-host .k-toolbar-overflow-button {
  display: none !important;
}

.s3-grid-host .s3-grid-toolbar-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 0.25rem;
}

.s3-grid-host .s3-grid-toolbar-group {
  display: flex;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
  min-width: 0;
  gap: 0.25rem;
}

.s3-grid-host .s3-grid-toolbar-group-right {
  margin-left: auto;
}

.s3-grid-host .s3-grid-toolbar-flex {
  flex: 1 1 auto;
  display: block;
  min-width: 0;
}

.s3-grid-host .s3-grid-toolbar-expanded {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: 0 0 auto;
}

.s3-grid-host.s3-grid-toolbar-collapsed-left .s3-grid-toolbar-expanded-left,
.s3-grid-host.s3-grid-toolbar-collapsed-right .s3-grid-toolbar-expanded-right {
  display: none;
}

.s3-grid-host:not(.s3-grid-toolbar-collapsed-left) .s3-grid-toolbar-menu-left,
.s3-grid-host:not(.s3-grid-toolbar-collapsed-right) .s3-grid-toolbar-menu-right {
  display: none !important;
}

/* Up/Down overflow: kebab with a vertical rule in the button body */
.s3-grid-host .s3-grid-toolbar-menu-right {
  position: relative;
  padding-left: 0.65rem;
}

.s3-grid-host .s3-grid-toolbar-menu-right::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background-color: currentColor;
  opacity: 0.45;
  pointer-events: none;
}

.s3-grid-host .s3-grid-overflow-panel {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.35rem;
  min-width: 9rem;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.12);
  z-index: 100;
}

.s3-grid-host .s3-grid-overflow-panel .k-button {
  justify-content: flex-start;
  width: 100%;
}

.s3-grid-host .s3-grid-overflow-panel .k-button + .k-button {
  margin-top: 0.25rem;
}

/* Toolbar Add as DropDownList / MultiSelect (nested S3Dropdown under S3Button).
   Default width 88px; override with S3Dropdown Width / MinWidth / MaxWidth. */
.s3-grid-host .s3-grid-toolbar-expanded-left > .k-dropdownlist,
.s3-grid-host .s3-grid-toolbar-expanded-left > .k-multiselect {
  width: 88px;
  min-width: 88px;
  vertical-align: middle;
}

.s3-grid-host .s3-grid-toolbar-expanded-left > .k-dropdownlist .k-input-inner,
.s3-grid-host .s3-grid-toolbar-expanded-left > .k-multiselect .k-input-inner {
  padding-inline: 0.5rem;
}

.s3-grid-host .s3-grid-toolbar-expanded-left > .k-dropdownlist .k-input-value-text {
  font-weight: 600;
}

.s3-grid-host .s3-grid-toolbar-expanded-left > .k-multiselect {
  width: auto;
  max-width: 220px;
}