/* https://stackoverflow.com/questions/56300132/how-to-override-css-prefers-color-scheme-setting?answertab=scoredesc#tab-top */
/* I gave up on dark mode toggle switch on 1/9/23 after realizing I'd need to set all the default browser styles in stone... maybe one day */

:root {
	--documentBG: #fafafa;
	--sectionBG: #e8e8e8;
	--sectionShadow: grey;
	--subsectionBG: #f9fffae8;
	--textColor: black;
	--opaqueText: #000000a8;
	--outline: black;
	--fontMain: system-ui;
	--fontData: monospace;
	--tableHeaderBG: rgba(0,0,0,38%);
	--tableHeaderOpacity: 67%;
}
@media (prefers-color-scheme: dark) {:root {
	--documentBG: #202124;
	--sectionBG: #303134;
	--sectionShadow: black;
	--subsectionBG: #232a29;
	--textColor: #e8eaed;
	--opaqueText: #ffffffa8;
	--outline: #007364;
	--tableHeaderBG: rgba(0,0,0,80%);
	--tableHeaderOpacity: 30%;
}}

/* site-wide grey-scale color scheme: */
html {background: var(--documentBG); color: var(--textColor);}
#title h3 {color:#03b400;}
.section {background:var(--sectionBG); box-shadow:0 1em 1.5em -1em var(--sectionShadow);}
.subtitle {color:rgb(0 0 0 / 65%);}
.data .row, .data tr, .subsection {background:var(--subsectionBG);}
.data .row:nth-child(even) .cell, .data tr:nth-child(even) td {background: rgba(255,255,255,50%);}

/* hamburger dropdown, should be renamed to popup menu, dropdown is a different thing */
div.dropdown > a:hover, div.dropdown > a:focus {background-color:#ddd;}
div.dropdown > div {
	background:hsl(0deg 0% 40%); color:hsl(0deg 0% 92%); 
	box-shadow: -0.2em 0.2em 1.2em 0em #7d7d7d, inset 0em -0.2em 2em -0.9em hsl(0deg 0% 23%); /*inside & outside*/
}


html {
	box-shadow: inset 0 1rem 11rem -8rem black;
	padding: min(4%, 1.5em) calc(11% - 2em) 14%;
	font-family:var(--fontMain);	font-size: 22px;
	min-height:100%; width:fit-content; min-width:100%; box-sizing:border-box; overflow-y:scroll;

}
	/* Calc explanation: percentage alone makes margins too large on small devices. */
	/* Subtracting em's has large effect on small screens, and little effect on large screens. */
	/* This gives more room for important info where screen space is minimal. */
	/* And for larger screens takes advantage of the room to show visually pleasing (larger) margins */
	/* But for extra small screens, subtracting em's from % will eventually result in negative margins */
	/* Turns out that cutoff point is ~320px, so under that we set margins to a static .7em's */
@media all and (max-width: 320px) { html {margin-left:.7em; margin-right:.7em;} }

body {max-width: 55em; margin: 0 auto; background:none; -webkit-text-size-adjust: 100%;}
pre {white-space:pre-wrap; tab-size:1.4em; font-size:.6em; word-break:break-all;}

/* use <brp></brp> to quickly add a little space between lines */
pbr, brp {display:block; line-height: .7em;} /* paragraph break, not just a line break */


a, .clickable, button, input[type=submit], input[type=file] {transition:  all .3s ease}
#title {padding:0 .6em; margin-bottom: 1.3em;}
#title h1 a {text-decoration:none; color:inherit;}



/* hamburger dropdown, should be renamed to popup menu, dropdown is a different thing */
div.dropdown {position:relative; display:inline-block;}
div.dropdown a {color:inherit; text-decoration:none;}
div.dropdown > a {}
div.dropdown > a > i {opacity:50%; font-style:normal;}
div.dropdown > a:hover > i, div.dropdown > a:focus > i {opacity:100%;}
div.dropdown > div {
	display:none; position:absolute; z-index:1;
	border-radius:.3em; padding:.4em .5em .6em;
}
div.dropdown > div > a {display:block; padding:0 .5em; white-space:nowrap;}
div.dropdown > div > a:hover, div.dropdown > div > a:focus {text-decoration:underline;}
div.dropdown .homeIcon {-webkit-text-stroke-width:.1em; font-size:1.2em; display:inline-block; margin:0 .4em;}
.subtitle div.dropdown {font-weight:bold; margin:.1em 0 .3em;}
.subtitle div.dropdown > a {
	font-size:1.3em; padding: 0 .5em .1em; border-radius: .2em; display: inline-block;
	background-color:hsl(0deg 0% 97%);
}
.subtitle div.dropdown > a:hover, .subtitle div.dropdown > a:focus
	{/* background-color:hsl(0deg 0% 98%); */} /* don't think this is used anymore... */





#hamburger {text-align:right; font-size: 1.2em;}
#hamburger > a {border-radius: .1em; opacity:60%;}
/* Icon AND Links: */
#hamburger a {}
/* Add a grey background color on mouse-over */
#hamburger > a:hover, #hamburger > a:focus {}
/* ICON: */
#hamburger a.icon {
	font-size: 1.6em;
	display: inline-block;
	padding: 0 .3em .1em;
}
/* Hide the links inside the navigation menu (except for logo/home) */
#hamLinks {right:0;}
/* LINKS: */
#hamLinks a { font-weight:bold; line-height:1.6em;}

#title h1 {margin:0;}
h2 {margin:0 0 .3em;}
h3 {margin: 0 0 .6em;}
h4 {margin:0; font-weight:500; font-size:.8em; line-height:inherit;}
#title h3 {display:inline-block; margin:0 .9em;}


.section {margin:.5em auto 2em; border-radius:0.5em; padding:0.4em 0.4em 0.5em; position:relative;}
.subtitle {margin:.2em .9em;}
.subtitle h1 {text-align:center; display:block; margin:.4em 0 1.1em; opacity:22%; font-size:1.85em;}
.subtitle h3 {margin-bottom: 0.25em;}
.subsection {border-radius:.5em; padding:2% 3.5%;}
.subsection .subsection {margin-top:.5em;} /* ~ = all subsections that are after and siblings of subsections */
.descriptionSubsection {font-size: 0.6em;	opacity: 0.6; margin: -1em 1em 2em;	padding-bottom: 0.4em;}
.oppositeSides {display:flex; justify-content:space-between;}
.thirds {background:orange;}
.details {margin:.2em 0;}
.currentUser {font-weight:500}
.currentUser a {text-decoration:none; color:inherit; cursor:inherit;}
#transactions h2 {display:inline-block;}
#transactions #timeframe {margin-left:2em; opacity:70%;}

.table, table {
	display:table; border-collapse:separate; table-layout:auto;
	font-size:.8em; width:100%; border-spacing: 0 .2em; word-break:break-word;
}
.row, tr {display:table-row;}
.row .header, th {background: var(--tableHeaderBG); color: rgba(255,255,255,80%); opacity: var(--tableHeaderOpacity); vertical-align:middle;}
.row .header, th, .row .cell, td {
	display:table-cell; padding:.1em .4em .3em; text-align:inherit; 
	overflow:hidden; vertical-align:top;
}
.row .header:first-child, th:first-child, .row .cell:first-child, td:first-child {
	border-top-left-radius:.2em; border-bottom-left-radius:.2em; padding-left:0.6em;
}
.row .header:last-child, th:last-child, .row .cell:last-child, td:last-child {
	border-top-right-radius:.2em; border-bottom-right-radius:.2em; padding-right:1em;
}
tr.sticky th {position: sticky; top: 0; background: var(--sectionBG); white-space: nowrap;}




/* Hide Table Cell Overflow (see howitworks.php for the javascript that adds these wrappers to table cells) */
table .tdOutter {
	position: relative;	max-width: 100%;	padding: 0 !important;
	display: -webkit-flex;	display: -moz-flex;	display: flex;
	vertical-align: text-bottom !important;
}
table .tdInner {
	position: absolute;	white-space: nowrap;
	overflow-y: visible;	overflow-x: hidden;	text-overflow: clip;
	max-width: 100%;	min-width: 0;	width:100%;
	top: 0;	left: 0;
}
table .tdOutter:after { /* This keeps the wrapper from collapsing. */
	content: '|'; display: inline; visibility: hidden;	width: 0;
}

table .tdInner:after { /* This fades the right edge of overflowing text. */
	content: '|'; color:transparent; user-select: none; /* Don't actually show this text. It's only here to keep the wrapper from collapsing. */
	position: absolute; top:0; bottom:0; right: 0;
	width:0.4em; overflow: hidden;
	--fadeColor: var(--documentBG);
	background: linear-gradient(to left, var(--fadeColor) 0, transparent);
}



/* Data Tables */
.data .row.total, .data tr.total {background:none; font-weight: 500; opacity:40%;}
.data .row.total:nth-child(even) .cell, .data tr.total:nth-child(even) td {background: none;}

table.rawData {word-break:unset; font-size: .5em;}

/* List Tables (like the overview table on the customer dash) */
.table.list, table.list {width:auto; border-collapse:collapse;}
.list td > span {font-size:.8em; margin-left:0.5em; display:inline-block;} /*for side note about summary numbers */
.list .total {background:rgba(255,255,255,50%); font-weight: bold;}

caption {caption-side:bottom;}



form {font-size: .8em;}
select, input, [contenteditable], button, input[type=submit], input::file-selector-button {
	border: none; border-radius: .3em; padding: .2em .4em .3em;
	font-size:inherit; font-family:var(--fontMain); color:var(--textColor);
	background:var(--documentBG);
}
button, input[type=submit], input[type=file], input::file-selector-button {
	cursor:pointer;
}
button, input::file-selector-button {background-color:var(--sectionBG);}

button:hover, input[type=submit]:hover, input[type=file]:hover,
div.dropdown > a:hover, div.dropdown > a:focus {
	box-shadow:0 0 0 .05em;
}

button.dead:hover, button.dead:focus { /* horizontal navigation bar selected page */
	box-shadow: none; cursor: revert; outline: none; color: inherit;
}
:disabled {opacity: 0.5;} /* Not-yet-relevant UI. Visually obscured. */

input[type=file] {
	font-family: var(--fontData); width:100%; box-sizing: border-box;
	background: white; border: .07em solid var(--sectionBG);
}
input[type=file] {font-family: var(--fontData); color:var(--opaqueText);}

input::file-selector-button {margin:.1em .6em 0em 0em;}
select.inline, input.inline, [contenteditable].inline, button.inline {padding: 0 .3em .1em; margin: .05em;}
select, input.dropdown {font-family:var(--fontMain); font-size:inherit; color:inherit;}
input.dropdown::-webkit-calendar-picker-indicator {opacity: 20%; margin-top: -.2em; }
input.dropdown:focus::-webkit-calendar-picker-indicator, input.dropdown:hover::-webkit-calendar-picker-indicator {opacity: 100%}
/* ::-webkit-calendar-picker-indicator { display:none; -webkit-appearance: none; appearance: none;} */
val {display:inline; box-sizing:content-box; position:relative;}
/* input:focus {outline:none;} */

.seemore {display:block; text-align:center; font-size:0.8em; text-decoration:none; color:inherit; opacity:60%; cursor:pointer;}
.seemore:focus, .seemore:hover {opacity:100%}
.subtitle .seemore {display:inline-block; padding:.3em .5em;}
table + a.seemore {display:table; margin:.3em auto 0; padding:.2em;}
ol.spacey > li, ul.spacey > li {line-height: 1.1em; margin: 0.4em 0;}


/* Data Reload Button */
.dataSync {font-size:.85em;}

/* Loading Spinner (inline) */
.loading {
	border: .1em solid var(--textColor); /* transparent white */
	border-top: .1em solid var(--sectionBG);
	border-radius: 50%;
	width: .6em;
	height: .6em;
	animation: spin 2s linear infinite;
	display: inline-block;
	opacity: .5;
}
/* Loading Spinner (between sections) */
pbr.loading { /* pbr is a custom page break element defined above */
	display: block;
	margin: 0 auto;
	font-size: 2em;
}
@keyframes spin { 0%{transform:rotate(0deg);} 100%{transform:rotate(359.9deg);} }
#timesheetsSync .loading {border-top-color:#c23522;}
#timesheetsSync .loading.green {border-top-color:#67c222;}

/* Animated Ellipsis - add to the end of a loading message. See data import for example. */
.loadingEllipsis {
	position: relative;
	display: inline-block;
	/* Note: this container must have &nbsp; inside it to display properly in centered text. */
}

.loadingEllipsis::after {
	display: inline-block;
	animation: dotty steps(1,end) 3s infinite;
	content: '';
	font-weight: bold;
}

@keyframes dotty {
	0%   { content: ' '; }
	25%  { content: ' .'; }
	50%  { content: ' . .'; }
	75%  { content: ' . . .'; }
	100% { content: ' '; }
}

/* Fade out a whole block of something and make it so you can't click on it */
.loadingOverlay:before {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 0; bottom: 0;
	background: var(--documentBG);
	border-radius: 0.5em;
	opacity: 0.7;
	z-index: 999;
	transition: background 0.2s ease-in-out;
}

/* Fade out a whole block, no click, AND show a spinner in the middle */
.loadingOverlayWithSpinner {
	border: 1vb solid var(--textColor); /* transparent white */
	border-top: 1vb solid var(--sectionBG);
	border-radius: 50%;
	width: 5vb;
	height: 5vb;
	animation: spin 2s linear infinite;
	display: inline-block;
	opacity: .5;
	top: 0; right: 0;	left: 0;	bottom: 0;
	position: absolute;
	margin: auto;
	z-index: 1000;
}


/* SPECIFIC DATA CHARTS */
/* this one's for invoice tables so the other 3 narrow columns shrink down */
#payments table th:nth-child(5) {width:37%;} /* description */



/* POPUP INPUT FORMS */

/* The popup form - hidden by default */
.form-popup * {
	box-sizing: border-box;
}

.form-popup {
	white-space: normal;
	box-sizing: border-box;
  position: absolute;
  bottom: 0;
  right: 1.5em;
  border: .4em solid #f1f1f1;
  z-index: 9;
  border-radius: .4em;
}

/* Add styles to the form container */
.form-container {
  max-width: 20em;
  padding: 1em;
  background-color: #282828;
  border-radius: .3em;
}

.form-popup form h3, .form-popup form label {
	color:hsl(0deg 0% 77%);
	/*margin-bottom: .5em;*/
}

.form-container > * {
	border-radius: .2em;
}


/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
  width: 100%;
  padding: .8em;
  margin: .2em 0 1.5em;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: .7em;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:1em;
  opacity: 0.8;
  font-size:inherit;
}

/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

/* TIME */
ms {font-size:.75em} /* used on error page to display milliseconds */
passed {font-size: .6em; opacity: 75%;}

/* COMMON SITUATIONS */
.clear {clear:both;}
.notreadyyet {opacity:30% !important;}
.hidden {display:none !important;}
.seethrough {opacity: 0%;}
.nowrap {white-space:nowrap;}
.right {text-align:right;}
.tinytext {font-size:0.9em; margin:.4em 1.2em; text-align:center;} /* used under data tables on example customer dashboard */
.hiddenJsTemplate {display:none;} /* used in ledger.php for hiding the new-row template used by javascript */
.feedback {font-size:0.8em; text-align:center; opacity:50%; font-style:italic;}
a.annotation {display: block; font-size: .8em;}
.warning {color:#d60000; font-size:.7em; display:block;}
.subsection.warning {margin: 1em 0; background: #150e00;}
.subtext {font-size: .7em; opacity: .5; margin: 0 0 1em 0; padding: .4em .8em .7em; display: inline-block;}
.noselect {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

button.analog { /* used on ledger and tax settings */
	border: .05em solid grey;
	border-radius: .2em;
	padding: .15em .5em .25em;
	background: #00000014;
	opacity: 90%;
	font-size: .8em;
	margin: 0.2em;
	font-weight: bold;
}

button.analog:hover, button.analog:focus {
	opacity: 100%;
	box-shadow: 0 0.3em 1em -0.5em grey;
}

button.analog:focus {
	outline: .05em solid grey;
	outline-offset: -.35em;
}

button.analog:active {
	transform: scale(0.98);
}


button.action {
	display: inline-block;
	position: relative;
	background-color: transparent;
	border: 0;
	padding: 0;
	color: inherit;
	font: inherit;}
button.action:hover, button.action:focus {text-decoration:underline;}

ns {user-select: none;}

button.delete {padding: 0em .3em .3em .3em; color:red; font-weight:bold;}


.popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: hsl(0deg 0% 25% / 79%);
	z-index: 10;
	display: grid;
	place-items: center;
}
.popup > * {display:grid;}
.popup input[type=number]::-webkit-outer-spin-button,
.popup input[type=number]::-webkit-inner-spin-button
	{-webkit-appearance:none; margin:0;}
.popup input[type=number]
	{-moz-appearance: textfield;}


/* Financial Overview used on admin dashboard and partnership history pages */
#financialOverview .section .subsection {margin-top: .3em;}
lbl {display: block; margin-top:.4em; font-size: .8em;}
lbl.click_for_details {cursor: pointer;}
.financial_overview_explanation {
	opacity: 70%;
	padding: 0.2em .4em .3em;
	display: inline-block;
	margin: .5em 0 .3em 1em;
}
.financial_overview_explanation div { font-size:.8em;}
.list.calculation td {padding: 0 .15em;}
amt {letter-spacing: 0.04em; font-size: 1.2em;}



/* MAKE IT SUPER OBVIOUS WHEN YOU'RE LOOKING AT DATA THAT IS
	EITHER NOT CURRENT OR INCLUDES TYPED-IN EXPECTED INCOME */
:root {
	--cautionYellow: #ffb101;
}

.section.historicalOrExperimental::after {
	position: absolute;
	--width: -.05em;
	top: -.1em; bottom: -.1em;
	left: var(--width); right: var(--width);
	content: '';
	z-index: -1;
	background: repeating-linear-gradient(
		-45deg,
		black,
		black 1.4em,
		var(--cautionYellow) 1.4em,
		var(--cautionYellow) 2.6em
	);
	border-radius: .5em;
}

lbl.expectedIncomeIsIncluded, .dataIsHistorical input {
	outline: .05em solid #ffb101;
	background: black;
	border-radius: 0.2em;
	color: var(--cautionYellow);
	height: fit-content;
}

lbl.expectedIncomeIsIncluded {
	display: table;
	padding: 0.1em 0.4em 0.4em;
}




@media (prefers-color-scheme: dark) {
	*:focus, input[type=file]:hover {outline: 2px solid var(--outline); border-radius: .2em}
	a {color:#05a693;}
	/*a:hover, a:focus, .clickable:hover, .clickable:focus,*/
	button {background-color:var(--documentBG);}
	button:hover, button:focus, input[type=submit]:hover, input[type=submit]:focus,
	input[type=file]:hover::file-selector-button, input[type=file]:focus::file-selector-button
		{color:#00eecf;}
	#title h3 {color:orange;}
	.row .header, th {background: black;}
	.subtitle {color:rgb(255 255 255 / 65%);}
	.data .row:nth-child(even) .cell, .data tr:nth-child(even) td {background: rgba(0, 0, 0, 13%);;}
	.data .row:nth-child(even) .cell, .data tr:nth-child(odd) td {background: rgba(0, 0, 0, 20%);}
	input {color-scheme: dark;} /* ok chrome/webkit sucks. This is the best we can do... short of javascript intervention at the bottom of this thread: https://stackoverflow.com/questions/61083813/how-to-avoid-internal-autofill-selected-style-to-be-applied */

	/* hamburger dropdown, should be renamed to popup menu, dropdown is a different thing */
	div.dropdown > a:hover, .dropdown > a:focus {background-color:#111;}
	div.dropdown > div {
		box-shadow: -0.2em 0.2em 1.2em 0em #111, inset 0em -0.2em 2em -0.9em hsl(0deg 0% 9%); /*inside & outside*/
	}

	button.analog {color: #c6c6c6; background: #1a1a1a !important;} /* used on ledger and tax settings */
	button.analog:hover, button.analog:focus {color: inherit;}

	.warning {color:#ff8585; font-size:.7em; display:block;}

}
/* end color scheme */