/*
 * document-table — live's Document Library Pro table, without DataTables.
 *
 * Measured on live at 1440 and 390 (2026-09-28) and read from DLP's and
 * DataTables' stylesheets: controls 32px high, Select2-style selects (#aaa,
 * 4px corners, a grey caret), the search field grey and borderless, cells at
 * 0.9em with 8px/10px padding and Hello's zebra and rules (base.css), a
 * ▲▼ pair on the sortable Title, and DataTables' page buttons.
 */

.doc-table {
	margin-top: 1.6em;
	margin-bottom: 2.6em;
	max-width: 100%;
}

/* --- Controls, above and below --- */

.doc-table__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	margin: 0;
}

.doc-table__controls--above {
	margin-bottom: 4px;
	padding-bottom: 24px;
}

.doc-table__controls--below {
	margin-top: 10px;
	padding-top: 24px;
}

.doc-table__controls > * {
	margin: 0 0 8px 25px;
}

.doc-table__controls > :first-child {
	margin-left: 0;
	margin-right: auto;
}

.doc-table__controls label {
	display: inline-block;
	margin: 0;
	font-weight: 400;
	line-height: inherit;
	vertical-align: baseline;
}

.doc-table__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 100%;
	margin-bottom: 6px;
}

/* Select2's look, on a native select. Select2 drew its box 19px wider than
   the longest option; the extra right padding keeps that width. */
.doc-table__select {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: 32px;
	margin: 3px 6px 3px 0;
	padding: 0 39px 0 8px;
	border: 1px solid #aaa;
	border-radius: 4px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 12px center;
	color: #444;
	font-size: inherit;
	line-height: 30px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.doc-table__length .doc-table__select {
	margin: 0 2px;
	padding-right: 20px;
	background-position: right 8px center;
}

.doc-table__reset {
	display: inline-block;
	position: relative;
	top: 1px;
	margin-left: 10px;
	text-decoration: none;
}

.doc-table__reset::before {
	content: "↺";
	margin-right: 6px;
	font-size: 0.85em;
}

.doc-table__search input[type="search"] {
	display: inline-block;
	width: auto;
	height: 32px;
	margin: 0 0 0 6px;
	padding: 0 0.5em;
	border: 0;
	border-radius: 3px;
	background: #f2f2f2;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.125);
	color: #43454b;
	font-size: inherit;
	line-height: normal;
	-webkit-appearance: none;
}

/* --- The table --- */

.doc-table__table {
	margin-bottom: 0;
	word-break: normal;
}

.doc-table__table th,
.doc-table__table td {
	text-align: left;
	vertical-align: top;
}

.doc-table__table th {
	position: relative;
	padding: 10px 18px 10px 10px;
	border-bottom-color: rgba(0, 0, 0, 0.3);
	line-height: 1.45;
}

.doc-table__table td {
	padding: 8px 10px;
}

/* Rows alternate by class, not :nth-child, so the phone's details rows
   do not break the stripe. */
.doc-table__table tbody > tr > td {
	background-color: transparent;
}

.doc-table__table tbody > tr.odd > td {
	background-color: var(--cccarchives-table-zebra);
}

.doc-table__table tbody > tr:hover > td {
	background-color: var(--cccarchives-table-hover);
}

.doc-table__table td > :first-child {
	margin-top: 0;
}

.doc-table__table td > :last-child {
	margin-bottom: 0;
}

.doc-table__table a {
	text-decoration: none;
}

/* The sortable Title: ▲ over ▼, the active one darker. */
.doc-table__table th.is-sortable {
	padding-right: 26px;
}

.doc-table__table th.is-sortable a {
	color: inherit;
	text-decoration: none;
}

.doc-table__table th.is-sortable a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.doc-table__table th.is-sortable::before,
.doc-table__table th.is-sortable::after {
	position: absolute;
	right: 10px;
	display: block;
	font-size: 0.8em;
	line-height: 9px;
	opacity: 0.125;
}

.doc-table__table th.is-sortable::before {
	content: "▲" / "";
	bottom: 50%;
}

.doc-table__table th.is-sortable::after {
	content: "▼" / "";
	top: 50%;
}

.doc-table__table th.is-sorted-asc::before,
.doc-table__table th.is-sorted-desc::after {
	opacity: 0.6;
}

/* Inline, as live's was (inside a link): the line's descender under the
   picture is part of every row's height there, 124px, not 117px. */
.col-image img {
	display: inline;
	width: 100px;
	height: 100px;
	max-width: none;
	object-fit: cover;
	vertical-align: baseline;
}

.doc-table__empty {
	text-align: center !important;
}

/* --- Page length, count, pages --- */

.doc-table__info {
	white-space: nowrap;
}

.doc-table__pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.doc-table__page {
	display: inline-block;
	min-width: 1.5em;
	margin-left: 2px;
	padding: 0.2em 0.7em;
	border: 1px solid transparent;
	border-radius: 2px;
	color: inherit;
	text-align: center;
	text-decoration: none;
}

a.doc-table__page:hover,
a.doc-table__page:focus {
	border-color: #111;
	background: linear-gradient(to bottom, #585858 0%, #111 100%);
	color: #fff;
	text-decoration: none;
}

.doc-table__page.is-current {
	border-color: rgba(0, 0, 0, 0.3);
	background: linear-gradient(to bottom, rgba(230, 230, 230, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
}

.doc-table__ellipsis {
	padding: 0 1em;
}

/* --- Details rows (phones) --- */

.doc-table__toggle,
.doc-table__details {
	display: none;
}

.doc-table__details ul {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.doc-table__details li {
	display: flex;
	flex-wrap: wrap;
	align-content: stretch;
	padding: 14px 0 8px;
	border-bottom: 1px solid #efefef;
}

.doc-table__details li:first-child {
	padding-top: 0;
}

.doc-table__details li:last-child {
	border-bottom: 0;
}

.doc-table__label {
	flex: 0 1 80px;
	margin: 0 15px 4px 0;
	font-weight: 700;
}

.doc-table__value {
	flex: 1 1 auto;
}

@media (max-width: 767px) {
	.doc-table__controls {
		justify-content: flex-start;
	}

	/* Stacked, flush left, as live's were on a phone. */
	.doc-table__controls > * {
		margin-left: 0;
	}

	.doc-table__table th:not(.col-title):not(.col-image),
	.doc-table__table tr:not(.doc-table__details) > td:not(.col-title):not(.col-image) {
		display: none;
	}

	.doc-table__details {
		display: table-row;
	}

	/* With JavaScript, details open one row at a time under the "+". */
	.doc-table.is-enhanced .doc-table__details:not(.is-open) {
		display: none;
	}

	.doc-table.is-enhanced td.col-title {
		position: relative;
		padding-left: 32px;
	}

	.doc-table.is-enhanced .doc-table__toggle {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 32px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
		color: #377837;
		font-size: 1.1em;
		font-weight: 700;
		line-height: 1;
	}

	.doc-table.is-enhanced .doc-table__toggle::before {
		content: "+";
	}

	.doc-table.is-enhanced .doc-table__toggle[aria-expanded="true"] {
		color: #bd3737;
	}

	.doc-table.is-enhanced .doc-table__toggle[aria-expanded="true"]::before {
		content: "−";
	}

	.doc-table__toggle:hover,
	.doc-table__toggle:focus {
		background: none !important;
		border: 0 !important;
	}
}