/*
-------------
| VARIABLES |
-------------
*/

:root {
  --font-size: 12px;
  --line-height: 1.5;
  --total-line-height: calc(var(--font-size) * var(--line-height));
  --background-image: url('/resources/background-tileable.jpg');
  --background: #FCC;
  --text: #533;

  --button-background: #FFA;
  --button-hover-background: #DD9;
  --button-text: #662;

  --field-background: #744;
  --field-active-background: #966;
  --field-text: #FCC;

  --warning: #F00;
  --warning-border: #700;
  --magic: #0FF;
  --magic-border: #077;
}

@font-face {
   font-family: inconsolata;
   src: url('inconsolata.ttf') format('truetype');
}

@font-face {
   font-family: inconsolata-bold;
   src: url('inconsolata-bold.ttf') format('truetype');
}

@media (max-width: 1200px) {
	#app {
		display: none;
	}
	#mobileWarning {
		display: block;
	}
}

@media (min-width: 1200px) {
	#app {
		display: block;
	}
	#mobileWarning {
		display: none;
	}
}


/*
----------------------
| GENERAL FORMATTING |
----------------------
*/

body {
	font-family: inconsolata;
	font-size: var(--font-size);
	line-height: var(--line-height);
}

button, input {
	display: block;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}

input {
	text-align: inherit;
}

.oversize {
	font-family: inherit;
	font-size: calc(var(--font-size) * 2);
	margin: 0px;
}

body, button, .fieldBox {
	background: var(--background-image);
	background-blend-mode: multiply;
  background-size: 100%;
}

body {
	margin: 0px;
	color: var(--text);
	background-color: var(--background);
}

button {
	color: var(--button-text);
	background-color: var(--button-background);

	padding: 0px calc(0.5ch - 1px);
	border: 1px solid var(--button-text);
	border-radius: 2px;
}

.fieldBox {
	color: var(--field-text);
	background-color: var(--field-background);

	padding: 0px calc(0.5ch - 1px);
	border: 1px solid var(--text);
	border-radius: 2px;
}

.fieldBox.focused {
	background-color: var(--field-active-background);
}

input {
	display: block;
	width: 100%;
	padding: 0px;
	color: inherit;
	font-familty: inherit;
	background: transparent;
	border: none;
}

.fieldBox > * {
	height: calc(100% + 2px);
	margin: -1px 0px;
}

button > * {
	height: calc(100% + 2px);
	margin: -1px 0px;
}

button:hover:enabled {
	background-color: var(--button-hover-background);
}

button:disabled {
	opacity: 0.5;
}

input:focus {
	outline: none;
}

.editorBox {
  color: var(--field-text);
  background: var(--background-image);
  background-blend-mode: multiply;
  background-size: 100%;

  background-color: var(--field-background);

  padding: 0px calc(0.5ch - 1px);
  border: 1px solid var(--text);
  border-radius: 2px;

  display: grid;
}

::placeholder {
	color: inherit;
	opacity: 0.5;
}

.scrollBox {
  color: var(--field-text);
  background: var(--background-image);
  background-blend-mode: multiply;
  background-size: 100%;

  background-color: var(--field-background);

  padding: 0px calc(0.5ch - 1px);
  border: 1px solid var(--text);
  border-radius: 2px;

  display: grid;
  overflow-y: auto;
}

.markupBox {
  padding: 0px calc(0.5ch - 1px);
  border: 1px solid var(--text);
  border-radius: 2px;
  min-height: calc(var(--total-line-height) * 5 - 2px);
}

.markupBox > * {
	margin: -1px 0px;
}

.editorBox.focused, .scrollBox.focused {
  background-color: var(--field-active-background);
}

.editorBox::after, .scrollBox::after {
  content: attr(data-replicated-value) " ";
  white-space: pre-wrap;
  visibility: hidden;
  word-wrap: break-word;
  min-width: 0px;
}

textarea {
  resize: none;
  overflow: hidden;
}

.editorBox > textarea, .editorBox::after {
  margin: -1px 0px;

  border: none;
  background: transparent;
  color: inherit;
  padding: 0px;
  font-family: inconsolata;
  font-size: var(--font-size);
  line-height: var(--line-height);

  grid-area: 1 / 1 / 2 / 2;
}

.scrollBox > textarea, .scrollBox::after {
  margin: 0px 0px;

  border: none;
  background: transparent;
  color: inherit;
  padding: 0px;
  font-family: inconsolata;
  font-size: var(--font-size);
  line-height: var(--line-height);

  grid-area: 1 / 1 / 2 / 2;
}

textarea:focus {
  outline: none;
}

.sortable-drag {
  visibility: hidden;
}

.warning {
	color: var(--warning);
	text-shadow: -1px 0 var(--warning-border), 0 1px var(--warning-border), 1px 0 var(--warning-border), 0 -1px var(--warning-border);
}

.magic {
	color: var(--magic);
	text-shadow: -1px 0 var(--magic-border), 0 1px var(--magic-border), 1px 0 var(--magic-border), 0 -1px var(--magic-border);
}

.bold, b {
	font-family: inconsolata-bold;
	font-weight: normal;
}

.flexLine, .lineSpace {
	display: flex;
	flex-flow: row;
	min-height: var(--total-line-height);
	flex: 0 0 auto;
}

.flexLine.oversize {
	min-height: calc(var(--total-line-height) * 2);
}

.centered {
	justify-content: center;
	text-align: center;
}

.breakerSpan {
	flex: 1 1 auto;
}

.modalBox {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	justify-content:center;
	align-items:center;
	background-color: rgba(0, 0, 0, 0.5);
}

.depthTwo.modalBox {
	z-index: 2;
}

.modalSection {
	overflow-y: scroll;
	overflow-x: hidden;
	margin: 1px;
	border: 1px solid var(--text);
	border-radius: 2px;
	padding: 1lh 2ch;

	display: flex;
	flex-flow: column;

	background: var(--background-image);
	background-color: var(--background);
	background-blend-mode: multiply;
  background-size: 100%;

  width: calc(100vw * var(--width) - 4ch - 4px);
	height: calc(100vh * var(--height) - 2lh - 4px);
}

.dotPoint {
	margin: 0px 0.5ch;
}

/*
--------
| MENU |
--------
*/

#menu {
	width: calc(40vw - 6px);
	height: calc(100vh - 6px);
	margin: 1px auto 1px auto;

	overflow-y: hidden;
	overflow-x: hidden;
	border: 1px solid var(--text);
	border-radius: 2px;
	padding: 1px;

	display: flex;
	flex-flow: column;
}

.selectCharacterBox {
	overflow-y: auto;
	display: flex;
	flex-flow: column;
	flex: 1 1 auto;
	padding: 1px;
	margin: 0px 0px 1px;
	border: 1px solid var(--text);
	border-radius: 2px;
}

#characterList, #deletedCharacterList {
	display: flex;
	flex-flow: column;
}

.characterSection {
	height: calc(var(--total-line-height) * 4);
	flex: 0 0 auto;
}

.portrait {
	height: calc(100% - 6px);
	border: 1px solid var(--button-text);
	border-radius: 2px;
	margin: 2px 0px;
}

#newCharacterButton {
	flex: 1;
}

#importFieldBox {
	flex: 1 1 auto;
	min-height: 0px;
}

#importSection {
	overflow-y: hidden;
	--width: 0.3;
	--height: 0.3;
}

#restoreSection {
	overflow-y: hidden;
	--width: 0.5;
	--height: 0.7;
}

#confirmDeleteSection {
	overflow-y: hidden;
}

#characterlessWarning, #deletedCharacterlessWarning, #dicelessWarning {
	opacity: 0.5;
	margin-top: var(--total-line-height);
	user-select: none;
}

#logo {
	height: calc(var(--total-line-height) * 6);
}

#logoLine {
	font-size: 0px;
}

/*
------------------------------
| OUTERMOST GRID AND INFOBAR |
------------------------------
*/

#dnd5eSection {
	display: flex;
	flex-flow: column;
	max-height: 100vh;
}

#menuBar {
	margin: 1px;
}

#exportSection {
	overflow-y: hidden;
	--width: 0.3;
	--height: 0.3;
}

#exportFieldBox {
	flex: 1 1 auto;
	min-height: 0px;
}

#characterSection {
	flex: 1;
	min-height: 0px;

	display: flex;
	flex-flow: row;
	align-items: stretch;
}

.column {
	overflow-y: scroll;
	overflow-x: hidden;
	margin: 1px;
	border: 1px solid var(--text);
	border-radius: 2px;
	padding: 1px;

	display: flex;
	flex-flow: column;

	background: var(--background-image);
	background-color: var(--background);
	background-blend-mode: multiply;
  background-size: 100%;
}

#leftColumn {
	width: calc(30% - 4px);

	display: flex;
	flex-flow: column;
}

#leftColumnSection {
	flex: 1 1 auto;
	min-height: 0px;
}

#diceSection {
	flex: 0 0 auto;
	max-height: calc(50% - 4px);
	overflow-y: hidden;
}

#middleColumn {
	width: calc(35% - 4px);

}

#rightColumn {
	width: calc(35% - 4px);
}

/*
---------------
| LEFT COLUMN |
---------------
*/

#characterImage {
	display: block;
	border: 1px solid  var(--text);
	border-radius: 2px;
	width: calc(100% - 2px);
	line-height: var(--line-height);
}

#characterImageFieldBox {
	flex: 1 1 auto;
}

#nameText {
	flex: 1 1 auto;
}

#nameFieldBox {
	flex: 1 1 auto;
}

#raceSection {
	width: calc(50% - 1.5ch);
}

#backgroundSection {
	width: calc(50% - 1.5ch);
}

#raceText {
	flex: 1 1 auto;
	text-align: right;
}

#raceFieldBox {
	flex: 1 1 auto;
	text-align: right;
}

#backgroundText {
	flex: 1 1 auto;
}

#backgroundFieldBox {
	flex: 1 1 auto;
}

#sizeFieldBox {
	flex: 1 1 auto;
}

#addClassButton {
	flex: 1 1 auto;
}

#descriptionBox {
	flex: 1 0 auto;
}

#descriptionMarkupBox {
	flex: 1 0 auto;
}

/*
----------------
| DICE SECTION |
----------------
*/

#diceTextBox {
	overflow-y: auto;
	overflow-x: hidden;
	margin: 1px;
	border: 1px solid var(--field-border);
	border-radius: 2px;
	padding: 1px;
	color: var(--field-text);

	display: flex;
	flex-flow: column;

	background: var(--background-image);
	background-color: var(--field-background);
	background-blend-mode: multiply;
  background-size: 100%;

  min-height: calc(var(--total-line-height) * 4);
}

#instantMacroFieldBox {
	flex: 1 1 auto;
}

.diceRow {
	display: flex;
	flex-flow: column;
	flex: 0 0 auto;
}

.diceLine {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

.diceDiv {
	position: relative;
	width: calc(var(--total-line-height) * 3);
	height: calc(var(--total-line-height) * 3);

	color: var(--field-background);
	overflow: hidden;
}

.diceDiv.cancelled {
	color: var(--warning-border);
	opacity: 0.5;
}

.diceText {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	transform: translate(-50%,-50%);
}

.diceImage {
	width: calc(var(--total-line-height) * 3);
	z-index: 0;
}

/*
-----------------
| MIDDLE COLUMN |
-----------------
*/

#strengthMacro, #strengthSection, #dexterityMacro, #dexteritySection, #intelligenceMacro, #intelligenceSection, #constitutionMacro, #constitutionSection, #wisdomMacro, #wisdomSection, #charismaMacro, #charismaSection {
	height: calc(var(--total-line-height) * 3);
	flex: 1 1 auto;
}

#addStrengthSkillButton, #addDexteritySkillButton, #addIntelligenceSkillButton, #addConstitutionSkillButton, #addWisdomSkillButton, #addCharismaSkillButton {
	flex: 1 1 auto;
}

.skillButton {
	text-align: left;
}

.sectionPair {
	display: flex;
	flex-flow: row;
}

.miniColumn {
	display: flex;
	flex-flow: column;
	width: calc(50% - 0.5ch);
}

#HPSection {
	flex: 1 1 auto;
}

#notMaxHPSection {
	width: calc(50% - 1.5ch);
	justify-content: flex-end;
}

#maxHPSection {
	width: calc(50% - 1.5ch);
	text-align: left;
}

#addArmorProficiencyButton, #addWeaponProficiencyButton, #addToolProficiencyButton, #addLanguageProficiencyButton {
	flex: 1 1 auto;
}

#speedText {
	text-align: right;
}

#speedField {
	text-align: right;
}

/*
----------------
| RIGHT COLUMN |
----------------
*/

#addItemButton {
	flex: 1 1 auto;
}

#addFeatureButton {
	flex: 1 1 auto;
}

#spellcastingSection {
	display: flex;
	flex-flow: column;
}

#addSpellButton {
	flex: 1 1 auto;
}

#spellcastingAbilityToggleButton {
	width: 13ch;
}

#spellcastingAbilityText {
	width: 13ch;
}

/*
-------------
| DOCUMENTATION |
-------------
*/

code {
	background-color: rgba(255, 255, 255, 0.5);
}

#documentationBox {
	width: 600px;
	margin: auto;
}