/* Shared section styles (tables/headers).
   Consolidates legacy RadioTableSection.css and shared section header action styling. */

.radioTableSectionContainer {
	background: var(--color-background-3);
	padding: 15px;
}

.radioTableSection {
	border-spacing: 4px;
	border-collapse: separate;
	width: 100%;
}

.radioTableSection td {
	padding: 15px;
	border-radius: 3px;
	min-width: 30px;
	font-size: 1.1em;
	line-height: 140%;
	color: var(--text-color);
}

.radioTableSection tr:nth-child(even) td {
	background: var(--color-background-4);
}

.radioTableSection tr:nth-child(odd) td {
	background: var(--color-background-3);
}

.radioTableSection th {
	font-weight: normal;
	background: var(--color-background-3);
	color: var(--text-color);
}

.radioTableSectionTitle {
	color: var(--text-color);
	font-size: 1.3em;
	padding-top: 20px;
	font-weight: bold;
}

.radioTableSectionTitle:first-child {
	padding-top: 0 !important;
}

.radioTableSectionRadio {
	height: 1rem;
	width: 1rem;
	margin-right: 0.375rem;
	accent-color: var(--color-primary-3);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	border: 0.15rem solid var(--color-background-light);
	background-color: var(--color-background-light);
	border-radius: 50%;
	outline: 1px solid var(--color-neutral-2);
	border-width: 0.15rem;
	box-shadow: var(--box-shadow);
}

.radioTableSectionRadio:hover {
	outline-color: var(--color-primary-4);
	box-shadow: var(--box-shadow-fade1);
}

.radioTableSectionRadio:checked {
	background-color: var(--color-primary-4);
	outline-color: var(--color-primary-4);
	box-shadow: var(--box-shadow-fade1);
}

/* TableSection header actions (e.g., embedded table Add button) */
.boxLabel.sectionHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* TableSection layout: allow embedded DataTables to fill the section height */
.boxForm.tableSection {
	display: flex;
	flex-direction: column;
	padding-bottom: 0;
}

.boxForm.tableSection .tableSectionBody {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.boxForm.tableSection .dataTables_wrapper {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.boxForm.tableSection .dataTables_length,
.boxForm.tableSection .dataTables_filter,
.boxForm.tableSection .dataTables_info,
.boxForm.tableSection .dataTables_paginate {
	flex: 0 0 auto;
	margin-bottom: 0;
}

.boxForm.tableSection .dataTables_scroll {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.boxForm.tableSection .dataTables_scrollBody {
	flex: 1 1 auto;
	min-height: 0;
	background: var(--color-background-4);
}

.boxLabel.sectionHeader .sectionHeaderActions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.boxLabel.sectionHeader .sectionHeaderButton {
	display: inline-block;
	text-decoration: none;
	padding: 4px 10px;
	border-radius: 3px;
	color: var(--text-color-light);
	font-size: 0.85em;
	line-height: 1.2;
}

.boxLabel.sectionHeader .sectionHeaderButton i {
	margin-right: 5px;
}

.boxLabel.sectionHeader .sectionHeaderButton:hover,
.boxLabel.sectionHeader .sectionHeaderButton:focus {
	background: var(--color-primary-4);
}

/* Sub-label displayed under boxLabel for additional context */
.boxSubLabel {
	padding:15px 20px 0 20px;
	font-size: 1.2em;
}

/* Read-only view value container used by Control::renderView() */
.boxView {
	padding: 5px 10px;
}

/* Form message container and message styles */
.formMessageCont {
	display: flex;
 	flex-direction: column;
 	gap: 8px;
 	margin: 12px 0;
}

/* Default form message uses the neutral palette */
.formMessage {
 	background: var(--color-neutral-3);
 	color: var(--color-on-neutral);
 	padding: 10px 12px;
 	border-radius: var(--border-radius-small);
 	box-shadow: var(--box-shadow-fade1);
}

/* Specific message types */
.formMessageError {
 	background: var(--color-error-3);
 	color: var(--color-on-error);
 	padding: 10px 12px;
 	border-radius: var(--border-radius-small);
 	box-shadow: var(--box-shadow-fade1);
}

.formMessageCaution {
 	background: var(--color-caution-3);
 	color: var(--color-on-caution);
 	padding: 10px 12px;
 	border-radius: var(--border-radius-small);
 	box-shadow: var(--box-shadow-fade1);
}

.formMessageSuccess {
 	background: var(--color-success-3);
 	color: var(--color-on-success);
 	padding: 10px 12px;
 	border-radius: var(--border-radius-small);
 	box-shadow: var(--box-shadow-fade1);
}

/* Icon spacing inside form messages */
.formMessageCont .formMessageSuccess i,
.formMessageCont .formMessageError i,
.formMessageCont .formMessageCaution i,
.formMessageCont .formMessage i {
 	margin-right: 8px;
 	vertical-align: middle;
}