@charset "utf-8";

.scope-table-root {
	max-height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.scope-table-container {
	overflow: hidden;
	border-width: 0px;
	border-color: #aaa;
	border-style: solid;
}

.scope-table-row {
	display: flex;
	flex-direction: row;
}

.scope-table-cell {
	position: relative;
	border-color: #aaa;
	border-style: solid;
	border-width: 0px 1px 1px 0px;
	flex-shrink: 0;
	overflow: hidden;
	background-color: #fff;
}

.scope-table-column-no-grow-spacing {
	position: relative;
	width: 0px;
	flex-grow: 1;
    flex-shrink: 0;
}

.scope-table-full-width-cell {
	width: 0px;
	flex-grow: 1;
	flex-shrink: 0;
}

/* group rows reuse the data-row colour classes (cell td) -> theme + state-0..9 + selected
   come for free. To set them apart they get a flat 10% dark overlay via an inset shadow:
   it darkens whatever background is behind (transparent/state/selected, bright/dark) without
   redefining a single colour, and the text stays crisp (shadow paints under the content). */
.scope-table-group-cell,
.scope-table-group-gutter {
	box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.10);
}
.scope-table-group-cell {
	box-sizing: border-box;
	padding: 4px 2px;
	font-weight: bold;
}

/* per-line selection gutter in tiles view: clickable handle that toggles the line's tiles.
   keeps the default .scope-table-cell borders + .td theme background so it matches the
   data-row gutter in both bright and dark mode. */
.scope-table-tile-gutter {
	cursor: pointer;
}

.scope-table-full-width-row.selectable .scope-table-cell {
	cursor: pointer;
}

/* tiles: one ScopeTable row = one line of tiles; tile colours come from the reused .td theme,
   the line itself is transparent so the themed container background shows through */
.scope-table-tile-line {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;   /* partial lines keep tiles left-aligned, empty space right */
	align-items: stretch;
	box-sizing: border-box;
	padding: 4px;
	gap: 4px;
	background: transparent;
	border-width: 0px 0px 1px 0px;   /* bottom border separates rows (and groups from rows above) */
}

.scope-table-tile {
	box-sizing: border-box;
	flex: 0 0 auto;   /* fixed width set inline (tileWidth); never grows/shrinks */
	overflow: hidden;
	padding: 6px;
	border: 1px solid #aaa;
	border-radius: 4px;
	cursor: pointer;
}

.scope-table-cell:last-child {
	border-right-width: 0px;
}

.scope-table-row:last-child .scope-table-cell{
	border-bottom-width: 0px;
}

.scope-table-layout-top,
.scope-table-layout-middle,
.scope-table-layout-bottom {
	display: flex;
	flex-direction: row;
}

.scope-table-layout-middle {
	flex-grow: 1;
	min-height: 0px;
}

.scope-table-middle-left,
.scope-table-middle-right {
	flex-shrink: 0;
	z-index: 2;
	border-width: 1px 0;
}

.scope-table-top-left,
.scope-table-top-right,
.scope-table-bottom-left,
.scope-table-bottom-right {
	flex-shrink: 0;
	z-index: 3;
}

.scope-table-top-center,
.scope-table-middle-center,
.scope-table-bottom-center {
	flex-grow: 1;
	z-index: 1;
}

.scope-table-middle-center {
	border-width: 1px;
}

.scope-table-top-center,
.scope-table-bottom-center {
	border-width: 0 1px;
}

.scope-table-top-spacing,
.scope-table-bottom-spacing {
	background: repeating-linear-gradient(-30deg, rgba(0, 0, 0, 0.05) 0px, rgba(0, 0, 0, 0.05) 4px, rgba(255, 255, 255, 0.0) 5px, rgba(255, 255, 255, 0.0) 8px);
}

.scope-table-column-resize-hit-zone {
	position: absolute;
	cursor: col-resize;
	width: 4px;
	height: 100%;
	right: 0px;
	top: 0px;
}

.scope-table-column-resize-hit-zone:hover {
	background-color: #68f4;
}

.scope-table-column-resize-handle {
	position: absolute;
	background-color: #68ff;
	width: 5px;
	margin-left: -2px;
	z-index: 4;
}