/*!
 * device-grid.css v1.1.0 — Tabulator 6 device grid on the shared console-ui
 * design tokens. Every override is scoped under .dg-grid; the grid mirrors
 * .c-table (same header, row rhythm, borders, tags and action buttons).
 * Load order: tabulator.min.css -> device-grid.css.
 */

.dg-grid {
  --dg-sticky-top: 0px;
  position: relative;
  width: 100%;
  min-width: 0;
  color-scheme: light;
  color: var(--c-ink);
  font-family: var(--c-font);
  font-size: var(--c-text-md);
  line-height: 1.45;
}

/* ---------------------------------------------------------------- shell */

.dg-grid .tabulator {
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--c-text-md);
  text-align: left;
  overflow: hidden;
}

.dg-grid--auto .tabulator {
  overflow: visible;
  transform: none;
}

.dg-grid .tabulator-tableholder {
  background: var(--c-surface);
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.dg-grid .tabulator-tableholder::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.dg-grid .tabulator-tableholder::-webkit-scrollbar-thumb {
  background: var(--c-line-strong);
  border: 2px solid var(--c-surface);
  border-radius: var(--c-radius-pill);
}

.dg-grid .tabulator-tableholder::-webkit-scrollbar-track {
  background: transparent;
}

.dg-grid--contained .tabulator-tableholder {
  overflow: auto;
}

/* ---------------------------------------------------------------- header */

.dg-grid .tabulator-header {
  position: sticky;
  top: var(--dg-sticky-top);
  z-index: 8;
  background: var(--c-surface-muted);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-muted);
  box-shadow: 0 1px 0 var(--c-line);
}

.dg-grid .tabulator-header-contents,
.dg-grid .tabulator-headers {
  background: var(--c-surface-muted);
}

.dg-grid .tabulator-header .tabulator-col {
  background: var(--c-surface-muted);
  border-right: 0;
  min-height: 42px;
}

.dg-grid .tabulator-header .tabulator-col:last-child {
  border-right: 0;
}

.dg-grid .tabulator-col .tabulator-col-content {
  padding: 0;
}

.dg-grid .tabulator-col .tabulator-col-title {
  padding: 11px 14px 7px;
  color: var(--c-muted);
  font-size: var(--c-text-xs);
  font-weight: 650;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.dg-grid .tabulator-header .tabulator-col.tabulator-sortable:hover {
  background: var(--c-surface-hover);
}

.dg-grid .tabulator-col .tabulator-arrow {
  border-bottom-color: var(--c-muted);
}

.dg-grid .tabulator-col .tabulator-header-filter {
  padding: 0 14px 9px;
}

.dg-grid .tabulator-header-filter input,
.dg-grid .tabulator-header-filter select {
  width: 100%;
  height: 30px;
  min-height: 30px;
  padding: 4px 9px !important;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--c-radius-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--c-text-sm);
  line-height: 1.35;
  outline: none;
  box-shadow: none;
  box-sizing: border-box;
}

.dg-grid .tabulator-header-filter input:hover,
.dg-grid .tabulator-header-filter select:hover {
  border-color: var(--c-line-strong);
}

.dg-grid .tabulator-header-filter input:focus,
.dg-grid .tabulator-header-filter select:focus {
  border-color: var(--c-focus-color);
  box-shadow: var(--c-focus-ring);
}

.dg-grid select.dg-state-filter {
  cursor: pointer;
}

/* ------------------------------------------------------------------ rows */

.dg-grid .tabulator-table {
  background: transparent;
}

.dg-grid .tabulator-row {
  min-height: 54px;
  background: var(--c-surface) !important;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink);
}

.dg-grid .tabulator-row:last-child {
  border-bottom: 0;
}

.dg-grid .tabulator-row:hover {
  background: var(--c-surface-hover) !important;
}

.dg-grid .tabulator-row .tabulator-cell {
  padding: 10px 14px;
  border-right: 0;
  line-height: 1.45;
  vertical-align: middle;
  white-space: normal;
  overflow: hidden;
  /* Tabulator sets display:inline-flex on every cell; let its direct content
     wrap so the badge/sub and value/sub pairs stack like .c-table rows. */
  flex-wrap: wrap;
  align-content: center;
}

.dg-grid .tabulator-row .tabulator-cell > .dg-device,
.dg-grid .tabulator-row .tabulator-cell > .dg-state,
.dg-grid .tabulator-row .tabulator-cell > .dg-mining,
.dg-grid .tabulator-row .tabulator-cell > .dg-schedule,
.dg-grid .tabulator-row .tabulator-cell > .dg-cost,
.dg-grid .tabulator-row .tabulator-cell > .dg-sub,
.dg-grid .tabulator-row .tabulator-cell > .dg-sub-inline,
.dg-grid .tabulator-row .tabulator-cell > .dg-ops {
  flex: 1 0 100%;
  min-width: 0;
}

.dg-grid .tabulator-row .tabulator-cell:last-child {
  border-right: 0;
}

.dg-grid .tabulator-cell.dg-ops-cell {
  padding-top: 9px;
  padding-bottom: 9px;
  overflow: visible;
}

.dg-grid .tabulator-cell.dg-cell-cost {
  font-variant-numeric: tabular-nums;
}

.dg-grid .tabulator-row.dg-row-parent {
  background: var(--c-surface-muted) !important;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.dg-grid .tabulator-row.dg-row-parent:hover {
  background: var(--c-surface-hover) !important;
}

.dg-grid .tabulator-row.dg-row-child {
  background: var(--c-surface) !important;
}

.dg-grid .tabulator-row.dg-row-child:hover {
  background: var(--c-surface-hover) !important;
}

.dg-grid .tabulator-row.dg-row-inactive {
  background: var(--c-surface-muted) !important;
}

.dg-grid .tabulator-row.dg-row-inactive .tabulator-cell:not(.dg-ops-cell) {
  opacity: 0.62;
}

.dg-grid .tabulator-row.dg-row-gpu-off .tabulator-cell:not(.dg-ops-cell) {
  opacity: 0.45;
  filter: grayscale(0.75);
}

.dg-grid .tabulator-row.dg-row-gpu-off.dg-row-inactive .tabulator-cell:not(.dg-ops-cell) {
  opacity: 0.38;
}

.dg-grid .tabulator-row.tabulator-selected {
  background: var(--c-accent-soft) !important;
}

.dg-grid .tabulator-row.tabulator-selected:hover {
  background: var(--c-accent-soft) !important;
}

/* --------------------------------------------------------------- content */

.dg-device,
.dg-state,
.dg-mining,
.dg-schedule,
.dg-cost {
  min-width: 0;
}

.dg-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--c-ink);
  font-weight: 650;
  line-height: 1.4;
}

.dg-name-text {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dg-slot {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 1px 7px;
  border: 1px solid var(--c-accent-line);
  border-radius: var(--c-radius-sm);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: var(--c-text-xs);
  font-weight: 650;
  line-height: 1.45;
  white-space: nowrap;
}

.dg-sub {
  margin-top: 3px;
  color: var(--c-muted);
  font-size: var(--c-text-xs);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dg-sub-inline {
  color: var(--c-muted);
  font-size: var(--c-text-xs);
}

.dg-mono {
  font-family: var(--c-font-mono);
  font-variant-numeric: tabular-nums;
}

.dg-mining-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.dg-today {
  color: var(--c-online);
  font-size: var(--c-text-xs);
  white-space: nowrap;
}

.dg-cost {
  color: var(--c-ink);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.dg-schedule .dg-badge {
  margin-bottom: 3px;
}

/* ---------------------------------------------------------------- badges */

.dg-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid var(--c-neutral-line);
  border-radius: var(--c-radius-pill);
  background: var(--c-neutral-soft);
  color: var(--c-neutral);
  font-size: var(--c-text-xs);
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
  vertical-align: middle;
}

.dg-badge--success {
  border-color: var(--c-online-line);
  background: var(--c-online-soft);
  color: var(--c-online);
}

.dg-badge--warning {
  border-color: var(--c-warning-line);
  background: var(--c-warning-soft);
  color: var(--c-warning);
}

.dg-badge--danger {
  border-color: var(--c-danger-line);
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

.dg-badge--neutral {
  border-color: var(--c-neutral-line);
  background: var(--c-neutral-soft);
  color: var(--c-neutral);
}

.dg-badge--info {
  border-color: var(--c-info-line);
  background: var(--c-info-soft);
  color: var(--c-info);
}

.dg-badge--coin {
  border-color: var(--c-line);
  border-radius: var(--c-radius-sm);
  background: var(--c-surface-muted);
  color: var(--c-muted);
  font-family: var(--c-font-mono);
  font-size: var(--c-text-xs);
  letter-spacing: 0.01em;
}

.dg-dot {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--c-neutral);
}

.dg-dot--on {
  background: var(--c-online);
  box-shadow: 0 0 0 2px var(--c-online-soft);
}

.dg-dot--warn {
  background: var(--c-warning);
}

.dg-dot--bad {
  background: var(--c-danger);
}

/* ------------------------------------------------------------------- ops */

.dg-ops {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 30px;
}

.dg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--c-radius-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--c-text-sm);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s, border-color .16s, color .16s, box-shadow .16s;
}

.dg-btn:hover {
  background: var(--c-surface-hover);
  border-color: var(--c-line-strong);
  color: var(--c-ink);
  box-shadow: var(--c-shadow-sm);
}

.dg-btn:active {
  transform: translateY(1px);
}

.dg-btn:focus-visible {
  outline: 3px solid var(--c-focus-color);
  outline-offset: 2px;
}

.dg-btn[disabled],
.dg-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.dg-btn i {
  font-size: 14px;
  line-height: 1;
}

.dg-btn--start {
  border-color: var(--c-accent-line);
  background: var(--c-accent-soft);
  color: var(--c-accent-strong);
}

.dg-btn--start:hover {
  border-color: var(--c-accent-line);
  background: var(--c-accent-line);
  color: var(--c-accent-strong);
}

.dg-btn--stop {
  border-color: var(--c-danger-line);
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

.dg-btn--stop:hover {
  border-color: var(--c-danger-line);
  background: var(--c-danger-soft);
  color: var(--c-danger-strong);
}

.dg-btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--c-muted);
  box-shadow: none;
}

.dg-btn--ghost:hover {
  border-color: transparent;
  background: var(--c-surface-muted);
  color: var(--c-ink);
  box-shadow: none;
}

.dg-btn--danger-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--c-danger);
  box-shadow: none;
}

.dg-btn--danger-ghost:hover {
  border-color: transparent;
  background: var(--c-danger-soft);
  color: var(--c-danger-strong);
  box-shadow: none;
}

.dg-btn--icon {
  width: 30px;
  padding-inline: 0;
}

.dg-switch {
  position: relative;
  width: 28px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: var(--c-radius-pill);
  background: var(--c-line-strong);
  transition: background-color .16s;
}

.dg-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: var(--c-shadow-sm);
  transition: transform .16s;
}

.dg-switch--on {
  background: var(--c-accent);
}

.dg-switch--on::after {
  transform: translateX(12px);
}

.dg-caret {
  transition: transform .16s;
}

.dg-tree-btn--open .dg-caret {
  transform: rotate(90deg);
}

.dg-grid .tabulator-data-tree-control,
.dg-grid .tabulator-data-tree-branch {
  display: none;
}

.dg-grid .tabulator-row.dg-row-child .tabulator-cell.dg-cell-device {
  padding-left: 30px;
}

.dg-grid .tabulator-placeholder-contents {
  padding: var(--c-space-6) var(--c-space-4);
  color: var(--c-muted);
  font-size: var(--c-text-md);
  text-align: center;
}

.dg-grid .tabulator-row,
.dg-grid .tabulator-cell {
  box-sizing: border-box;
}

.dg-missing {
  padding: var(--c-space-5) var(--c-space-4);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--c-radius);
  background: var(--c-surface-muted);
  color: var(--c-muted);
  font-size: var(--c-text-md);
  text-align: center;
}

.dg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- toolbar */

.dg-toolbar {
  margin: 0 0 var(--c-space-3);
}

.dg-toolbar .c-field-control,
.dg-toolbar input,
.dg-toolbar select {
  height: 34px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--c-radius-sm);
  background: var(--c-surface);
  color: var(--c-ink);
  font: inherit;
  font-size: var(--c-text-sm);
  line-height: 1.35;
  box-sizing: border-box;
}

.dg-toolbar input:focus,
.dg-toolbar select:focus {
  border-color: var(--c-focus-color);
  box-shadow: var(--c-focus-ring);
  outline: none;
}

.dg-toolbar-search {
  width: min(100%, 260px) !important;
}

.dg-toolbar-select {
  width: auto !important;
  min-width: 140px;
  cursor: pointer;
}

.dg-toolbar-count {
  margin-left: auto;
  color: var(--c-muted);
  font-size: var(--c-text-xs);
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .dg-toolbar-search { width: 100% !important; }
  .dg-toolbar-count { margin-left: 0; }
}

/* When the grid sits directly under a Tabler .card (home keeps tables
 * full-bleed), align the external toolbar with the card header. */
.card > .dg-toolbar {
  padding: 12px var(--c-space-4) 0;
  margin-bottom: var(--c-space-3);
}

@media (max-width: 575.98px) {
  .card > .dg-toolbar { padding: 10px var(--c-space-4) 0; }
}