/*************** UHIN Global TablePress Styling ***************/
/* Base setup */
.tablepress {
	--ink: #1f2937; /* primary text */
	--muted: #6b7280; /* secondary text */
	--line: #e5e7eb; /* borders */
	--head: #f9fafb; /* header background */
	--hover: #f3f4f6; /* row hover background */
	--accent: #1c3d5a; /* UHIN navy tone */
	font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink);
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	background-color: #fff;
}

/* Table container */
.tablepress {
	border: 1px solid var(--line);
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

/* Header row */
.tablepress thead th {
	background-color: var(--head);
	color: var(--ink);
	font-weight: 600;
	text-align: left;
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
}

/* Body cells */
.tablepress tbody td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
	vertical-align: middle;
}

/* Zebra striping for readability */
.tablepress tbody tr:nth-child(even) {
	background-color: #fafbfc;
}

/* Hover effect */
.tablepress tbody tr:hover {
	background-color: var(--hover);
}

/* Remove bottom border on last row */
.tablepress tbody tr:last-child td {
	border-bottom: none;
}

/* Links inside tables */
.tablepress a {
	color: var(--accent);
	text-decoration: none;
}

.tablepress a:hover {
	text-decoration: underline;
}

/* Pagination and search (DataTables integration) */
.dt-container .dt-search input {
	font-family: inherit;
	font-size: 14px;
	padding: 6px 10px;
	border: 1px solid var(--line);
	border-radius: 4px;
	color: var(--ink);
	outline: none;
	transition: border-color .2s;
}

.dt-container .dt-search input:focus {
	border-color: var(--accent);
}

.dt-container .dt-paging a {
	color: var(--accent);
	font-size: 13px;
	padding: 4px 8px;
	border-radius: 4px;
	margin: 0 2px;
}

.dt-container .dt-paging a.current {
	background-color: var(--accent);
	color: #fff !important;
}

.dt-container .dt-paging a:hover {
	background-color: #e2e8f0;
}

/* Table name and description (if enabled) */
.tablepress-table-name {
	font-size: 16px;
	font-weight: 600;
	color: var(--accent);
	margin-bottom: 6px;
}

.tablepress-table-description {
	color: var(--muted);
	font-size: 13px;
	margin-bottom: 12px;
}

/*************** TablePress — Fix "Entries per page" Dropdown ***************/
.dt-container .dt-length {
	font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 14px;
	color: #1f2937;
	margin: 10px 0;
}

.dt-container .dt-length label {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #1f2937;
}

.dt-container .dt-length select {
	font: inherit;
	padding: 5px 10px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	color: #1f2937;
	background-color: #fff;
	cursor: pointer;
	appearance: none;
	background-image: linear-gradient(45deg,transparent 50%,#1c3d5a 50%), linear-gradient(135deg,#1c3d5a 50%,transparent 50%);
	background-position: calc(100% - 14px) center, calc(100% - 9px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 28px; /* room for the arrow */
	transition: border-color 0.15s, box-shadow .15s;
}

.dt-container .dt-length select:focus {
	outline: none;
	border-color: #1c3d5a;
	box-shadow: 0 0 0 3px rgba(28,61,90,0.12);
}

/* Optional: make dropdown arrow lighter in dark themes */
@media (prefers-color-scheme: dark) {
	.dt-container .dt-length select {
		background-image: linear-gradient(45deg,transparent 50%,#cbd5e1 50%), linear-gradient(135deg,#cbd5e1 50%,transparent 50%);
	}
}

/*************** TablePress — Modern Search Input ***************/
.dt-container .dt-search {
	margin: 12px 0 16px;
	display: flex;
	align-items: center;
	justify-content: flex-start; /* or flex-end if you prefer right-aligned */
}

/* Label + text */
.dt-container .dt-search label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 14px;
	color: #6b7280; /* muted */
	font-weight: 600;
}

/* Search input */
.dt-container .dt-search input[type="search"] {
	font: inherit;
	color: #1f2937;
	background: #fff;
	width: clamp(220px,30vw,380px); /* pill shape + spacing */
	padding: 10px 14px 10px 38px;
	border: 1px solid #e5e7eb;
	border-radius: 999px; /* subtle depth */
	box-shadow: 0 1px 1px rgba(0,0,0,.02);
	transition: border-color .15s, box-shadow .15s, background-color .15s; /* built-in search icon (no extra markup) */
	background-image: url("data:image/svg+xml;utf8,\ <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\ <circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
	background-repeat: no-repeat;
	background-position: 12px 50%;
	background-size: 16px 16px;
}

/* Hover/focus states */
.dt-container .dt-search input[type="search"]:hover {
	border-color: #d1d5db;
}

.dt-container .dt-search input[type="search"]:focus {
	outline: none;
	border-color: #1c3d5a;
	box-shadow: 0 0 0 3px rgba(28,61,90,.12);
}

/* Placeholder color */
.dt-container .dt-search input[type="search"]::placeholder {
	color: #9ca3af;
}

/* Make the default "Search:" label look cleaner */
.dt-container .dt-search label {
	position: relative;
}

.dt-container .dt-search label {
	letter-spacing: .1px;
}

.dt-container .dt-search label {
	gap: 10px;
}

/* If you want to visually drop the colon and show a nicer label, uncomment:
.dt-container .dt-search label{
  color: transparent;
}
.dt-container .dt-search label::before{
  content: "Search";
  color: #6b7280;
  margin-right: 2px;
}
*/
/* Improve the clear (×) button on WebKit */
.dt-container .dt-search input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	height: 14px;
	width: 14px;
	cursor: pointer;
	background: url("data:image/svg+xml;utf8,\ <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\ <line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") no-repeat center center;
}

/*************** Add Subtle Vertical Lines Between Columns ***************/
.tablepress thead th,
.tablepress tbody td {
	border-right: 1px solid #e5e7eb; /* light gray vertical line */
}

/* Remove the border from the last column */
.tablepress thead th:last-child,
.tablepress tbody td:last-child {
	border-right: none;
}

/* Optional: slightly adjust horizontal borders to match */
.tablepress tbody td {
	border-bottom: 1px solid #e5e7eb;
}

/* Optional: for a more defined grid, slightly darker lines */
.tablepress.grid-lines thead th,
.tablepress.grid-lines tbody td {
	border-right: 1px solid #d1d5db;
	border-bottom: 1px solid #d1d5db;
}

/* You can enable full grid lines per table if desired:
   Just add a class "grid-lines" under Table Options → Extra CSS Classes */