/* @import "normalize.css"; */
@import "reset.css";



/* ==========================================================================
   variables
   ========================================================================== */

:root
{
	--col-red: #cc3e3e; --col-red-rgb: 204,62,62;
	--col-grn: #47b247; --col-grn-rgb: 71,178,71;
	--col-blu: #3030e5; --col-blu-rgb: 48,48,229;
	--col-yel: #d7c57f; --col-yel-rgb: 215,197,127;
	--col-cya: #7ebfe8; --col-cya-rgb: 126,191,232;
	--col-mag: #c76de4; --col-mag-rgb: 199,109,228;
	
	--col-acc: var(--col-cya);
	
	--btn-bg-opacity: .125;
	
	--line-900: .375em;
	--line-700: .25em;
	--line-500: .125em;
	--line-300: .06125em;
	--line-100: .030625em;
	
	--border-900: var(--col-fg) var(--line-900) double;
	--border-700: var(--col-fg) var(--line-700) solid;
	--border-500: var(--col-dgy) var(--line-500) solid;
	--border-300: var(--col-fg) var(--line-300) solid;
	--border-100: var(--col-lgy) var(--line-100) solid;
	--border-300-dashed: var(--col-lgy) var(--line-300) dashed;
	
	--max-table-width: 80em;
}



/* ==========================================================================
   fonts
   ========================================================================== */

@font-face		{ font-family: 'gotham'; src: url('/css/fnt/gotham-light-webfont.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face		{ font-family: 'gotham'; src: url('/css/fnt/gotham-book-webfont.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face		{ font-family: 'gotham'; src: url('/css/fnt/gotham-medium-webfont.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face		{ font-family: 'gotham'; src: url('/css/fnt/gotham-bold-webfont.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

@font-face		{ font-family: 'merriweather'; src: url('/css/fnt/merriweather-bold-webfont.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face		{ font-family: 'merriweather'; src: url('/css/fnt/merriweather-bolditalic-webfont.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }



/* ==========================================================================
   animations
   ========================================================================== */

@keyframes bounce 								{ 0% { transform: translateY(0) } 25% { transform: translateY(.5em) } 50% { transform: translateY(-.25em) } 100% { transform: translateY(0) } }



/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html 											{ font-family: gotham, serif; color: var(--col-fg); font-size: 1em; font-weight: 400; line-height: 1.618; background: var(--col-bg); }

p:not(:last-of-type)							{ margin-bottom: 2em; }

a, button										{ text-decoration: none; color: var(--col-acc); transition: color .25s; cursor: pointer;
	&:hover, &:focus 							{ color: var(--col-fg); }
}								

.disabled 										{ pointer-events: none; opacity: .5; }

/* @view-transition {
  navigation: auto;
} */


/* ==========================================================================
   common
   ========================================================================== */

body 											{ width: 100vw; min-height: 100dvh; background: var(--col-bg); display: flex; flex-direction: column; justify-content: center; align-items: center; }
main 											{ width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: max(3vw, 3vh); z-index: 2; background: var(--col-bg); transform: translateX(0); transition: all .5s; }
.unload main 									{ filter: blur(10px); }

div.bars										{ position: fixed; z-index: 100; display: flex; bottom: 0; left: 0; width: 100%; height: 100dvh; pointer-events: none;
   .index & div 								{ transform-origin: 50% 0; }
   & div 										{ width: 20%; height: 100%; transform: scaleY(0); transform-origin: 50% 100%; background: var(--col-fg); transition: transform .5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
	   &:nth-child(1)							{ transition-delay: 0; }
	   &:nth-child(2)							{ transition-delay: .1s; }
	   &:nth-child(3)							{ transition-delay: .2s; }
	   &:nth-child(4)							{ transition-delay: .3s; }
	   &:nth-child(5)							{ transition-delay: .4s; }
	   .unload &								{ transform: scaleY(1); transform-origin: 50% 0; }
	   .unload.index &							{ transform-origin: 50% 100%; }
   }
   .unload & 									{ height: 100dvh; }
}

body:not(.page--login):has(form)				{ height: auto;
	& main 										{ justify-content: flex-start; align-items: center; padding-bottom: max(6vw,6vh); }
	& section 									{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; max-width: 52em; border-top: var(--border-900); position: relative; margin-bottom: max(3vw,3vh);
		&.nav 									{ flex-direction: row; max-width: 20em; border: none;
			& a 								{ display: flex; flex: 1 1 auto; height: 3em; align-items: center; justify-content: center; text-transform: uppercase; font-weight: 700;
				&:not(:last-child)				{ border-right: var(--border-100); }
			}						
		}
	}
}

h2												{ font-size: clamp(1.5em, 5vw, 2.5em); font-weight: 700; color: var(--col-fg); text-align: left; letter-spacing: -.02em; width: 100%; max-width: 52rem; margin-inline: auto; align-self: flex-start; }

input 											{ width: 100%; border: none; font-size: 1em; line-height: 1; background: transparent; font-weight: 700; color: var(--col-fg); outline: none; padding: 1.25em 1em; letter-spacing: .05em; }
input::placeholder 								{ color: var(--col-lgy); text-transform: uppercase; transition: opacity .25s;
	&:placeholder-shown							{ text-align: center; }
	:focus::placeholder 						{ opacity: .25; }
	::-webkit-credentials-auto-fill-button 		{ visibility: hidden; display: none !important; pointer-events: none; position: absolute; right: 0; }
}

button, a.btn 									{ position: relative; display: flex; flex: 0 0 3em; height: 3em; align-items: center; justify-content: center; }
button svg, a.btn svg, td.client_name svg		{ height: 40%; width: auto; stroke: var(--col-acc); fill: none; stroke-width: 2; stroke-miterlimit: 10; vector-effect: non-scaling-stroke; transition: stroke .25s; }
button:hover svg, a.btn:hover svg				{ stroke: var(--col-fg);  }

form button 									{ font-weight: 500; color: var(--col-acc); width: 100%; height: 4em; align-items: center; justify-content: center; text-transform: uppercase; letter-spacing: .075em; line-height: 1; }

button:not(.submit)::before, a.btn::before		{ content: ''; display: block; background: rgba(var(--col-cya-rgb), var(--btn-bg-opacity)); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; }

button::after, a.btn::after						{ content: ''; display: block; background: rgba(var(--col-cya-rgb), var(--btn-bg-opacity)); mix-blend-mode: multiply; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform: scaleX(0); transition: transform .375s cubic-bezier(0.165, 0.840, 0.440, 1.000); transform-origin: 100% 50%; }
button:hover::after, a.btn:hover::after			{ transform-origin: 0 50%; transform: scaleX(1); }

button.submit									{ background: rgba(var(--col-cya-rgb), var(--btn-bg-opacity)); flex: 1 1 auto;
	&::before 									{ content: ''; pointer-events: none; width: 75%; height: 75%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: url(/img/90-ring-with-bg.svg) no-repeat 50% 50%; background-size: contain; opacity: 0; transition: opacity .25s; }
	&:disabled::before							{ opacity: 1; }
}

div.row 										{ display: flex; width: 100%; min-height: 3.75em; overflow: hidden; transition: all .25s;
	.line_items &								{ height: 3.75em; }
	& a.back 									{ display: flex; flex: 1 1 auto; height: auto; width: 0; padding: 1.125em 0 1.25em; overflow: hidden; align-items: center; justify-content: center; text-transform: uppercase; font-weight: 700; transition: width .25s;
		&.show									{ width: 75%; border-right: var(--border-300); }
		&.show:first-of-type					{ width: 50%; }
	}
}						

tr.fadeOut td > *, div.row.fadeOut label, .invoice.forms div.row.fadeOut button { opacity: 0; transition: opacity .25s; }
tr.compress td 									{ height: 0; transition: height .25s; }
div.row.compress								{ height: 0; min-height: 0; transition: all .25s; }
div.row.compressed 								{ display: flex; width: 100%; height: 0; min-height: 0; overflow: hidden; transition: all .25s;  }

.invoice.forms div.row label, .invoice.forms div.row button { opacity: 1; transition: opacity .25s, background .25s; }
.invoice.forms div.row.fadedOut label, .invoice.forms div.row.fadedOut button { opacity: 0; transition: opacity .25s, background .25s; }

.forms form 									{ width: 100%; }
.forms.invoice form, .forms.email form 			{ height: inherit; display: inherit; flex-direction: inherit; align-items: inherit; justify-content: inherit; padding: 0; }

.forms form div.row:not(:last-of-type)			{ border-bottom: var(--border-300); }
.forms form div.row:has(+ div.row > button.submit) { border-bottom: var(--border-300); }
.forms form input 								{ text-align: left; font-weight: 500; padding: 1.5em .5em 1em; }

.forms input::placeholder 						{ font-weight: 700; }

.forms form button 								{ font-weight: 700; }
.forms form button.submit						{ background: rgba(126,191,232, var(--btn-bg-opacity)); }

.forms label 									{ flex: 0 1 100%; position: relative; }
.forms label:has(input[name=name_company])		{ flex: 0 1 90em; }
.forms label:has(input[name=state])				{ flex: 0 1 10em; }
.forms label:has(input[name=zip])				{ flex: 0 1 15em; }
.forms label:has(input[name=phone_number])		{ flex: 0 1 20em; }
.forms label:has(input[name="date[]"])			{ flex: 0 1 8em; }
.invoice.forms label:has(input[name="date[]"])	{ flex: 0 1 9em; }
.forms label:has(input[name="hours[]"])			{ flex: 0 1 10em; }
.invoice.forms label:has(input[name="hours[]"])	{ flex: 0 1 12em; }
.forms label:has(input[name="price[]"])			{ flex: 0 1 13em; }
.forms label:has(input[type=checkbox])			{ flex: 0 1 3.5em; }
.forms .attachment label:has(input[type=checkbox]) { flex: 0 1 4.5em }
.forms label span 								{ font-size: 1em; font-weight: 700; color: var(--col-lgy); white-space: nowrap; top: 1.0625em; left: .875em; pointer-events: none; text-transform: uppercase; letter-spacing: .05em; position: absolute; transition: all .25s; }
.forms label :required + span::after 			{ content: '*'; }
.forms label:focus-within > span, .forms label input:not(:placeholder-shown) + span, .forms label textarea:not(:placeholder-shown) + span, .forms label:has(select option[value=""]:not(:checked)) > span, .forms .defaults label:has(select option:checked) > span { font-size: .625em; font-weight: 500; color: var(--col-fg); left: .75em; top: .125em; }
.forms label:not(:last-of-type)					{ border-right: var(--border-100); }

.input-sizer 									{ align-items: stretch; width: 100%; display: inline-grid; vertical-align: top; position: relative; /*margin: .75em 0 0 .25em;*/ }
.input-sizer::after, .input-sizer textarea 		{ width: 100%; min-height: 4.375em; grid-area: 2 / 1; font: inherit; padding: 1.25em .5em 0; margin: 0 0 .5em; resize: none; background: transparent; appearance: none; border: none; font-weight: 500; }
.input-sizer::after 							{ content: attr(data-value) " "; visibility: hidden; white-space: pre-wrap; }
.input-sizer:focus-within textarea:focus, .input-sizer:focus-within input:focus { outline: none; }

.forms select 									{ appearance: none; background-color: transparent; border: none; padding: 1.625em 3em .875em .625em; margin: 0; width: 100%; /*min-width: 18em;*/ font-family: inherit; font-size: inherit; color: var(--var-blk); cursor: pointer; line-height: 1; letter-spacing: .05em; font-weight: 500; outline: none; }
.forms label:has(select)::after					{ content: ''; padding: .25em; position: absolute; top: calc(50% - .5em); right: 1em; border: solid var(--col-acc); border-width: 0 .25em .25em 0; display: inline-block; transform: rotate(45deg); pointer-events: none; }
select::-ms-expand 								{ display: none; }

.forms input[type=checkbox]						{ width: 1em; height: 1em; border: var(--border-500); padding: 0; margin: 1.625em 0 0 1.25em; cursor: pointer; }
.forms .attachment input[type=checkbox]			{ margin: 1.625em 0 0 1.5em; }
.forms input[type=checkbox]:checked				{ background: url(/img/checkmark.svg) no-repeat 50% 50%; background-size: contain; }
.forms label:has(input[type=checkbox]) + label input { transition: color .25s; }
.forms label:has(input[type=checkbox]:not(:checked)) + label input { color: var(--col-lgy); }

.forms input[type=color]						{ width: 5.75em; height: 2.5em; padding: 0; margin: 0 .9375em 0 .375em; transform: translateY(.625em); cursor: pointer; }
.forms input[type=color] + input[type=text] 	{ width: 7em; text-transform: uppercase; }

label:has(input[name=hourly_rate]):focus-within::before, label:has(input[name=hourly_rate]):has(input:not(:placeholder-shown))::before { content: '$'; position: absolute; left: .75em; top: 1.4em; font-weight: 400; }
label:has(input[name=accent_color]):focus-within::before, label:has(input[name=accent_color]):has(input:not(:placeholder-shown))::before { content: '#'; position: absolute; left: 6.75em; top: 1.375em; font-weight: 400; }


button.more svg									{ fill: var(--col-fg); }

button.more 									{ background: var(--col-bg); position: relative; width: 3em; z-index: 10; border: 0; }
.more svg:nth-of-type(2)						{ display: none; }
.show button.more::before, .button.more:hover::before, .action a.btn::after { content: ''; width: 100%; height: 100%; position: absolute; background: rgb(var(--col-cya-rgb), var(--btn-bg-opacity)); }
.show .more svg:nth-of-type(2) 					{ display: initial; }
.show .more svg:nth-of-type(1)					{ display: none; }

td.action										{ position: relative; padding-left: 0; width: 3em;
	& div  										{ width: 3em; height: 3em; position: relative; margin-left: auto;
		& a										{ background: var(--col-bg); position: absolute; z-index: 1; top: 0; left: 0; width: 3em; height: 3em; display: flex; align-items: center; justify-content: center; border: 0; transition: transform .25s;
			.show &								{
				&:nth-child(1)					{ transform: translateX(-100%); }
				&:nth-child(2)					{ transform: translateX(-200%); }
				&:nth-child(3)					{ transform: translateX(-300%); }
				&:nth-child(4)					{ transform: translateX(-400%); }
				&:nth-child(5)					{ transform: translateX(-500%); }
				&:nth-child(6)					{ transform: translateX(-600%); }
			}
		}
	}
}

.archived .action a:not(.archive) 				{ display: none; }



/* ==========================================================================
   install
   ========================================================================== */

.install p.message 								{ text-align: left; width: 100%; max-width: 52rem; margin-inline: auto; align-self: flex-start; margin-bottom: 0; }
.install p.message:first-of-type				{ margin-top: 1em; }



/* ==========================================================================
   login
   ========================================================================== */

.page--login main								{ justify-content: flex-end; align-items: flex-end; min-height: 100dvh; }
.page--login figure 							{ padding: 2%; height: 100%; aspect-ratio: 1; display: flex; justify-content: center; align-items: center; flex: 0 0 auto; }
.page--login svg 								{ width: 100%; height: auto; aspect-ratio: 1; }
.page--login polygon:nth-child(1)				{ fill: var(--col-fg); }
.page--login polygon:nth-child(2)				{ fill: var(--col-fg); }
.page--login polygon:nth-child(3)				{ fill: var(--col-fg); }
.page--login polygon:nth-child(4)				{ fill: var(--col-fg); }
.page--login polygon:nth-child(5)				{ fill: var(--col-fg); }
.page--login polygon:nth-child(6)				{ fill: var(--col-acc); }

div.titlebox 									{ width: 100%; max-width: 40em; display: flex; flex-direction: column; }
.titlebox div.col								{ border-left: var(--border-500); width: 100%; }
.titlebox div.row:nth-of-type(1)				{ border-bottom: var(--border-300); }

.page--login h1									{ font-size: 4em; font-weight: 700; color: var(--col-fg); text-align: left; letter-spacing: -.02em; }
.page--login .on h1								{ animation: bounce .375s; }

.page--login form 								{ height: 0; overflow: hidden; display: flex; border-top: var(--border-900); border-bottom: var(--border-700); transition: height .25s cubic-bezier(0.150, 0.465, 0.530, 1.650); }
.page--login .on form							{ height: 8.0625em; }
			
.page--login button 							{ flex: 1 1 auto; padding-bottom: .25em;
	&::before 									{ background: rgba(var(--col-cya-rgb), .1); }
}				
.page--login input								{ font-weight: 500; letter-spacing: .05em;
	&[type=email]								{ border-right: var(--border-300); }
}					



/* ==========================================================================
   home
   ========================================================================== */

.index 											{ --col-bg: var(--col-blk); --col-fg: var(--col-wht); background: var(--col-bg); }
.index main 									{ height: initial; min-height: 100dvh; display: block; padding: 5em 3vw 0; color: var(--col-fg); }
.index header									{ position: sticky; z-index: 2; top: 5em; display: flex; justify-content: space-between; align-items: flex-end; width: 100%; max-width: var(--max-table-width); height: 5em; padding-bottom: .5em; margin: 0 auto; background: var(--col-bg); border-bottom: var(--border-900); border-color: var(--col-fg); }
.index header::after 							{ content: ''; display: block; position: absolute; top: -1em; left: 0; width: 100%; height: 1em; background: var(--col-bg); }

.index {
	& figure 									{ 
		& svg 									{ width: min(clamp(1.5em, 3vw, 3em), clamp(1.5em, 6vh, 3em)); height: auto; stroke: var(--col-acc);
			& polygon:nth-child(1)				{ fill: var(--col-fg); }
			& polygon:nth-child(2)				{ fill: var(--col-fg); }
			& polygon:nth-child(3)				{ fill: var(--col-fg); }
			& polygon:nth-child(4)				{ fill: var(--col-fg); }
			& polygon:nth-child(5)				{ fill: var(--col-fg); }
			& polygon:nth-child(6)				{ fill: var(--col-acc); }
		}
	}
}

.index header h1								{ width: 100%; font-family: merriweather, serif; font-style: italic; font-size: clamp(1.75em, 2vw, 2.25em); text-align: left; }
.index header div, .index footer div 			{ height: 100%; display: flex; align-items: center; justify-content: center; }
.index main header								{ transition: opacity .25s; }
body.index:not(:has(.clients table tr button.more)) main > header { opacity: 0; pointer-events: none; }

.index footer									{ transform: translateY(-100%); position: fixed; z-index: 2; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 4em; background: var(--col-bg); box-shadow: 0 -1em 1em rgba(0,0,0,.05); transition: transform .25s ease .5s; }
.index.loaded footer							{ transform: translateY(0); }
.index footer > *, .index header > a.btn		{ position: relative; display: flex; flex: 1 1 auto; height: 4em; align-items: center; justify-content: center; white-space: nowrap; text-transform: uppercase; font-weight: 500; }
.index header a.btn 							{ height: 2em; }
.index header a.btn::before, .index header a.btn::after { content: none; }

.index footer a.btn.add							{ flex: 1 1 100%; transition: flex .25s; }
/* .index footer a.btn.add.hide					{ flex: 0 1 0; overflow: hidden; } */
 body.index:not(:has(.clients table tr button.more)) footer a.add { flex: 0 1 0; overflow: hidden; }


.index table 									{ width: 100%; max-width: var(--max-table-width); margin: 0 auto; position: relative; z-index: 1; color: var(--col-fg); opacity: 1; transition: opacity .25s; }

.index tr										{ transition: background .25s;
	&:not(:last-child):hover 					{ background: rgba(var(--col-cya-rgb), .025); }
	&:not(:last-child), &:only-child			{ border-bottom: var(--line-300)  rgba(255,255,255,.1) solid;  }
}

.index td 										{ height: clamp(3.5em, 8vw, 5em); width: initial; padding: 0 1em; vertical-align: middle; line-height: 1.309; transition: color .25s, opacity .25s;
	&:first-child 								{ padding-left: 0; }
	&:last-child 								{ padding-inline: 0; }
}

.index td.sent, .index td.paid					{ padding-inline: .5em; }
.index .invoice-paid td 						{ color: #666; }
.index td.sent a, .index td.paid a 				{ width: 1.5em; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; margin: auto; }
.index td.sent a::before, .index td.paid a::before, .index td.sent a::after, .index td.paid a::after { content: none; }

a.send svg g.closed 							{ display: none; }
a.send svg g.open 								{ display: initial; }
.invoice-sent a.send svg g.open 				{ display: none; }
.invoice-sent a.send svg g.closed 				{ display: initial; opacity: .5; }

a.pay svg g.full 								{ display: none; }
a.pay svg g.empty 								{ display: initial; }
.invoice-paid a.pay svg g.empty 				{ display: none; }
.invoice-paid a.pay svg g.full 					{ display: initial; opacity: .5; }

.index .archived td.sent a, .index .archived td.paid a { pointer-events: none; }

.client_name a.btn 								{ width: 3em; display: inline-flex; width: 2em; height: 2em; }
.archived td:not(.action) 						{ opacity: .25; }

td:not(.description):not(.client_name)			{ white-space: nowrap; }
td.amount										{ text-align: right; }

.aside_on main									{ transform: translateX(-50vw); transition: all .5s; box-shadow: 1em 0 2em rgba(0,0,0,.1); filter: blur(2px); }
.aside_on main > table, .aside_on main > header	{ opacity: .25; }
aside.clients									{ transform: scale(.9); position: fixed; z-index: 1; top: 0; right: 0; width: 100%; max-width: 50vw; height: 100dvh; overflow: auto; display: block; padding: 5em 3vw 0; background: var(--col-bg); color: var(--col-fg); transition: transform .5s, opacity .5s; }
aside.clients::before, aside.clients header::before { content: ''; display: block; position: fixed; z-index: 1; top: 0; left: 0; width: 100%; background: rgba(0,0,0,.1); pointer-events: none; }
aside.clients header::before 					{ top: -1em; height: calc(100% + 1em); position: absolute; }
aside.clients::before 							{ height: 400%; }
.loaded aside.clients 							{ opacity: 0; }
.clients header									{ position: sticky; top: 0; }
.loaded.aside_on aside.clients					{ transform: scale(1); opacity: 1; }

footer i, header i								{ width: 1em; height: 1em; display: inline-flex; align-items: center; justify-content: center; margin-right: .25em; }
footer button i svg, footer a.btn i svg, header button i svg, header a.btn i svg { width: 100%; height: auto; }
footer a.btn.logout 							{ flex: 0 0 4em; }
footer a.btn.logout svg							{ stroke-width: 1.5; }
footer > *:nth-child(2)							{ padding-inline: clamp(1em, 3vw, 4em); }
footer > *:last-child 							{ padding-inline: clamp(1em, 3vw, 4em); }
/* footer a.btn.add 								{ width: 100%; } */
/* footer button i:first-of-type 					{ display: inline-flex; } */
footer button i:last-of-type 					{ display: none; }
.aside_on footer button i:first-of-type			{ display: none; }
.aside_on footer button i:last-of-type			{ display: inline-flex; }

.aside_on.index main 							{ pointer-events: none; }

/* .index footer a.btn 							{ border-right: var(--border-300-dashed); } */
.index header a.btn svg, .index footer a.btn svg, .index footer button svg { stroke: var(--col-acc); }
.index header a.btn:hover svg, .index footer a.btn:hover svg, .index footer button:hover svg { stroke: var(--col-fg); }



/* ==========================================================================
   settings
   ========================================================================== */

form label:has(input[name=hourly_rate])			{ flex: 0 1 16em; }
form input[name=hourly_rate]					{ padding-left: 1.5em; }

.payment form div label:nth-of-type(1)			{ flex: 0 1 20em; }

.forms .defaults form div.row:not(:last-of-type) { border-bottom: var(--border-300); }

a.btn.view 										{ width: 3.75em; flex: 0 0 3.75em; height: 3.75em; border-left: var(--border-100); }



/* ==========================================================================
   client
   ========================================================================== */



/* ==========================================================================
   invoice add/edit
   ========================================================================== */

button.delete 									{ width: 3.625em; flex: 0 0 3.625em; height: 3.625em; border-left: var(--border-100); }

/* .invoice form label:has(input[name=hourly_rate]) { flex: 0 1 100%; } */
.invoice .row label:has(input[name=sent]), .invoice row label:has(input[name=paid]) { flex: 0 1 3.5em; }
.invoice .row:has(input[name=sent]):has(input[name=paid]) label:not([for=sent]):not([for=paid]) { flex: 1 1 auto; width: auto; }
.invoice .row:has(input[type=checkbox]) label:not(:has(input[type=checkbox])) { flex: 1 1 auto; width: auto; }
.invoice label:has(input[type=checkbox]) span { left: 0; width: 100%; text-align: center; }

.forms .defaults div.row:last-of-type:not(:has(.submit)) { border-bottom: var(--border-300); }

.forms button.undo 								{ border-left: 0; flex: 0 0 3.625em; }
.forms button.undo::before, .forms button.undo::after { content: none; }
.forms button.undo svg							{ width: 33.3333%; stroke-width: 2; }

.invoice.forms form input[name="price[]"]		{ padding-left: 1.5em; }
label:has(input[name="price[]"]):focus-within::before, label:has(input[name="price[]"]):has(input:not(:placeholder-shown))::before { content: '$'; position: absolute; left: .75em; top: 1.4em; font-weight: 400; }
label:has(input[name="accent_color"]):focus-within::before, label:has(input[name="accent_color"]):has(input:not(:placeholder-shown))::before { content: '#'; position: absolute; left: 6.75em; top: 1.375em; font-weight: 400; }

.invoice .payment_info .row label:last-of-type 	{ width: 100%; }

.invoice .defaults div.row:not(:has(*[data-default])) button.undo { display: none; }

h2:has(div.totals)								{ position: relative; }
h2 div.totals 									{ position: absolute; right: 0; bottom: .825em; font-size: 1rem; font-weight: 500; line-height: 1; letter-spacing: .05em; }
h2 .totals span:last-child 						{ margin-left: .5em; }
h2 .totals span:first-child 					{ margin-left: .5em; }



/* ==========================================================================
   invoice email
   ========================================================================== */

.forms form .overrides div.row:nth-child(2)	{ border-bottom: var(--border-500); }




/* ==========================================================================
   media queries
   ========================================================================== */

@media only screen and (max-width: 60em)
{
	.index td.date 								{ display: none; }
}

@media only screen and (max-width: 47.9375em)
{	
	.page--login div.titlebox 					{ align-self: center; }
	.page--login h1								{ font-size: 3em; }
	.page--login figure							{ flex-basis: 6em; aspect-ratio: unset; }
	.page--login .on form 						{ height: 11.825em; }
	.page--login .titlebox div.row 				{ flex-direction: column; }
	.page--login input[type=email]				{ border-right: none; border-bottom: var(--border-300); }

	.index main header							{ top: 0; }
	.index footer								{ top: initial; bottom: 0; transform: translateY(100%); font-size: .9375em; }
	.index main, aside.clients 					{ padding: 0 3vw 3em; }
	.index td.client_name						{ white-space: normal; }
	.index td.amount, .index td.sent, .index td.paid { display: none; }

	.aside_on main								{ transform: translateX(-96vw); }
	aside.clients								{ max-width: 96vw; }
	
	footer a.btn.logout 						{ flex: 0 0 3em; }

	section.nav 								{ width: 100%; max-width: none; }
	.nav a 										{ width: 100%; }

	div.row 									{ flex-wrap: wrap; }
	div.row:has(a.back.show)					{ flex-wrap: nowrap; }
	
	.index td.description 						{ display: none; }

	.forms label:has(input[name=name_company]), .forms label:has(input[name=state]), .forms label:has(input[name=zip]), .forms label:has(input[name=phone_number]), .forms label:has(input[name=hourly_rate]), .forms label:has(input[name=description]) { flex: 1 1 100%; }
	.forms form label:not(:last-of-type)		{ border-right: 0; border-bottom: var(--border-300); }
	.invoice.forms .line_items label			{ border-bottom: var(--border-300); }

	.line_items div.row:not(:last-of-type) 		{ height: calc(3.75em * 3); min-height: calc(3.75em * 3); }
	
	.line_items div.row:not(:last-of-type) 		{ border-bottom: var(--border-500); }
	.forms label:has(input[name="hours[]"]), .forms label:has(input[name="price[]"]), .forms label:has(input[name=invoice_date]), .forms label:has(input[name=invoice_number]) { flex: 1 1 50%; }
	.forms label:has(input[name="price[]"]), .forms label:has(input[name=invoice_number]) { border-left: var(--border-300); }
	.forms label:has(input[name=invoice_date]) 	{ border-bottom: 0; }
	.forms .line_items label:has(input[name="date[]"]) { flex: 1 1 calc(100% - 4em); }
	.line_items button.delete 					{ order: 2; height: 3.875em; border-bottom: var(--border-300); } 
	.line_items label:has(input[name="description[]"]) { order: 3; }
	.line_items label:has(input[name="hours[]"]) { order: 4; }
	.line_items label:has(input[name="price[]"]) { order: 5; }
	h2 div.totals								{ bottom: .5em; }

	.payment div.row:not(:first-of-type) label:first-of-type { border-bottom: 0; border-right: var(--border-100); }
	.payment div.row:first-of-type label		{ flex: 1 1 100%; }
	.payment form div.row:not(:nth-of-type(1)) 	{ flex-wrap: nowrap; border-bottom: var(--border-300); }
	.payment form div.row:not(:nth-of-type(1)) input:not(:last-of-type) { border-right: var(--border-100); border-bottom: 0; }
	.payment form div.row:last-of-type			{ border-top: var(--line-bld) var(--col-fg) solid; }
	
	.payment_info div.row, .defaults div.row, .attachment div.row { flex-wrap: nowrap; }
	.forms form .payment_info label:not(:last-child), .forms form .attachment label:not(:last-child) { border-right: var(--border-100); border-bottom: 0; }
}

@media only screen and (max-width: 40em)
{
	body.page--login 							{ min-height: 0; height: 310px; overflow: hidden; }
	.page--login main							{ justify-content: flex-end; align-items: flex-end; min-height: 0; }
}