/* -------------------------------------------------------------------*/
/* Bentestree CSS
/* -------------------------------------------------------------------*/

:root {
	--colbg: 					#f0f0f0;
	--colinput:				#ffffff;
	--collow: 				#d6d6d6;
	--coldark:				#777777;
	--coldeco:				#3080C0;
	--colttip:				#a0d0e0;
  --indent:   2;
  font-size:  12px;
}

* {
	box-sizing: border-box;
	border-radius: 	0.2em;
	font-family: sans-serif, "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji";
  font-size: inherit;
	margin:  0;
	border:  0;
	padding: 0;
	cursor: default;
  background-color: var(--colbg);
}

.mode_test { color: #00BB00;}  /* ☭ */
.mode_live { color: red;}      /* ☭ */

/* --------------------------------------------------------- */
/* Debugging
/* --------------------------------------------------------- */

/*
	body          { border:  0px solid cyan; }

	div[id*=PAGE]   { border:  6px solid red }
	div[id*=DETAIL] { border:  4px solid green }
	div[id*=PROJ],
	div[id*=TREE]   { border:  4px solid blue }
*/

/* --------------------------------------------------------- */
/* Elementarteilchen
/* --------------------------------------------------------- */

input,
select {
	padding: 0 1ch;
	height:  2.5ch;
	background-color: var(--collow);
	width: 15ch;
}

input[type=number] {
	width: 6ch;
	text-align: right;
}

input:hover,
button:hover,
select:hover,
textarea:hover
	{ background-color: var(--colttip); }

input:focus,
select:focus,
button:focus,
textarea:focus
	{ background-color: var(--colinput); }

button { white-space: nowrap; }

/* -------------------------------------------------- */
/* ONEVIEW:  NAVI-Leisten sind überall gleich
/* -------------------------------------------------- */

div[id*=_NAVI] {
	display: flex;
	justify-content: flex-end;
	background-color: var(--collow);
	font-size: 1.5em;
	height:    1.5em;
}

/* -------------------------------------------------- */
/* ONEVIEW: PAGE (und LOGON-Screen)
 *
 * LOGON
 * PAGE
 * - PROJ
 * - DETAIL
 * - TREE
 *
/* -------------------------------------------------- */

#LOGON,
#PAGE {
	display: grid;
	height: 98cqh;
  grid-template-rows: max-content max-content 1fr;
	width: fit-content;
	max-width:   100cqw;
	padding: 0.3cap 0.3cap 1cap 0.3cap;
}

#LOGON_KOPF,
#PAGE_KOPF {
	min-height:  2cap;
	max-height: 15cap;
	padding:      1ch;
	overflow-y:  auto;
	scrollbar-gutter: stable;
}

		#PAGE_KOPF div {
			font-family: monospace;
			white-space: pre-wrap;
		}

#LOGON_INHALT,
#PAGE_INHALT {
	display: grid;

	min-height: 0;
	grid-template-rows: 1fr;

	max-width: 100cqw;
	grid-template-columns: max-content 1fr;
}

#PAGE_INHALT>div               { padding-right: 15px; }
#PAGE_INHALT>div:last-child    { padding-right:  0px; }

/* -------------------------------------------------- */
/* LOGON-Extras
/* -------------------------------------------------- */
#LOGON_INHALT   { display: block; }
#LOGON_INHALT>* { margin:  15px; }

/* -------------------------------------------------- */
/* PROJEKT-Liste, PROJEKT-TREE & LOGON
/* -------------------------------------------------- */

/* Mini-Tree zum DETAIL-Bild gibt's nur im Portrait */
#KIDS { display: none; }

#PROJ,
#TREE {
	display: grid;
	min-height: 0;
  grid-template-rows: max-content max-content 1fr;

	max-width: 100cqw;
	overflow-x: auto;
	scrollbar-gutter: stable;
}

#PROJ_KOPF,
#TREE_KOPF {
	padding: 0.5cap 0 1.5cap 0;
	position: relative;
}
		#PROJ_KOPF > div,
		#TREE_KOPF > div {
			font-weight: bold;
			font-size: 0.7em;
			text-transform: uppercase;
			position: absolute;
		}

#PROJ_INHALT,
#TREE_INHALT {
	display:    grid;

	min-height: 0;
	grid-auto-rows: max-content;
	overflow-y: auto;
	scrollbar-gutter: stable;

	width: max-content;
	grid-template-columns: repeat(14, max-content);
	column-gap: 1ch;
	overflow-x: clip;
}

/* Knoten / Blätter und Zellen  */
#TREE_INHALT>.css_node { max-height: 20% }

.css_node,
.css_line {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / -1;
}

/* Zeilenabstand für Knoten und Blätter */
.css_node { margin: 0.4ch 0 0 0; }
.css_leaf:first-child { margin-top: 1ch; }
.css_node:last-child  { margin-bottom: 1ch; }

.css_line .css_cell_icon { text-align: center; }


/* Ganz vorn PIN und MATCH */
.css_cell_PINUP        button { visibility: hidden; }
.css_cell_PINUP:hover  button { visibility: visible; }
.css_cell_FMATCH:hover button { }

/* Level-Einrückungen, vielleicht geht das eleganter? */
.css_cell_l0 { padding-left: calc(var(--indent) *  0ch);  }
.css_cell_l1 { padding-left: calc(var(--indent) *  1ch);  }
.css_cell_l2 { padding-left: calc(var(--indent) *  2ch);  }
.css_cell_l3 { padding-left: calc(var(--indent) *  3ch);  }
.css_cell_l4 { padding-left: calc(var(--indent) *  4ch);  }
.css_cell_l5 { padding-left: calc(var(--indent) *  5ch);  }
.css_cell_l6 { padding-left: calc(var(--indent) *  6ch);  }
.css_cell_l7 { padding-left: calc(var(--indent) *  7ch);  }
.css_cell_l8 { padding-left: calc(var(--indent) *  8ch);  }
.css_cell_l9 { padding-left: calc(var(--indent) *  9ch);  }
.css_cell_ln { padding-left: calc(var(--indent) * 10ch);  }

/* Aufblättern einer verborgenen Ebene */
.css_cell_LEVPLUS   button { visibility: hidden; }
.css_cell_LEVMINUS  button { visibility: visible; }

/* Der Typ ist im Vollbild schon im Level dargestellt */
.css_cell_typ { display: none; }

/* ID hervorheben, für Drag & Drop */
.css_cell_id button {
	width: 10ex;
	color: white;
	background-color: var(--coldark);
}


/* -------------------------------------------------- */
/* ONEVIEW:  DETAIL, „Editor“, FILTER
/* -------------------------------------------------- */

#DETAIL {
	display:    grid;
	min-height: 0;
	grid-template-rows: max-content max-content 1fr;
	overflow-y: auto;
	scrollbar-gutter: stable;
}

#DETAIL_KOPF {
	padding: 1cap 0 1cap 0;
	height: max-content;
}

#DETAIL_INHALT {
	display: grid;
	grid-auto-rows: max-content;

	overflow-y: auto;
	scrollbar-gutter: stable;

	grid-template-columns: max-content;
	align-items: center;
	gap: 0.8ch;
}

.css_tooltip #DETAIL_INHALT { overflow: clip; }

#FILTER_INHALT {
	display: flex;
	gap: 2ex;
}

/* Ein Label-Value-Pair im Detailbild */
.css_e_nva {
	display: grid;
	grid-template-columns: 30% auto;
	align-items: center;
	font-size: 1.1em;
}

.css_e_nva .css_label { text-align: right; }

.css_label {
	display: inline-block;
	font-size: 0.7em;
	font-weight: bold;
	text-transform: uppercase;
	padding-right: 1rem;
}

/* Wo das Label eine OptionBox enthält (z.B Rollen)  */
div[id*=rolerow] label>select {
	width: 7ch;
	font-size: 1.5em;
}

.css_role_seeme { }
.css_role_donot { display: none; }

.css_cell_title { width: 30ch; overflow-x: clip; }
#title 					{ width: 30ch; height: 2cap; }

.css_longtext {
	width: 100%;
	min-height: 6cap;
	max-height: 30cap;
	padding: 1rem;
	overflow: scroll;
}

#start,
#ziel { width: 18ch; }

#dauer_einheit	{ width: 5ch; }

/* Nicht nötig, aber der Übersicht dienend */
#descr,
#drop_file_zone {
	margin-top:    0.5rem;
	margin-bottom: 0.5rem;
}

/* ----------------------------------------------------------------- */
/* ID + Title in Detailanzeige und Baum optisch verknüpfen */
/* ----------------------------------------------------------------- */

input.css_endetail,
button.css_endetail 	{ color: white; background-color: var(--coldeco); }

.css_endetail:hover		{	color: black; }
.css_endetail:focus		{	color: black; background-color: white; }

/* Die ID soll auch im Detailbild zum benachbarten Titel passen */
button[name=NONE].css_tool.css_endetail.css_action {
	height: 2cap;
	width: 10ch;
}

/* ----------------------------------------------------------------- */
/* Filter
/* ----------------------------------------------------------------- */
button[name=FILTRON],
button[name=FMATCH] { color: var(--coldeco); }

#search input {
	width: 100%;
  transition: width 4s ease-in-out;
  margin: 0 0;
}

.css_einfilter {
	width: 30ex;
	margin-top: 2ex;
	background-color: var(--collow);
}

.css_einfilter thead label,
.css_einfilter thead td {
	margin-left: 2ex;
	text-align: left;
	background-color: var(--collow);
}

.css_einfilter label {
}

.css_einfilter tbody td  {
	text-align: right;
	width: 16ex;
	color: black;
}

.css_tristate { width: 5ex; }

/* ----------------------------------------------------------- */
/* TOOLS aus but(..) mit Tooltip. In und außerhalb eines NAVI
/* ----------------------------------------------------------- */

.css_tool {
	font-size: inherit;
	min-width: 3ch;
	display: 	 inline-block;
}

	/* Die Filteroptionbox */
	#filter {
		height: 100%;
		font-size: 0.8em;
	}

	/* Der Schieberegler */
	#tiefe {
		height: 100%;
		width:   15ch;
	}

.css_tool { background-color: inherit; }

.css_tool:hover .css_tooltip { visibility: visible; }

.css_tooltip {
	z-index: 9999;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--coldeco);
	background-color: var(--colttip);
	padding: 0.5ch 0.5ch;
	position: fixed;
	top:  10%;
	left: 10%;
  visibility: hidden;
	transition: visibility 0s 1s;
}

/* Dummy-Button zur Teilung links/rechts im _NAVI */
button.css_tool[name=SEPA] {width: max-content; margin-left: auto; }

/* --------------------------------------------*/
/* BUTTONS sind spezielle Tools ... für Action */
/* --------------------------------------------*/

.css_action:hover:enabled { background-color: var(--colttip); }
.css_action:disabled 			{ opacity: 40%; }

#FILTRON,
#FMATCH { color: var(--coldeco); }

/* ----------------------------------------------------------------- */
/* Hinhaltemeldung
/* ----------------------------------------------------------------- */
#iambusy {
	cursor: progress;
  visibility: visible;
	padding: 2rem;
	position: fixed;
	top:  10vh;
	left: 20vw;
	background-color: var(--collow);
	color: red;
	font-size: 2em;
}

*::backdrop { backdrop-filter: blur(5px); }

/* -------------------------------------------------------------------*/
/* UPLOAD File
/* -------------------------------------------------------------------*/
#drop_file_zone {
	background-color: var(--collow);
	border: #999 5px dashed;
	height: 10ex;
}

#drag_upload_file {}

#drag_upload_file p {
  text-align: center;
}

#drag_upload_file #selectfile {
  display: none;
}

/* ----------------------------------------------------------------- */
/* LOGON, Kennwortsyntaxprüfung
/* ----------------------------------------------------------------- */
.css_valid   { color: green; }
.css_invalid { color: red; }

.css_valid:before   { position: relative; left: -2ch; content: "✔"; }
.css_invalid:before { position: relative; left: -2ch; content: "✖";
}

/* ----------------------------------------------------------------- */
/* Legendenbildung
/* ----------------------------------------------------------------- */
.css_leghead td,
.css_legend  td   {
	padding: 0.2rem 2rem;
}

.css_leghead td {
	height: 2em;
	font-weight: bold;
	text-transform: uppercase;
	padding-right: 1rem;
	color: var(--coldeco);
	background-color: var(--collow);
}

/* ----------------------------------------------------------------- */
/* Dr Schieber & Nightmare
/* ----------------------------------------------------------------- */

input[type=range] {
  -webkit-appearance: none;
  cursor: pointer;
  border-radius: 5px;
  max-width: 10ch;
}

input[type=range]:hover { background-color: var(--colttip); }

/* M O Z I L L A */
input[type=range]::-moz-range-track {
  background-color: var(--coldeco);
  border: 0.2rem solid #000000;
  border-radius: 5px;
}

input[type=range]::-moz-range-thumb {
  width:  0.7ch;
  background-color: var(--colinput);
  border: 0.2rem solid #000000;
  border-radius: 5px;
}

/* W E B K I T   noch im Bau */
input[type=range]::-webkit-slider-runnable-track {
  background-color: var(--coldeco);
  border: 0.1rem solid #000000;
  border-radius: 5px;

  height: 25%;
  border: 0.2rem solid #ff000;
  background-color: var(--coldeco);
}

input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 20px;
  margin-top: -8px;
  width: 10px;
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;
  background-color: var(--colinput);
  -webkit-appearance: none;
}


/* MICROSOFT
input[type=range]::-ms-track {
  height: 1ex;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: var(--coldeco);
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: var(--coldeco);
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 3ex;
  width:  1ex;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower { background: var(--coldeco); }
input[type=range]:focus::-ms-fill-upper { background: var(--coldeco); }
*/


/* ------------------------------------------------------------ */
/*  PORTRAIT
/* ------------------------------------------------------------ */
@media(orientation: portrait)  {

  :root	{ font-size:  4cqw; }

	div[id*="_NAVI"] { font-size: 1.5em; }

/* Anstelle des Baums nur die direkten Kids des Details	*/
	#KIDS { display: initial; }
	#TREE,
	#PROJ_KOPF  { display: none; }

/* Projektliste & Baumstücke ganz anders formatieren */
	.css_node,
	.css_line {
		display: grid;
		grid-template-columns: 2ch 6ch repeat(5, 2ch) 6ch;

		grid-template-areas:
			"level id    typ   stat  prio  phase owner plusone"
			".     title title title title title title title";

		column-gap: 1ch;
		padding: 0.3rem 0 0.3rem 0;
	}

#DETAIL_INHALT { gap: 1.4ch; }

	.css_cell_level   { grid-area: level;   width: max-content; }
	.css_cell_id      { grid-area: id;      width: max-content; }
	.css_cell_typ     { grid-area: typ;     width: max-content; }
	.css_cell_stat    { grid-area: stat;    width: max-content; }
	.css_cell_prio    { grid-area: prio;    width: max-content; }
	.css_cell_phase   { grid-area: phase;   width: max-content; }
	.css_cell_owner   { grid-area: owner;   width: max-content; }
	.css_cell_title   { grid-area: title; }

	.css_cell_PINUP,
	.css_cell_start,
	.css_cell_ziel,
	.css_cell_delete,
	.css_cell_plusone,
	#filter,
	#tiefe { display: none; }

/* Im NAVI alles linksbündig, Button-Plätze sparen */
	div[id*=_NAVI] { justify-content: flex-start; }
	button.css_tool[name=SEPA] { display: none; }

	button[name=KEEP],
	button[name=LEGEN1],
	button[name=PROTO],
	button[name=ADMIN],
	button[name=GENERAT],

	button[name=PINUP],
	button[name=PINOF],
	button[name=KLON],
	button[name=SPLIT] { display: none; }
}