@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;600;700&display=swap');
:root{
	--xlarge-text: 8.4vw;
	--large-text:6vw;
	--medium-text:4.8vw;
	--small-text:4.2vw;
	--hero-color:#00CCFF;
	--padding-small:5.5vw;
	--spacing-small:5.5vw;
	--spacing-medium:7.5vw;
	--spacing-large:10vw;
	--spacing-xlarge:16vw;
	--box-shadow:0px 0px .9vw rgba(0,0,0,.1);
	--rounded-corners:1vw;
}

*{box-sizing: border-box; outline:none; border:none; box-shadow:none;}
html{height:100%; width:100%;}
body{font-family:Roboto;}
main{padding:var(--padding-small);}
.highlight-disabled{-webkit-touch-callout: none;/* iOS Safari */-webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */   -moz-user-select: none; /* Old versions of Firefox */	-ms-user-select: none; /* Internet Explorer/Edge */	user-select: none;}
ul,li{list-style-type: none; margin:0; padding:0; text-indent:none;}
button{border:none;background: transparent;}
button[type="back"]{display: block; width:5vw ; height:5vw; background-image: url('https://admin.tunetitan.com/system/images/back.png'); background-position: center; background-repeat: no-repeat; background-size:100%; opacity:0.3;}
.view{display: grid; grid-row-gap:var(--spacing-small);}
.view header:first-of-type{font-size: calc(var(--large-text)*1.4); font-weight: bold;}
.view nav:first-of-type{font-size: var(--large-text); }

#login{background-color:var(--hero-color);position: fixed; top:0; left:0; z-index: 99; width:100%; height:100%; display: flex; justify-content: center; align-items: flex-end; padding:var(--padding-small);}
#login form{text-align: center; max-width: 300px;}
#login input{font-size:calc(var(--medium-text)*1.1);; display: inline-block; width:100%; border:none; outline:none; background-color: ;padding:5%; margin-bottom:1vh; color:white;}
#login button[type="submit"]{background-color:#004488; color:white; text-align: right; padding:2vh; border:none; text-align:right; font-size:var(--large-text); width:100%;}
#login button[type="submit"]:active{opacity:0.5; transform: scale(1.03);}
#login button[type="submit"]:hover{opacity:0.8;}



#overview{display: grid; width:100%; height:100%; grid-template-columns: 50% 50%; grid-auto-rows: 1fr; grid-row-gap:var(--spacing-small); grid-column-gap:calc(var(--spacing-small)/2);justify-content: center; grid-auto-rows: auto;}
#overview header{grid-column: 1/span 2;font-size: var(--large-text); font-weight: bold; display: grid; grid-template-columns:1fr auto; align-items: center; grid-column-gap: calc(var(--padding-small)/2);}
#overview header .avatar{width:6.5vw;}
#overview label{text-transform: capitalize;}
#overview section:active{opacity:0.5;}
#overview section[data="revenue"]{grid-column: 1 /span 2;color:white;font-weight: ;background:#2ddaaf; border-radius:var(--rounded-corners); padding:calc(var(--padding-small)/2);font-size:calc(var(--large-text)*2.6);  text-align:right; width:100%;}
#overview section[data="revenue"] label{font-weight: bold; display: block; text-align: left; font-size:var(--medium-text); padding-bottom:calc(var(--padding-small)/2);}
#overview section[data="revenue"] [data="net_profit_margin"]{font-size:calc(var(--medium-text)*1.1); display: block; width:100%; opacity: .9; font-weight: medium;}
#overview section[data="revenue"] [data="net_profit_margin"]::after{content:'%';}

#overview section[data="jobs"]{background:#00CCFF; color:white; border-radius: var(--rounded-corners); padding:calc(var(--padding-small)/2); text-align: right; font-size:calc(var(--large-text)*3);}
#overview section[data="jobs"] label{font-weight: bold; display: block;text-align: left; font-size:var(--medium-text);}
#overview section[data="agenda"]{background:#004488; color:white; border-radius: var(--rounded-corners); padding:calc(var(--padding-small)/2); text-align:right;  font-size:calc(var(--large-text)*3);}
#overview section[data="agenda"] label {font-weight: bold; display: block; text-align: left; font-size:var(--medium-text);}


#finance{display: grid; width:100%; height:100%; grid-template-columns: 50% 50%; grid-auto-rows: 1fr; grid-row-gap:var(--spacing-small); grid-column-gap:calc(var(--spacing-small)/2);justify-content: center; grid-auto-rows: auto;}
#finance nav{grid-column: 1/span 2;font-size: var(--large-text); font-weight: bold; display: grid; grid-template-columns:1fr auto; align-items: center; grid-column-gap: calc(var(--padding-small)/2);}
#finance nav img{height:5vw; opacity: 0.5;}
#finance header{grid-column: 1/span 2;font-size: calc(var(--large-text)*1.4); font-weight: bold; display: grid; grid-template-columns:1fr auto; align-items: center; grid-column-gap: calc(var(--padding-small)/2);}
#finance section{padding:calc(var(--padding-small)/2);}
#finance section[data="net worth"]{width:100%; display: block; grid-column: 1 /span 2; background-color: #00CCFF; border-radius:var(--rounded-corners); color:white;}
#finance section[data="net worth"] net_worth{grid-column: 1/span 2;font-size:calc(var(--large-text)*2.6); text-align:right; width:100%; display: grid; grid-row-gap:calc(var(--spacing-small)/2);}
#finance section[data="net worth"] net_worth span{grid-column: 1 /span 2; display: block; width:100%; padding-bottom:calc(var(--spacing-small)/2); margin-bottom:calc(var(--spacing-small)/2); border-bottom: 1px solid rgba(255,255,255,0.5);}
#finance section[data="net worth"] net_worth label{grid-column: 1/span 2;font-size:var(--large-text); font-weight: 600; display: block; width:100%; text-align:left; padding:0; margin:0;}
#finance section[data="net worth"] .stat{display: grid; width:100%; grid-template-columns: auto 1fr; padding:calc(var(--padding-small)/4);}
#finance section[data="net worth"] .stat :nth-child(2){text-align:right;}
#finance section[data="performance"]{width:100%; display: block; grid-column: 1 /span 2;}
#finance section[data="transactions"]{width:100%; display: block; grid-column: 1 /span 2;}
#finance section[data="revenue"]{background-color:#2DDAAF; color:white; border-radius:var(--rounded-corners);  grid-column: 1 / span 2;}
#finance section[data="revenue"] nav{width:100%; display: grid; grid-template-columns: 1fr auto; margin-bottom:calc(var(--spacing-small)/1.2);}
#finance section[data="revenue"] nav label{grid-column: 1;font-size:var(--large-text); font-weight: 600; display: block; width:100%; text-align:left; padding:0; margin:0; }
#finance section[data="revenue"] nav select{border:none; -webkit-appearance: none; -moz-appearance: none; appearance: none; -ms-appearance: none; background-color: transparent; color:white; font-size:calc(var(--large-text)/1.15); text-align:right; display: block; margin:0; padding:0;}
#finance section[data="revenue"] .stat:not(gross_revenue){display: grid; width:100%; grid-template-columns:auto 1fr; text-align:right; padding:calc(var(--spacing-small)/4) 0;}
#finance section[data="revenue"] .stat label:not(gross_revenue){text-align:left;}
#finance section[data="revenue"] gross_revenue{display:block; grid-column:1 / span 2; font-size:calc(var(--large-text)*2.6); font-size:; padding-bottom:calc(var(--spacing-small)/2); margin-bottom:calc(var(--spacing-small)/2); border-bottom: 1px solid rgba(255,255,255,0.5); text-align:right;}



#jobs [data="jobs"]{display: grid; width:100%; list-style-type: none; margin:0; padding:0; text-indent:none; grid-gap:calc(var(--spacing-small)/2); margin-top:var(--spacing-small); overflow:auto;}
#jobs [data="jobs"] .job{background-color: #f7f8f9;display: grid; width:100%; list-style-type: none; margin:0; padding:0; grid-template-columns: auto 1fr;  justify-content: flex-start; align-content: flex-start;font-size:calc(var(--small-text)*1.1); grid-column-gap:calc(var(--spacing-small)/1.5); grid-row-gap:calc(var(--spacing-small)/2); padding:var(--spacing-small) calc(var(--spacing-small)/2); border-radius:var(--rounded-corners);}
#jobs [data="jobs"] .job.expand{background-color: #00CCFF; color:white; padding-top:calc(var(--padding-small)/2);}
#jobs [data="jobs"] .job.error{background-color:  #ffcccc ;}
#jobs [data="date"]{font-weight:600; display: block;}
#jobs [data="client"]{}
#jobs [data="details"]:not(#jobs .job.expand){display: none; font-size:calc(var(--small-text)/1.2);}
#jobs [data="jobs"] .job.expand > [data="details"]{display: grid!important; grid-column:2; grid-row-gap:calc(var(--spacing-small)/2)}
#jobs [data="jobs"] .job[status="pending"]{opacity:0.6; background-color:#ffe97a; color:black;}


#agenda [data="agenda"]{display: grid; width:100%; list-style-type: none; margin:0; padding:0; text-indent:none; grid-gap:calc(var(--spacing-small)/2); margin-top:var(--spacing-small); overflow:auto;}
#agenda [data="agenda"] li{background-color: #f7f8f9;display: grid; grid-template-columns: auto 1fr; width:100%; list-style-type: none; margin:0; padding:0; grid-template-columns: auto 1fr;  justify-content: flex-start; align-content: flex-start;font-size:calc(var(--small-text)*1.1); grid-column-gap:calc(var(--spacing-small)/1.5); grid-row-gap:calc(var(--spacing-small)/2); padding:var(--spacing-small) calc(var(--spacing-small)/2); border-radius:var(--rounded-corners);}
#agenda [data="agenda"] li [data="description"]{grid-column: 2;}
#agenda [data="agenda"] li [data="notes"]{display: none; grid-column: 2; font-size:calc(var(--small-text)/1.1);}
#agenda [data="agenda"] li.expand{background-color: #00CCFF; color:white;}
#agenda [data="agenda"] li.expand [data="notes"]{display: block;}
#agenda [data="agenda"] li.expand button[action="mark completed"]{display: block; color:white; font-weight: bold; grid-column:1/span 2; text-align: right; margin-top:var(--spacing-small);}
#agenda [data="agenda"] button[action="mark completed"]{display: none;}
#agenda [data="agenda"] .late{color:red;}
#agenda [data="date"]{font-weight:600; display: block;}

#notepad {display: grid; width:100%; height:100%; font-family:'Roboto'; grid-template-rows:auto auto 1fr auto; grid-column: 100%;}
#notepad nav{margin-bottom:calc(var(--spacing-small));}
#notepad [data="title"]{display: block; width:100%; font-size:var(--large-text);}
#notepad [data="body"]{display: block;background: yellow; width: 100%; font-size:var(--medium-text); font-family:inherit; white-space: wrap; word-break: break-all; overflow:auto;}

#settings{}
#settings ul{display: grid; grid-template-columns: 100%; width:100%;font-size:var(--medium-text); grid-row-gap:calc(var(--spacing-small)/2.5);}
#settings li:hover,
#settings li:active{color:var(--hero-color); }