/* ==========================================================================
   General & Base Styles
   ========================================================================== */

/* Custom properties for easy color management */
:root {
	--primary-bg-color: #f1f5f9;
	--secondary-bg-color: #ffffff;
	--border-color: #e2e8f0;
	--text-color-dark: #334155;
	--text-color-light: #64748b;
	--header-bg: #f8fafc;
	--pending-color: #f59e0b;
	--completed-color: #22c55e;
	--card-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	--page-color: #f8f8f8;
	--border-roundness: 0.5em;
	--separator-size: 0.25em;
}

.round-all {
	border-radius: var(--border-roundness);
}
.round-tl {
	border-top-left-radius: var(--border-roundness);
}
.round-tr {
	border-top-right-radius: var(--border-roundness);
}
.round-bl {
	border-bottom-left-radius: var(--border-roundness);
}
.round-br {
	border-bottom-right-radius: var(--border-roundness);
}
.noborder {
	border: none;
}

.separator-row {
	border: none;
	background-color: var(--page-color);
	height: var(--separator-size);
	padding: 0;
}

table {
	th.separator-col, td.separator-col {
		border: none;
		background-color: var(--page-color) !important;
		width: var(--separator-size);
		padding: 0;
	}
}
* {
	font-family: roboto, system-ui, arial, helvetica, sans-serif; /* Added sans-serif fallback */
	box-sizing: border-box; /* Modern standard for easier layout math */
}

br {
	clear: both;
}

body {
	background: #fff;
	padding: 0;
	margin: 0;
	color: #333; /* Added default text color for better accessibility */
}

.hidden {
	visibility: collapse;
}

.seperate.cost_table {
	border-left: solid 0px var(--page-color);
}

/* ==========================================================================
   Main Layout
   ========================================================================== */

.content {
	padding: 2em;
	max-width: 1710px;
	margin: 4ex auto;
}

	.content span {
		display: inline-grid; /* Kept for backward compatibility with existing layout */
	}

#drop-container {
	position: sticky;
	top: 0;
	z-index: 10;
	background-color: var(--page-color);
}

#file-name-holder {
	/* This negative margin is fragile and used to pull the element up. */
	width: calc(100% - 4em);
	margin: -27ex 0 0 0;
	height: 26ex;
	overflow: auto;
}

#results-holder {
	display: 100%;

	tbody {
		td {
			border: none;
		}
	}
	
	div {
		display: inline-flex;
		gap: 1rem;
		align-items: flex-start;
		width: 100%;
	}
}

/* ==========================================================================
   Components
   ========================================================================== */

/* --- Parameters Bar --- */
.paramscontent {
	background: #ECEFF1;
	padding: 0.5em 1em;
	margin: -2em 0 2em 0; /* Pull up from top, add space below */
	position: relative;
	z-index: 20; /* Higher than drop container */
	border-radius: 1.5ex;
}

.paramscontent > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* width: 54%; */
	flex-direction: row;
}

.paramscontent span {
	margin: 0.5em 1em 0.5em 0;
}

#calculationparams {
	/* Original -4ex negative margin was fragile. Replaced with flex gap. */
	width: auto;
	margin-top: 0em;
	flex-direction: row;
	flex-wrap: nowrap;
}

/* --- Forms & Inputs --- */
.input {
	background-color: #CFD8DC;
	border: none;
	outline: none;
	padding: 0.5em;
	font-size: 1em;
	margin-left: 0.5em;
}

	.input:focus {
		background: #FAFAFA;
	}

	.input.disabled {
		background-color: transparent;
		cursor: not-allowed;
	}

/* --- File Upload --- */
#drop-files {
	border-radius: 10px;
	border: 4px dashed rgba(0, 0, 0, 0.2);
	padding: 3em 0;
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	background: rgba(222, 222, 222, 0.2);
	margin: -1ex 0em;
	cursor: pointer;
}

#uploaded-files {
	padding: 0;
	margin: 0;
	color: #545454;
}

	#uploaded-files li {
		font-family: "consolas", "courier new", "courier", monospace;
		padding: 10px;
		font-size: 10pt;
		line-height: 1em;
		color: #545454;
		list-style-type: none;
		border-bottom: 1px solid #eee;
	}

/* --- Results & Tables --- */
table {
	border: 0;
	border-collapse: collapse;
}

#results-holder table {
	width: 100%;
}

td,
th {
	padding: 0.5ex 1ex;
}

thead th {
	text-align: center;
	background: #b0bec5 !important;
	color: #dedede; /* was rgba(222,222,222,1) */
}

thead td {
	text-align: center;
	background: rgba(0, 0, 0, 0.2);
	color: #333;
	vertical-align: bottom;
}

tbody th {
	text-align: left;
	background: #b0bec5 !important;
	color: #dedede;
}

#results-holder table tbody td {
	text-align: right;
}

/* First table in a result block */
#results-holder > div > div > table:first-of-type tbody td {
	background: #afeeff; /* was rgba(175,238,255,1) */
}

table.unstriped tbody tr.calculated-true {
	background: #A5D6A7;
	border-bottom: 2px solid #81c784;
}

table.unstriped tbody tr.calculated-false {
	background: #FFE082;
	border-bottom: 2px solid #ffd54f;
}

/* --- Toggle Switch --- */
.switch {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
	vertical-align: middle;
}

.content span .switch {
	margin-left: 0.5em;
	height: 40px;
}

/* Hide default HTML checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .2s;
}

	.slider:before {
		position: absolute;
		content: "";
		height: 20px;
		width: 20px;
		left: 2px;
		bottom: 2px;
		background-color: white;
		transition: .2s;
	}

input:checked + .slider {
	background-color: #2196F3;
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
	transform: translateX(20px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 24px;
	height: 24px;
	width: 44px;
}

.slider.round:before {
	border-radius: 50%;
}

td.processing {
    text-align: center;
    padding: 10px;
    background-color: #dee2e6;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.paramscontent,
	#drop-container,
	#file-name-holder {
		display: none;
	}

	#results-holder {
		display: block; /* Reset flex for printing */
	}

	/* This class is not in the HTML, but kept in case it's used by JS */
	.item-result {
		font-size: 8pt;
		float: left;
		width: 29.5em;
	}

	#results-holder table {
		width: 100%;
		page-break-inside: avoid; /* Avoid breaking tables across pages */
		display: table;
		flex: none;
	}
}