/* Schedule history geometry, shared by product grids. */
:root {
  --tru-grid-row-padding: .35rem;
  --tru-grid-column-padding: .45rem;
  --tru-grid-line-height: 1.25;
  --tru-grid-font-size: 1rem;
  --tru-grid-section-gap: 1rem;
  --tru-grid-row-gap: .25rem;
  --tru-grid-title-size: 1.45rem;
  --tru-tab-gap: .35rem;
  --tru-tab-block-padding: .65rem;
  --tru-tab-inline-padding: .9rem;
  --tru-tab-radius: .15rem;
}
:is(.tru-tabs, app-root.flow-app [flowTabs]) { display: flex; flex-wrap: wrap; gap: var(--tru-tab-gap); padding: .35rem 0; margin-inline: 0; }
:is(.tru-tabs, app-root.flow-app [flowTabs]) > button {
  position: relative; flex: 0 0 auto; margin-inline: 0;
  padding: var(--tru-tab-block-padding) var(--tru-tab-inline-padding);
  border: 1px solid var(--fg); border-bottom-color: transparent; border-radius: var(--tru-tab-radius);
  background: var(--fg); color: var(--bg); font: inherit; font-weight: 700; line-height: 1.3; text-decoration: none;
}
:is(.tru-tabs, app-root.flow-app [flowTabs]) > button:is(.active, [aria-selected="true"], :hover:not(:disabled)) { background: var(--bg); color: var(--fg); text-decoration: none; }
:is(.tru-tabs, app-root.flow-app [flowTabs]) > button:disabled { border-style: dashed; background: var(--bg); color: var(--fg); }
:is(.tru-tabs, app-root.flow-app [flowTabs]) > button * { color: inherit; }
.tru-tabs > button.tru-tab-connects::after { content: ''; position: absolute; inset-inline-start: 100%; bottom: 0; width: calc(var(--tru-tab-gap) + 1px); border-bottom: 1px solid var(--fg); pointer-events: none; }
:is(app-data-grid, .tru-data-grid) { display: block; min-width: 0; }
:is(app-data-grid, .tru-data-grid) .ai-grid-wrap { max-width: 100%; overflow-x: auto; }
:is(app-data-grid, .tru-data-grid) table.ai-grid {
  width: 100%; max-width: 100%; table-layout: fixed;
  border-collapse: separate; border-spacing: 0 var(--tru-grid-row-gap);
  text-align: left; font-size: var(--tru-grid-font-size);
}
:is(app-data-grid, .tru-data-grid) .ai-grid :is(th, td) {
  padding: var(--tru-grid-row-padding) var(--tru-grid-column-padding);
  border: 0; border-radius: 0; line-height: var(--tru-grid-line-height);
  white-space: normal; overflow-wrap: anywhere; vertical-align: top;
}
:is(app-data-grid, .tru-data-grid) .ai-grid :is(th, td):first-child { padding-inline-start: 0; }
:is(app-data-grid, .tru-data-grid) .ai-grid :is(th, td):last-child { padding-inline-end: 0; }
:is(app-data-grid, .tru-data-grid) .ai-grid th { color: var(--fg); background: var(--bg); font-weight: 600; }
:is(app-data-grid, .tru-data-grid) .ai-grid th button {
  display: inline-flex; justify-content: flex-start; text-align: left;
  max-width: 100%; min-width: 0; min-height: 32px; padding: 0;
  color: var(--fg); background: transparent; border: 0;
  font: inherit; font-weight: inherit; white-space: normal;
}
:is(app-data-grid, .tru-data-grid) .ai-grid th button:hover:not(:disabled) { color: var(--bg); background: var(--fg); }
:is(app-data-grid, .tru-data-grid) .ai-grid .grid-filters th { padding-top: 0; }
:is(app-data-grid, .tru-data-grid) .ai-grid .range-filter { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; }
:is(app-data-grid, .tru-data-grid) .ai-grid .grid-actions { text-align: right; }
:is(app-data-grid, .tru-data-grid) .ai-grid th.grid-actions { width: 8.5rem; }
:is(app-data-grid, .tru-data-grid) .ai-grid thead :is(input, select) {
  width: 100%; min-width: 0; max-width: 100%; min-height: 2rem;
  padding: var(--tru-grid-row-padding) var(--tru-grid-column-padding);
  font: inherit; font-weight: 400; line-height: var(--tru-grid-line-height);
  border: 1px solid var(--fg); border-radius: 0; color: var(--fg); background: var(--bg);
}
:is(app-data-grid, .tru-data-grid) .row-actions { display: flex; justify-content: flex-end; align-items: center; gap: .3rem; flex-wrap: wrap; }
:is(app-data-grid, .tru-data-grid) .ai-grid td button {
  color: var(--fg); background: var(--bg); border: 0;
  min-height: 32px; padding: .45rem .7rem; font: inherit; font-weight: 700;
  white-space: nowrap; overflow-wrap: normal; flex-shrink: 0;
}
:is(app-data-grid, .tru-data-grid) .ai-grid td button:hover:not(:disabled) { color: var(--bg); background: var(--fg); }
:is(app-data-grid, .tru-data-grid) .ai-grid .grid-delete {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: .35rem;
}
:is(app-data-grid, .tru-data-grid) .grid-delete svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; }
:is(app-data-grid, .tru-data-grid) .grid-paging {
  display: flex; justify-content: flex-end; align-items: center; gap: .6rem;
  flex-wrap: wrap; margin-top: 1rem; font-size: var(--tru-grid-font-size); line-height: var(--tru-grid-line-height);
}
:is(app-data-grid, .tru-data-grid) .grid-paging .grid-count { margin-inline-end: auto; }
:is(app-data-grid, .tru-data-grid) .grid-paging button { color: var(--fg); background: var(--bg); border: 1px solid transparent; border-radius: .15rem; padding: .45rem .7rem; font: inherit; }
:is(app-data-grid, .tru-data-grid) .grid-paging button:hover:not(:disabled) { color: var(--bg); background: var(--fg); }
:is(app-data-grid, .tru-data-grid) .grid-paging button:disabled { color: var(--fg); background: var(--bg); border: 1px dashed var(--fg); opacity: 1; }
:is(app-data-grid, .tru-data-grid) :is(button, input, select):focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
:is(app-data-grid, .tru-data-grid) .ai-grid td button:disabled { opacity: .6; cursor: not-allowed; }
@media (max-width: 600px) { :is(app-data-grid, .tru-data-grid) table.ai-grid { min-width: 32rem; } }