/* tables.css - centralized table styling
   all table-related styles live here and target plain tables
   and the .tablitsa wrapper used in templates. */

/* base table layout */
table {
	width: 100%;
	border-collapse: collapse;
	font-family: inherit;
	font-size: 0.95rem;
	background-color: white;
	color: #111;
}

/* responsive wrapper used in templates */
.tablitsa {
	overflow-x: auto;
	border: 1px solid rgba(0,0,0,0.12);
	border-radius: 8px;
	padding: 0.5rem;
	background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,250,250,0.9));
}

/* table header */
table thead th {
	position: sticky;
	top: 0;
	background-color: rgba(255,255,255,0.96);
	z-index: 3;
	padding: 0.75rem 1rem;
	text-align: left;
	font-weight: 700;
	border-bottom: 2px solid rgba(0,0,0,0.12);
	letter-spacing: 0.02em;
}

/* header cells that come from base.css th selector get overridden by the more specific selector above */

/* table body cells */
table tbody td {
	white-space: nowrap;
	padding: 0.5rem 1rem;
	vertical-align: middle;
}

/* to overwrite link styling */
table tbody tr td a, table tbody tr td a:hover {
    color: inherit !important;
  }

/* zebra striping using a neutral variable if available */
table tbody tr:nth-of-type(odd) {
	background-color: var(--nice-gray, #f4f4f4);
}

table tbody tr:hover {
	border-radius: 0.25rem;
	background-color: var(--color-gray-600);
    color: white;
}

/* numeric cells align right for readability */
table td.numeric, table th.numeric {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* inputs inside table cells (for payroll forms) */
.tablitsa tbody tr td input,
table tbody tr td input.payroll-input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.35rem 0.5rem;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 4px;
	background-color: rgba(255,255,255,0.95);
	font: inherit;
}

.tablitsa tbody tr td input:focus,
table tbody tr td input.payroll-input:focus {
	outline: 2px solid rgba(59,130,246,0.15);
	box-shadow: 0 0 0 3px rgba(59,130,246,0.06);
}

/* small/compact tables */
.table-compact th,
.table-compact td {
	padding: 0.35rem 0.6rem;
}

/* caption styling */
table caption {
	caption-side: top;
	text-align: left;
	padding: 0.5rem 0;
	font-weight: 600;
}

/* print adjustments */
@media print {
	.tablitsa {
		border: none;
		padding: 0;
	}
	table thead th {
		position: static;
		background: transparent;
	}
}

/* specific table variants */
.payroll-table {
	width: 100%;
	border-collapse: collapse;
}

.payroll-table td{
	border: 1px solid rgba(0,0,0,0.08);
	padding: 0.5rem;
	text-align: right;
}

.payroll-table th {
	background-color: #f2f2f2;
	border: 1px solid rgba(0,0,0,0.08);
	padding: 0.5rem;
	text-align: center;
}