/*	List
	========================================================= */

	div#list-rows>button {
		grid-template-columns: 0 7em 1fr 6em;
		grid-template-rows: 1fr;

		span:nth-of-type(n+2) {
			padding: .25em .5em;
		}

		span:nth-of-type(4) {
			text-align: right;
		}
		span:nth-of-type(4)::before {

		}
	}

/*	Layout Items
	========================================================= */

	fieldset#items table {
		:is(thead,tbody)>tr {
			display: grid;
			grid-template-columns: 4em 8em 1fr 8em 4em 6em 3em 3em 3em 4em;
			grid-template-rows: 1fr;
		}
		tbody>tr>td {
			box-sizing: border-box;
			font-size: 1em;
			input[type="text"] {
				box-sizing: border-box;
				font-size: .9em;
			}
		}
	}


/*	Specific Layout Items
	========================================================= */


	fieldset#invoicedetails {
		width: 200px;
		margin-left: 20px;
		float:left;
	}

	fieldset#detail button[type="submit"] {
		width: 100%;
		text-align: left;
	}
	fieldset#detail button[type="submit"]>span.action {
		font-weight: bold;
	}
	fieldset#detail button[type="submit"]>span.id {
		font-weight: bold;
		float: right;
	}

	form#detail select {
		width: 100%;
		font-family: monospace;
	}
	fieldset#items {

		fieldset#items table {
			border-collapse: collapse;
			font-family: sans-serif;
			width: 100%;
		}

		fieldset#items table>thead>tr {
			position: sticky;
			border: medium #ccc;
			border-style: solid none;
		}

		fieldset#items table>thead>tr>th {
			text-align: left;
			padding: .25em .5em;
		}

		fieldset#items table>tbody>tr {
			border: thin #eee;
		}
		fieldset#items table>tbody>tr>td {
			padding: .25em .25em;
			border: thin solid #eee;
		}

		fieldset#items table>tbody>tr input[type="text"] {
			border: thin solid green;
			padding: .25em .5em;
			width: 100%;
		}

		td:nth-child(1) {
			font-weight: bold;
			font-family: "Source Code Pro", monospace;
			margin: 0;
			position: relative;
			top: 0.35em;
		}
		td:nth-child(2) input {
			width: 100%;
		}
		td:nth-child(3) input {
			width: 100%;
		}
		td:nth-child(4) input {

		}
		td:nth-child(5) input {
			text-align: right;
		}
		td:nth-child(7) {
			text-align: center;
		}
		td:nth-child(8) {
			text-align: center;
		}
		td:nth-child(9) {
			text-align: center;
		}
		td:nth-child(10) {
			text-align: center;
		}

		input[type="checkbox"] {
			accent-color: darkgreen;
		}
	}
	label {
		font-family: sans-serif;
		font-weight: bold;
		font-size: 12px;
	}
	legend {
		font-weight: bold;
		font-size: 14px;
	}

	form#detail textarea[name="comments"] {
		width: 480px;
	}


	fieldset#details input[type="text"]::placeholder,
	fieldset#items input[type="text"]::placeholder {
		color: var(--placeholder);
		opacity: 1;
	}
	fieldset#details input[type="text"]:focus::placeholder,
	fieldset#items input[type="text"]:focus::placeholder {
		color: orange;
	}
	fieldset#details select,
	fieldset#items select {
		border-width: thin thick thin thin;
	}
	fieldset#details select:focus,
	fieldset#details input[type="text"]:focus,
	fieldset#items select:focus,
	fieldset#items input[type="text"]:focus {
		border-color: var(--select-color);
		outline: none;
	}

	fieldset#details td,
	fieldset#details th,
	fieldset#items td,
	fieldset#items th {
		qtext-align: left;
		qfont-size: .9rem;
		qpadding: .125em .125em;
	}
	fieldset#totals {
		display: grid;
		grid-template-columns: 12em 16em 16em;
		grid-template-rows: 1fr 1fr 1fr;
		padding: .5em 1em;
		width: 24em;
		qfloat: right;

		span {
			text-align: right;
		}
		span:nth-child(1),
		span:nth-child(4),
		span:nth-child(n+7) {
			font-weight: bold;;
		}
		span:nth-child(n+7) {
			color: red;
			border: thin #666;
			border-style: solid none;
		}
	}

/*	Invoice Actions
	========================================================= */
legend#invoice-actions+ul {
	list-style: none;
	border: thin solid red;
	padding:  0;
	position: absolute;
	z-index: 2;
	background-color: white;
	margin: 0;
	display: none;
}
legend#invoice-actions+ul>li{
	padding: .25em;
}
legend#invoice-actions.open+ul {
	display: block;
}

form#detail {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto auto auto auto auto;
	align-content: start;
	
	&>* {
		
	}
	h2 {
		grid-area: 1/1/2/3; 
	}
	fieldset#details {
		grid-area: 2/1/3/3;
	}
	fieldset#items {
		grid-area: 3/1/4/3;
	}
	fieldset#comments {
		grid-area: 4/1/5/2;
	}
	fieldset#totals {
		grid-area: 4/2/5/3;
	}
	p:has(button[name="submit"]) {
		grid-area: 5/1/6/3;
	}
}