/* ========================================
   @conduction/nextcloud-vue — Table Styles
   ======================================== */

/* Table Container */
.cn-table-container {
	background: var(--color-main-background);
	border-radius: var(--border-radius);
	box-shadow: 0 2px 4px var(--color-box-shadow);
	border: 1px solid var(--color-border);
	margin-bottom: calc(5 * var(--default-grid-baseline));
}

/* Horizontal scroll for wide tables lives HERE, not on `.cn-table-container`.
   `overflow-x: auto` on the container coerces its `overflow-y` from `visible`
   to `auto` (CSS forbids mixing `visible` with a non-visible value), which
   silently turns the container into the nearest scrollport. The sticky footer
   below then anchors to a container that never scrolls, so "View all" scrolled
   out of view with the rows instead of pinning to the bottom of the enclosing
   widget card. Keeping the overflow on an inner wrapper leaves the container
   transparent to scrolling, so the footer sticks to whichever ancestor really
   scrolls. */
.cn-data-table__scroll {
	overflow-x: auto;
}

.cn-table-container.cn-table-container--scrollable {
	max-height: 400px;
	overflow-y: auto;
}

/* Borderless: drop the card chrome so the table sits flush inside a parent that
   already provides a card (e.g. a CnWidgetWrapper dashboard slot). Folded in
   from the retired CnTableWidget. */
.cn-table-container.cn-table-container--borderless {
	border: none;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	margin-bottom: 0;
}

/* Fill: grow to the full height of a flex-column card/widget content area and
   push the footer to the bottom (via `margin-top: auto`) instead of letting it
   float directly under a short list. When the list overflows, the container
   grows past the parent and the sticky footer keeps it pinned. No-op when the
   parent has no constrained height. */
.cn-table-container.cn-table-container--fill {
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

/* Optional card header + "View all" footer (folded from CnTableWidget). */
.cn-data-table__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--color-border);
}

.cn-data-table__title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}

.cn-data-table__count {
	font-size: 12px;
	color: var(--color-text-maxcontrast);
	background: var(--color-background-dark);
	padding: 2px 8px;
	border-radius: 10px;
}

.cn-data-table__footer {
	padding: 8px 16px;
	border-top: 1px solid var(--color-border);
	text-align: center;
	/* Keep the footer (e.g. "+ New" / "View all") pinned to the bottom of the
	   scroll region so it stays reachable while a long list scrolls. Sticks to
	   whichever ancestor scrolls — the container's own `--scrollable` region
	   (max-height 400) or the enclosing widget card's content area. The opaque
	   background stops scrolling rows from showing through behind it. */
	position: sticky;
	bottom: 0;
	background: var(--color-main-background);
}

/* Must follow the base `.cn-data-table__footer` rule above: it is the more
   specific selector, and stylelint's no-descending-specificity forbids the
   reverse order. Pushes the footer to the bottom of a `--fill` container
   (see the flex-column block near the top of this file). */
.cn-table-container--fill .cn-data-table__footer {
	margin-top: auto;
}

.cn-data-table__view-all {
	font-size: 13px;
	color: var(--color-primary-element);
	cursor: pointer;
	text-decoration: none;
}

.cn-data-table__view-all:hover {
	text-decoration: underline;
}

/* Base Table */
.cn-data-table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--color-main-background);
}

.cn-data-table th,
.cn-data-table td {
	padding: calc(3 * var(--default-grid-baseline));
	text-align: left;
	border-bottom: 1px solid var(--color-border);
	vertical-align: middle;
}

/* Opt-in fixed layout (CnDataTable's `fixedLayout` prop).

   Under the default `table-layout: auto` a column's declared `width` is only a
   hint: the browser sizes columns from their content, so one long unbreakable
   value (a PHP FQCN, a UUID) widens its own column, and any column left unsized
   soaks up every remaining pixel. `fixed` makes the declared widths
   authoritative and splits what is left between the unsized columns.

   `overflow-wrap: anywhere` is the necessary companion: with the column width
   no longer negotiable, content that does not fit would otherwise paint past
   the cell box and collide with the next column. Breaking mid-word keeps it
   inside. Cells opting into `white-space: nowrap` (e.g. `cn-cell--end`) still
   win, since that rule is more specific. */
.cn-data-table--fixed {
	table-layout: fixed;
}

.cn-data-table--fixed th,
.cn-data-table--fixed td {
	overflow-wrap: anywhere;
}

/* `overflow-wrap` on the cell is not enough on its own. CnCellRenderer wraps
   every value in an INLINE span, whose box is sized by its own content rather
   than by the cell, so a long unbreakable value (a URL, a PHP FQCN) makes the
   span measurably wider than its `td` and paints over the next column —
   exactly the overlap fixed layout was meant to end. Promoting the wrapper to
   a block gives it the column's width, which is what the inherited
   `overflow-wrap` needs to break against. `min-width: 0` stops it floor-ing at
   its min-content size. */
.cn-data-table--fixed td > .cn-cell-renderer {
	display: block;
	min-width: 0;
}

.cn-data-table th {
	background: var(--color-background-dark);
	font-weight: 500;
	color: var(--color-text-maxcontrast);
}

/* Reusable cell utilities — set on a column's `cellClass`. Handy for compact
   list widgets (name + trailing status) that use `hideHeader`. */
.cn-data-table td.cn-cell--strong {
	font-weight: 500;
}

.cn-data-table td.cn-cell--muted {
	color: var(--color-text-maxcontrast);
}

.cn-data-table td.cn-cell--end {
	text-align: right;
	white-space: nowrap;
}

/* Single-line cell with a trailing ellipsis. For a value that is one long
   unbreakable token — a URL, a fully-qualified class name — where wrapping is
   worse than clipping: `overflow-wrap` would break it mid-token across three
   lines and make every row that tall. The full text stays reachable through
   the `title` tooltip CnCellRenderer already sets on the value.

   The inner rule is the one that actually clips. `text-overflow` on a
   `display: table-cell` box is unreliable, so the constraint is placed on
   CnCellRenderer's own wrapper span, promoted to a block so it takes the
   cell's width. Pair with `fixedLayout`, which is what gives the column a
   width worth clipping against. */
.cn-data-table td.cn-cell--truncate {
	overflow: hidden;
	white-space: nowrap;
}

.cn-data-table td.cn-cell--truncate > .cn-cell-renderer {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cn-data-table th.cn-table-header--sortable {
	cursor: pointer;
	user-select: none;
	transition: background-color var(--animation-quick) ease;
}

.cn-data-table th.cn-table-header--sortable:hover {
	background-color: var(--color-background-hover);
}

.cn-table-sort-indicator {
	margin-left: var(--default-grid-baseline);
	opacity: 0.6;
}

/* A column carrying a `description` gets a dotted underline — the long-standing
   convention for "there is an explanation here". Without it the tooltip is
   undiscoverable: nobody hovers a header that gives no sign of having more to
   say. `help` on the cursor rather than `pointer`, since hovering explains
   rather than navigates; a sortable column keeps its own pointer cursor on the
   th, which wins because it is the element actually being clicked. */
.cn-table-header--described {
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	text-decoration-color: var(--color-text-maxcontrast);
	cursor: help;
}

.cn-data-table th.cn-table-header--sortable:focus-visible {
	outline: 2px solid var(--color-main-text);
	outline-offset: -2px;
}

/* Multi-column sort priority badge (1, 2, 3) — only rendered once more than
   one sort key is active; a single active sort shows the arrow alone. */
.cn-table-sort-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 14px;
	height: 14px;
	margin-left: 2px;
	padding: 0 3px;
	border-radius: 7px;
	background-color: var(--color-primary-element);
	color: var(--color-primary-element-text);
	font-size: 10px;
	line-height: 14px;
	font-weight: bold;
	vertical-align: middle;
}

/* Row States */
.cn-table-row {
	border-bottom: 1px solid var(--color-border);
	cursor: pointer;
	transition: background-color var(--animation-quick) ease;
}

.cn-table-row:hover {
	background: var(--color-background-hover);
}

.cn-table-row--selected {
	background-color: var(--color-primary-light);
	box-shadow: inset 3px 0 0 0 var(--color-primary);
}

.cn-table-row--selected:hover {
	background-color: var(--color-primary-light);
}

/* Column Types */
.cn-table-col--checkbox {
	width: 50px;
	text-align: center;
}

.cn-table-col--icon {
	width: 40px;
	padding-right: 0;
	text-align: center;
	color: var(--color-text-maxcontrast);
}

.cn-table-col--icon .material-design-icon {
	display: inline-flex;
}

.cn-table-col--actions {
	width: 120px;
	text-align: center;
	min-width: 120px;
}

.cn-table-col--constrained {
	width: 150px;
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cn-table-col--expanded {
	width: auto;
	min-width: 200px;
}

.cn-table-col--title {
	min-width: 120px;
	max-width: 200px;
	word-wrap: break-word;
	overflow: hidden;
}

/* Loading State */
.cn-table-loading {
	text-align: center;
	padding: calc(12 * var(--default-grid-baseline));
}

.cn-table-loading p {
	margin-top: calc(5 * var(--default-grid-baseline));
	color: var(--color-text-maxcontrast);
}

/* Empty State (inside table) */
.cn-table-empty td {
	text-align: center;
	padding: calc(12 * var(--default-grid-baseline)) calc(6 * var(--default-grid-baseline));
	color: var(--color-text-maxcontrast);
}

/* ========================================
   Backwards compatibility aliases
   (legacy OpenRegister CSS class names)
   ======================================== */
.viewTableContainer { background: var(--color-main-background); border-radius: var(--border-radius); overflow-x: hidden; overflow-y: visible; box-shadow: 0 2px 4px var(--color-box-shadow); border: 1px solid var(--color-border); margin-bottom: calc(5 * var(--default-grid-baseline)); }
.viewTableContainer.scrollable { max-height: 400px; overflow-y: auto; }
.viewTable { width: 100%; border-collapse: collapse; background-color: var(--color-main-background); }
.viewTable th, .viewTable td { padding: calc(3 * var(--default-grid-baseline)); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.viewTable th { background: var(--color-background-hover); font-weight: 500; color: var(--color-text-maxcontrast); background-color: var(--color-background-dark); }
.viewTableRow { border-bottom: 1px solid var(--color-border); cursor: pointer; transition: background-color var(--animation-quick) ease; }
.viewTableRow:hover { background: var(--color-background-hover); }
.viewTableRow.active, .viewTableRowSelected { background: var(--color-primary-light); }
.tableColumnCheckbox { width: 50px; text-align: center; }
.tableColumnActions { width: 120px; text-align: center; min-width: 120px; }
.tableColumnConstrained { width: 150px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tableColumnExpanded { width: auto; min-width: 200px; }
.tableColumnTitle { min-width: 120px; max-width: 200px; word-wrap: break-word; overflow: hidden; }