/*
	EDITED by 			Gorthian
	Version				1.0
	Letzte Änderung		2022-05-02
	
	GitHub				https://github.com/Gorthian/Roll20_NHKS_CharacterSheet
	Wiki				https://github.com/Gorthian/Roll20_NHKS_CharacterSheet/wiki
	Bugs & Issues		https://github.com/Gorthian/Roll20_NHKS_CharacterSheet/issues
*/


/*             GRUNDLAGEN                          */

div.sheet-wrapper {
	--sheet-bg			: #ffffff;
	--sheet-text-color	: #000000;	
}

p.sheet-nowrap {
	white-space			: nowrap;
}

/*             GRIDS                               */

div.sheet-NHKS {		
	background-color		: var(--sheet-bg);
	color					: var(--sheet-text-color);
	display 				: grid;
	grid-template-areas		: 	"menu"
								"content"
								"footer"
}

div.sheet-menu {
	display					: inline;
	grid-area				: menu;
}

div.sheet-content {
	display					: grid;
	grid-area				: content;
}

div.sheet-footer {
	display					: grid;
	grid-area				: footer;
}

div.sheet-actor-sheet {
	display					: grid;
	grid-template-columns	: 35% 35% 30%;
	grid-auto-rows			: minmax(100px, auto);
	align-items				: start;
	grid-template-areas		: 	"attributes		attributes	skills"
								"advantages		movies		skills"
								"martialarts	awards		misc"
}

div.sheet-actor-attributes {
	display					: grid;
	grid-area				: attributes;
}

div.sheet-actor-skills {
	display					: grid;
	grid-area				: skills;
}

div.sheet-actor-advantages {
	display					: grid;
	grid-area				: advantages;
}

div.sheet-actor-movies {
	display					: grid;
	grid-area				: movies;
}

div.sheet-actor-martialarts {
	display					: grid;
	grid-area				: martialarts;
}

div.sheet-actor-awards {
	display					: grid;
	grid-area				: awards;
}

div.sheet-actor-misc {
	display					: grid;
	grid-area				: misc;
}

div.sheet-actor-attributes-content {
	display					: grid;
	grid-template-columns	: repeat(2, 50%);
	grid-template-areas		: 	"attributes-left attributes-right"
}

div.sheet-actor-attributes-left {
	display					: grid;
	grid-area				: attributes-left;
}

div.sheet-actor-attributes-right {
	display					: grid;
	grid-area				: attributes-right;
	grid-template-columns	: repeat(2, 50%);
	grid-template-areas		: 	"attr-hitpoints		attr-melee-attack"
								"attr-chipoints		attr-melee-defense"
								"attr-famepoints	attr-ranged-attack"
								"attr-awardpoints	attr-melee-damage"
								"attr-initiative	attr-ranged-damage"
}

div.sheet-actor-attr-hitpoints {
	display					: inline;
	grid-area				: attr-hitpoints;
}

div.sheet-actor-attr-chipoints {
	display					: inline;
	grid-area				: attr-chipoints;
}

div.sheet-actor-attr-famepoints {
	display					: inline;
	grid-area				: attr-famepoints;
}

div.sheet-actor-attr-awardpoints {
	display					: inline;
	grid-area				: attr-awardpoints;
}

div.sheet-actor-attr-initiative {
	display					: inline;
	grid-area				: attr-initiative;
}

div.sheet-actor-attr-melee-attack {
	display					: inline;
	grid-area				: attr-melee-attack;
}

div.sheet-actor-attr-melee-defense {
	display					: inline;
	grid-area				: attr-melee-defense;
}

div.sheet-actor-attr-melee-damage {
	display					: inline;
	grid-area				: attr-melee-damage;
}

div.sheet-actor-attr-ranged-attack {
	display					: inline;
	grid-area				: attr-ranged-attack;
}

div.sheet-actor-attr-ranged-damage {
	display					: inline;
	grid-area				: attr-ranged-damage;
}

div.sheet-actor-attributes-values {
	display					: grid;
	grid-template-columns	: repeat(2, 50%);
	grid-template-areas		: 	"attr-kno	attr-str"
								"attr-col	attr-sta"
								"attr-chi	attr-dex"
}

div.sheet-actor-attr-kno {
	grid-area				: attr-kno;
}

div.sheet-actor-attr-str {
	grid-area				: attr-str;
}

div.sheet-actor-attr-col {
	grid-area				: attr-col;
}

div.sheet-actor-attr-sta {
	grid-area				: attr-sta;
}

div.sheet-actor-attr-chi {
	grid-area				: attr-chi;
}

div.sheet-actor-attr-dex {
	grid-area				: attr-dex;
}

div.sheet-role-sheet {
	display					: grid;
	grid-template-columns	: repeat(2, 50%);
	grid-template-areas		: 	"role-misc 	role-stats"
								"role-skills	role-advantages"
}

div.sheet-role-stats {
	display					: grid;
	grid-area				: role-stats;
	grid-template-columns	: repeat(2, 50%);
	grid-template-areas		: 	"role-image		role-image"
								"role-hitpoints 	role-chipoints"
}

div.sheet-role-skills {
	grid-area				: role-skills;
}

div.sheet-role-advantages {
	grid-area				: role-advantages;
}

div.sheet-role-image {
	grid-area				: role-image;
	text-align				: center;
}

div.sheet-role-hitpoints {
	grid-area				: role-hitpoints;
	text-align				: center;
}

div.sheet-role-chipoints {
	grid-area				: role-chipoints;
	text-align				: center;
}

/*             MENU & TABS                         */

div.sheet-wrapper {
	--display-actor		: block;
	--display-role 		: none;
}

/* show the selected tab */
.sheet-tabstoggle[value="actor"] ~ div.sheet-wrapper {
	--display-actor		: block;
	--display-role 		: none;
}
.sheet-tabstoggle[value="role"] ~ div.sheet-wrapper {
	--display-actor		: none;
	--display-role 		: block;
}

div.sheet-actor{display:var(--display-actor)}
div.sheet-role{display:var(--display-role)}

div.sheet-menu button {
	width		: 30% ;
}

div.sheet-radio-set {
	display					: flex;
	gap						: 5px;
}

/*             Movie Awards                        */

div.sheet-actor-movies div.sheet-radio-set input.sheet-radiobox {
	order					: 1;
	border					: 1px solid gold;
	border-radius			: 50%;
	background				: gold;
	height					: 2rem;
	width					: 2rem;
	-webkit-appearance		: none;
	cursor					: pointer;
	z-index					: 1;
}

div.sheet-actor-movies div.sheet-radio-set input.sheet-radiobox:checked {
	opacity					: 0;
	z-index					: 0;
	position				: absolute;
}

div.sheet-actor-movies div.sheet-radio-set input.sheet-radiobox:checked ~ .sheet-radiobox {
	order					: 3;
	background-color		: transparent;
}

div.sheet-actor-movies div.sheet-radio-set input.sheet-radiobox.sheet-reset {
	order					: 2;
	background-color		: gold;
}

/*             Martial Arts                        */

div.sheet-actor-martialarts div.sheet-radio-set input.sheet-radiobox {
	order					: 1;
	border					: 1px solid black;
	border-radius			: 50%;
	background				: grey;
	height					: 2rem;
	width					: 2rem;
	-webkit-appearance		: none;
	cursor					: pointer;
	z-index					: 1;
}

div.sheet-actor-martialarts div.sheet-radio-set input.sheet-radiobox:checked {
	opacity					: 0;
	z-index					: 0;
	position				: absolute;
}

div.sheet-actor-martialarts div.sheet-radio-set input.sheet-radiobox:checked ~ .sheet-radiobox {
	order					: 3;
	background-color		: transparent;
}

div.sheet-actor-martialarts div.sheet-radio-set input.sheet-radiobox.sheet-reset {
	order					: 2;
	background-color		: grey;
}

/*             Waffen                              */

div.sheet-weapon-box {
	border					: 1px solid black;
	border-radius			: 5px;
	background-color		: lightblue;
	margin					: 5px;
}

div.sheet-role-weapon-table div.sheet-weapon-description {
	float					: left;
	text-align				: left;
	width					: auto;
}

div.sheet-role-weapon-table div.sheet-weapon-attribute {
	float					: left;
	width					: 1.6em;
	text-align				: center;
}

div.sheet-clear-float {
	clear					: both;
}

div.sheet-weapon-attribute span:nth-child(2){
	display					: none;
}

div.sheet-weapon-attribute *:nth-child(1):hover ~span {
	display					: inline;
	position				: absolute;
	border					: 1px solid grey;
	background-color		: lightgrey;
}

/*             DIVERSES                            */

div.sheet-actor-sheet h1 {
	--h1-height			: 1.5em;
	width				: 100%;
	height				: var(--h1-height);
	background			: linear-gradient(to right, black, black 90%, white); 
	color				: white;
	font-size			: var(--h1-height);
	font-weight			: bold;
}	

div.sheet-actor-sheet input, div.sheet-role-sheet input {
	background			: transparent;
	border-style		: none none solid none;
	color				: #000000;
}

div.sheet-actor-sheet textarea {
	height				: 30px;
	width				: 90%;
}

div.sheet-role-sheet textarea {
	height				: 60px;
	width				: 90%;
}

.sheet-label {
	font-weight	: bold;
}

.sheet-input-line .sheet-attr-short {
	font-weight	: bold;
	font-size	: 1.2em;
}

.sheet-input-line .sheet-attr-full {
	font-weight	: bold;
	font-size	: 0.5em;
}

.sheet-actor-attributes-right .sheet-input-line {
	text-align	: center;
}

.sheet-actor-attributes-right .sheet-input-line .sheet-attr-name, .sheet-role-stats .sheet-attr-name {
	font-weight	: bold;
	font-size	: 1.0em;
}

.sheet-actor-attributes-right .sheet-input-line .sheet-attr-desc {
	font-weight	: bold;
	font-size	: 0.7em;
}

.sheet-actor-attributes-right .sheet-input-line input {
	width		: 45%;
	text-align	: center;
}

.sheet-input-line {
	display		: inline-flex;
	width		: 95%;
}

.sheet-input-line .sheet-label {
	display		: inline-block;
}

.sheet-input-line input.sheet-attribute-value {
	flex-grow	: 1;
	height		: 100%;
	text-align	: center;
	font-weight	: bold;
	font-size	: 1.5em;
}

.sheet-actor-skills select {
	width		: 60px;
}

div.sheet-actor-skills * {
	font-size	: 0.95em;
}

div.sheet-skill-entry, div.sheet-combat-entry {
	display			: flex;
	flex-direction	: row;
	justify-content : space-between;
	padding			: 0;
	margin			: 0;
}

div.sheet-skill-entry div, div.sheet-combat-entry div {
	width			: auto;
	vertical-align	: middle;
}

div.sheet-skill-name, div.sheet-combat-attack {
	width			: 100px;
	text-align		: left;
}

div.sheet-skill-entry div.sheet-skill-value, div.sheet-combat-entry div.sheet-combat-value {
	width		: 10%;
	text-align	: right;
}

div.sheet-skill-entry div.sheet-skill-attribute select {
	width		: 60px;
}

div.sheet-skill-entry button[type="action"], div.sheet-combat-entry button[type="action"] {
	width	: 100px;
}

/* Chrome, Safari, Edge, Opera */
input.sheet-no-arrows::-webkit-outer-spin-button,
input.sheet-no-arrows::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number].sheet-no-arrows {
  -moz-appearance: textfield;
}

/* 				Allgemeine Buttons					*/

button[type="action"] {
	width				: 85%;
}

/*             Hintergrundbilder                   */

div.sheet-actor-attributes-left {
	background-image	: url("https://github.com/Gorthian/Roll20_NHKS_CharacterSheet/blob/main/images/standard/Schauspielerbogen_1_25_freigestellt.png?raw=true");
	background-position	: top left;
	background-size		: contain;
	background-repeat	: no-repeat;
}

div.sheet-actor {
	background-image	: url("https://github.com/Gorthian/Roll20_NHKS_CharacterSheet/blob/main/images/standard/Schauspielerbogen_2_25_freigestellt.png?raw=true");
	background-position	: top right;
	background-size		: 70%;
	background-repeat	: no-repeat;
}

div.sheet-content {
	background-image	: url("https://github.com/Gorthian/Roll20_NHKS_CharacterSheet/blob/main/images/standard/Schauspielerbogen_3_25_freigestellt.png?raw=true");
	background-position	: bottom;
	background-size		: contain;
	background-repeat	: no-repeat;
}

/*             Roll Templates                       */

.sheet-rolltemplate-initiative .sheet-template-container,
.sheet-rolltemplate-skill .sheet-template-container,
.sheet-rolltemplate-attribute .sheet-template-container {
	border				: 1px solid lightgrey;
	background			: white; 	
	background-image	: url("https://github.com/Gorthian/Roll20_NHKS_CharacterSheet/blob/main/images/standard/Schauspielerbogen_2_25_freigestellt.png?raw=true");
}

.sheet-rolltemplate-initiative .sheet-template-header,
.sheet-rolltemplate-skill .sheet-template-header,
.sheet-rolltemplate-attribute .sheet-template-header {
	width				: 100%;
	background			: linear-gradient(to right, black, black 90%, white); 
	color				: white;
	font-weight			: bold;
}

.sheet-rolltemplate-initiative .sheet-template-row,
.sheet-rolltemplate-skill .sheet-template-row,
.sheet-rolltemplate-attribute .sheet-template-row {
	padding					: 3px;
	display					: grid;
	grid-template-columns	: 80% 20%;
	grid-template-areas		: "key value";
}

.sheet-rolltemplate-initiative .sheet-template-key,
.sheet-rolltemplate-skill .sheet-template-key,
.sheet-rolltemplate-attribute .sheet-template-key {
	grid-area			: key;
	text-align			: left;	
	font-weight			: bold;
	font-size			: 0.95em;
}

.sheet-rolltemplate-initiative .sheet-template-value,
.sheet-rolltemplate-skill .sheet-template-value,
.sheet-rolltemplate-attribute .sheet-template-value {
	grid-area			: value;
	text-align			: left;	
}

.sheet-rolltemplate-initiative .sheet-template-result,
.sheet-rolltemplate-skill .sheet-template-result,
.sheet-rolltemplate-attribute .sheet-template-result {	
	padding				: 3px;
	text-align			: center;
	font-weight			: bold;
}

/*             Schriftarten                         */

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap");

div {font-family: "Open Sans";}

div.sheet-NHKS h1 {font-family: "Bebas Neue";}