/* Copyright (C) 2024-2025 Benjamin Bogø
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/* General HTML */
*,
::before,
::after {
	box-sizing: border-box;
}

body {
	background-color: #ffffff;
	color: #000000;
	display: grid;
	font-family: Arial, sans-serif;
	font-size: 16px;
	gap: 10px;
	margin: 0;
	padding: 10px;
}

h1,
h2,
h3 {
	font-weight: bold;
	margin: 0;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.5em;
}

h3 {
	font-size: 1.25em;
}

p {
	margin: 0;
}

ul {
	margin: 0;
	padding-left: 20px;
}

img {
	width: 100%;
}

button,
.button {
	background-color: #3355ff;
	background-image: linear-gradient(#5577ff, #3355ff);
	border: 1px solid #2244ff;
	color: #ffffff;
	cursor: pointer;
	display: inline-block;
	font-size: 1em;
	padding: 4px 8px;
	text-align: center;
	vertical-align: baseline;
}

button.red {
	background-color: #ff0000;
	background-image: linear-gradient(#ff2222, #ff0000);
	border: 1px solid #ee0000;
	color: #ffffff;
}

button:disabled,
button:disabled:active,
button:disabled:hover,
.button:disabled,
.button:disabled:active,
.button:disabled:hover {
	background-color: #eeeeee;
	background-image: linear-gradient(#ffffff, #dddddd);
	border: 1px solid #999999;
	box-shadow: none;
	color: #777777;
	cursor: default;
}

button:active,
button:hover,
.button:active,
.button:hover {
	background-color: #5577ff;
	background-image: linear-gradient(#7799ff, #5577ff);
}

button.red:active:not(:disabled),
button.red:hover:not(:disabled) {
	background-color: #ff2222;
	background-image: linear-gradient(#ff4444, #ff2222);
}

.inline-button {
	font-size: 0.8em;
	padding: 2px 4px;
}

input[type="text"],
input[type="number"],
select {
	background-color: #ffffff;
	border: 1px solid #999999;
	color: #000000;
	font-size: 1em;
	padding: 8px;
	width: 100%;
}

input[type="text"][pattern]:valid:not(:placeholder-shown),
input[type="number"]:valid:not(:disabled) {
	border-color: #008800;
	outline-color: #008800;
}

input[type="text"][pattern]:invalid:not(:placeholder-shown),
input[type="number"]:invalid:not(:disabled) {
	border-color: #ff0000;
	outline-color: #ff0000;
}

input[type="file"] {
	font-size: 1em;
	padding: 8px 0;
	width: 100%;
}

code {
	background-color: #dddddd;
}

.box {
	border: 1px solid #999999;
	display: block;
	overflow: auto;
	padding: 10px;
	position: relative;
	word-break: break-word;
}

.flex,
.flex-col,
.flex-row {
	display: flex;
	gap: 10px;
}

.flex-col {
	flex-direction: column;
}

.flex-row {
	flex-direction: row;
}

.grid {
	display: grid;
	gap: 10px;
}

.one-line {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


/* General SVG */
text {
	alignment-baseline: middle;
	pointer-events: none;
	text-anchor: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.node,
.edge {
	fill: transparent;
	stroke-width: 3px;
	stroke: #000000;
}

.point {
	fill: #000000;
}


/* Menu */
#logo {
	white-space: nowrap;
}

#logo>span {
	font-size: .3em;
	vertical-align: baseline;
}

#menu>button {
	width: 100%;
}


/* Petri nets */
#pnContainer {
	grid-template-columns: auto auto 1fr;
	grid-template-rows: 24px 84px;
	grid-auto-rows: 1fr;
	height: calc(200% + 168px);
}

#pnContainer.collapsed {
	grid-template-rows: 24px;
}

#pn2tauContainer {
	grid-template-columns: 1fr auto;
	grid-template-rows: 24px;
	height: calc(200% - 208px);
}

#pnContainer>h3 {
	grid-column: 1 / span 2;
}

#hints {
	grid-column: 3;
	grid-row: 2;
	height: 84px;
	list-style-type: "- ";
	overflow: auto;
	padding-left: 20px;
	white-space: nowrap;
}

#pn {
	grid-column: 1 / span 3;
}

#pn2tau {
	grid-column: 1 / span 2;
}

.petri-net {
	background-color: #dddddd;
	cursor: move;
	width: 100%;
}

.petri-net .node {
	fill: #dddddd;
}

.petri-net .node,
.petri-net .edge,
.petri-net .point {
	cursor: pointer;
}

.name {
	font-family: 'Times New Roman', serif;
	font-size: 24px;
}

.attr {
	font-family: 'Times New Roman', serif;
	font-size: 16px;
}

.attr:empty+.name {
	transform: translateY(5px);
}

.drag-and-drop {
	border: 1px solid #999999;
	flex-shrink: 0;
	height: 84px;
	padding: 1px;
	width: 84px;
}

.drag-and-drop>* {
	height: 80px;
	width: 80px;
}

.selected .node,
.selected .edge {
	stroke-width: 6px;
}

.selected .point {
	stroke-width: 2px;
	stroke: #000000;
}

#dragPlace .node,
#dragTransition .node,
.petri-net .selected .node,
.petri-net .selected .point {
	cursor: grab;
}

#draggingPlace,
#draggingTransition {
	height: 80px;
	opacity: 0.5;
	pointer-events: none;
	position: fixed;
	width: 80px;
}

#draggingPlace.hide,
#draggingTransition.hide {
	display: none;
}


/* Classification */
#classesContainer {
	grid-template-columns: 1fr auto;
	grid-template-rows: 24px;
}

#classes {
	alignment-baseline: middle;
	font-family: 'Times New Roman', serif;
	font-size: 5px;
	grid-column: 1 / span 2;
}

#classes>g>rect {
	fill: #ffffff;
	stroke-width: 1px;
	stroke: #999999;
}

#classes>g>text {
	fill: #999999;
}

#classes>.active>text {
	fill: #000000;
}

#classPetriNet.active>rect {
	stroke: #282828;
	fill: #ffffff;
}

#classGroupChoiceNet.active>rect {
	stroke: #ffbb00;
	fill: #ffe399;
}

#class2TauSynchronisationNet.active>rect {
	stroke: #cc6600;
	fill: #eac199;
}

#classCCSNet.active>rect {
	stroke: #007f00;
	fill: #99cb99;
}

#classFreeChoiceNet.active>rect {
	stroke: #ff0000;
	fill: #ff9999;
}

#classWorkflowNet.active>rect {
	stroke: #0000ff;
	fill: #9999ff;
}

#classFreeChoiceWorkflowNet.active>rect {
	stroke: #ff00ff;
	fill: #ff99ff;
}

#classPetriNet>text {
	text-anchor: end;
}

#classGroupChoiceNet>text {
	text-anchor: start;
}

#class2TauSynchronisationNet>text {
	text-anchor: middle;
}

#classCCSNet>text {
	text-anchor: middle;
}

#classFreeChoiceNet>text {
	text-anchor: start;
}

#classWorkflowNet>text {
	text-anchor: end;
}

#classFreeChoiceWorkflowNet>text {
	text-anchor: middle;
}


/* CCS */
#ccsContainer {
	grid-template-columns: 1fr auto;
	grid-template-rows: 24px;
}

#ccs {
	background-color: #dddddd;
	color: #222222;
	font-family: 'Consolas', monospace;
	grid-column: 1 / span 2;
	margin: 0;
	overflow: auto;
	padding: 8px;
}

#ccs sub {
	font-size: .95em;
}

.overline {
	border-top: 1px solid;
	color: #888888;
}


/* Dialog */
#dialog {
	align-self: center;
	background-color: #ffffff;
	border: 1px solid #999999;
	box-shadow: 0 0 0 50vmax #00000066;
	display: none;
	justify-self: center;
	margin: -10px !important;
	max-height: min(400px, calc(100vh - 20px));
	max-width: min(600px, calc(100vw - 20px));
	overflow: auto;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999;
}

#dialog.grid {
	display: grid;
}

#dialog::before {
	bottom: 0;
	content: "";
	display: block;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: -1;
}

#dialogTitle {
	width: 100%;
}

#dialogButtons>button {
	width: 100%;
}


/* Help */
#help {
	align-self: center;
	background-color: #ffffff;
	border: 1px solid #999999;
	box-shadow: 0 0 0 50vmax #00000066;
	display: none;
	justify-self: center;
	max-height: 100vh;
	overflow: auto;
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1000;
}

#help.grid {
	display: grid;
}

#helpButtonClose {
	margin-left: auto;
}

.gif {
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.gif>h3,
.gif>p {
	grid-column: 1 / -1;
}

.gif img {
	background-size: contain;
	margin-top: auto;
}


/* No support */
#noSupport {
	background-color: #ffffff;
	bottom: 0;
	display: block;
	left: 0;
	padding: 10px;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 10000;
}

#noSupport.hide {
	display: none;
}


/* Toggle Buttons */
.toggle-button {
	margin-left: auto;
	padding: 2px 4px;
	width: 60px;
}

.collapsed {
	max-height: 46px;
	min-height: 46px;
	overflow: hidden;
}

.collapsed>*:nth-child(n+3) {
	display: none;
}

.toggle-button:after {
	content: "Hide";
}

.collapsed>.toggle-button:after {
	content: "Show";
}


/* Responsive layout */
body {
	grid-template-columns: 1fr;
	height: auto;
}

#menu {
	flex-direction: column;
}

#leftCol,
#rightCol {
	grid-template-rows: auto 1fr;
	overflow: auto;
}

#pn,
#pn2tau,
#ccs {
	height: calc(100vh - 240px);
}

@media only screen and (min-width: 600px) {
	#menu {
		flex-direction: row;
	}

	#logo {
		align-self: center;
	}
}

@media only screen and (min-width: 768px) {
	body {
		grid-template-columns: 1fr 400px;
		grid-template-rows: min-content 1fr;
		height: 100vh;
	}

	#menu {
		grid-column: 1 / span 2;
		grid-row: 1;
	}

	#dialog {
		top: auto;
		transform: none;
	}

	#pn,
	#pn2tau,
	#ccs {
		height: 100%;
	}

	#help {
		margin: -10px !important;
		max-height: calc(100vh - 20px);
		max-width: calc(100vw - 20px);
		top: auto;
		transform: none;
	}
}