/*
	CREATED by 			Gorthian
	Version				1.2
	Letzte Änderung		2025-06-04
	
	GitHub				https://github.com/Gorthian/Roll20_HORDE_CharacterSheet
	Wiki				
	Bugs & Issues		
*/

div.sheet-horde {
	border-style: none;
	background-color: beige;
	background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/HORDE/images/background.png);

	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto;
}

div.sheet-horde div.sheet-logo img {
	width: 25%;

	position:relative; 
	top:30px;
}

div.sheet-horde div.sheet-horde-zeile {
	width: 95%;
	align-self: center;
	justify-self: center;
	margin-bottom: 10px;
}

div.sheet-horde div.sheet-kopfzeile {
	background-color: whitesmoke;
	border-style: solid;
	border-width: 2px;
	border-color:black;

	display: grid;
	grid-template-columns: 40% 40% 20%; 
	grid-template-rows: auto;
	grid-template-areas:
		".	lebenspunkte npc"
		"name klasse .";
}

div.sheet-horde div.sheet-kopfzeile div.sheet-name {
	grid-area: name;
}

div.sheet-horde div.sheet-kopfzeile div.sheet-lebenspunkte {
	grid-area: lebenspunkte;
}

div.sheet-horde div.sheet-kopfzeile div.sheet-klasse {
	grid-area: klasse;
}

div.sheet-horde div.sheet-kopfzeile div.sheet-npc {
	grid-area: npc;
}

div.sheet-horde div.sheet-attribute {
	display: grid;
	grid-template-columns: repeat(5, 19.75%);
    column-gap: 3px;
}

div.sheet-horde div.sheet-attribute div.sheet-attribut {
	justify-self: stretch;
	background-color: whitesmoke;
	border-style: solid;
	border-width: 2px;
	border-color:black;

	display: grid;
}

div.sheet-horde div.sheet-attribute div.sheet-attribut * {
	justify-self: center;
	align-self: start;

}

div.sheet-horde div.sheet-attribute div.sheet-attribut-wert {
	height: 0px;
}

div.sheet-horde div.sheet-attribute div.sheet-attribut-bonus {
	z-index: 5;
    display: grid;
    position: relative;

	top: 15px;
    height: 45px;
}

div.sheet-horde div.sheet-staerken-schwaechen {
	display: grid;
	grid-template-columns: 50% 50%;
}

div.sheet-horde div.sheet-staerken-schwaechen div.sheet-staerken, div.sheet-horde div.sheet-staerken-schwaechen div.sheet-schwaechen {
	justify-self: stretch;
	background-color: whitesmoke;
	border-style: solid;
	border-width: 2px;
	border-color:black;

	display: grid;
}

div.sheet-horde div.sheet-notizen, div.sheet-horde div.sheet-vergangenheit, div.sheet-horde div.sheet-inventar {
	background-color: whitesmoke;
	border-style: solid;
	border-width: 2px;
	border-color:black;

	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto;
}

div.sheet-horde div.sheet-inventar div.sheet-item {
	justify-self: stretch;

	display: grid;
	grid-template-columns: 15% auto;
}

div.sheet-horde div.sheet-inventar div.sheet-waffe {
	justify-self: stretch;

	display: grid;
	grid-template-columns: 15% auto auto auto auto 5%;
	column-gap: 2px;
}

div.sheet-horde div.sheet-inventar div.sheet-waffe div {
	justify-self: stretch;
	display: grid;
}

div.sheet-horde div.sheet-inventar div.sheet-waffe div.sheet-waffe-attribut select {
	width: fit-content;

	margin: unset;
}

div.sheet-horde div.sheet-inventar div.sheet-waffe div.sheet-waffe-schaden {
	display: grid;
	grid-auto-flow: column;
}

/* Eingabefelder */
div.sheet-horde div.sheet-inventar div.sheet-item input[type="text"] {
	width: 100%
}

div.sheet-horde input[type='number'] {
	text-align: center;
}

div.sheet-horde input[type='number']::-webkit-inner-spin-button, 
div.sheet-horde input[type='number']::-webkit-outer-spin-button { 
	opacity: 0;
	margin-left: -14px;	
}

div.sheet-horde div.sheet-attribute div.sheet-attribut input.sheet-d20 {
	display: block;
	position: relative;
	border-style: none;
	text-align: center;
	color: blanchedalmond;
	font-weight: bold;
	z-index: 2;

	background-color: transparent;
	top: 15px;
}

div.sheet-horde textarea {
	width: 95%;
	justify-self: center;
}

/* Buttons */
div.sheet-horde div.sheet-attribute button.sheet-d20
{
	display: block;
	position: relative;
	border-style: none;	
	width: 60px;
	height: 60px;
	top: -30px;		
}

div.sheet-horde div.sheet-waffe button.sheet-d6
{
	display: block;
	position: relative;
	border-style: none;	
	width: 20px;
	height: 20px;
}

/* Überschriften */
div.sheet-horde h2 {
	justify-self: center;
}

/* Rolltemplates */
.sheet-rolltemplate-angriff div.sheet-template-container,
.sheet-rolltemplate-angriff-npc div.sheet-template-container,
.sheet-rolltemplate-attributsprobe div.sheet-template-container {
	background-color: whitesmoke;
	background-image: url(https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/HORDE/images/background.png);
	border-style: solid;
	border-width: 2px;
	border-color:#E68300;

	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto;
}

.sheet-rolltemplate-angriff div.sheet-template-container div.sheet-template-header,
.sheet-rolltemplate-angriff div.sheet-template-container div.sheet-template-desc,
.sheet-rolltemplate-angriff-npc div.sheet-template-container div.sheet-template-header,
.sheet-rolltemplate-angriff-npc div.sheet-template-container div.sheet-template-desc,
.sheet-rolltemplate-attributsprobe div.sheet-template-container div.sheet-template-header,
.sheet-rolltemplate-attributsprobe div.sheet-template-container div.sheet-template-desc {
	background-color: #8F5830;
	justify-self: stretch;

	text-align: center;
	font-weight: bold;
	font-size: larger;
	color: #E68300;
}

.sheet-rolltemplate-angriff div.sheet-template-container div.sheet-template-row,
.sheet-rolltemplate-angriff-npc div.sheet-template-container div.sheet-template-row,
.sheet-rolltemplate-attributsprobe div.sheet-template-container div.sheet-template-row {
	justify-self: stretch;

	display: grid;
	grid-template-columns: 50% 50%;
}

.sheet-rolltemplate-angriff .inlinerollresult,
.sheet-rolltemplate-angriff-npc .inlinerollresult,
.sheet-rolltemplate-attributsprobe .inlinerollresult {
	background-color	: unset !important; /*Important wird für den Darkmode benötigt*/
	border				: unset !important; /*Important wird für den Darkmode benötigt*/
	padding				: unset;
	font-weight			: unset;
	cursor				: help;
	font-size			: 1em;
}

/* Bestimmte Bereiche im Bogen verstecken oder anzeigen, wenn es sich um einen NPC handelt */
div.sheet-horde-npc-only {  display: none !important; }

input[type="checkbox"][name="attr_is_npc"]:checked ~ div.sheet-horde-pc-only {
  display: none !important;
}
input[type="checkbox"][name="attr_is_npc"]:checked ~ div.sheet-horde-npc-only {
  display: block !important;
}