/* Copyright (C) 2026 WorkflowGuide
 *
 * 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.
 *
 * Styles of the WorkflowGuide module. Loaded on every page (guide panel),
 * so every rule is scoped with a wg- prefix.
 */

:root {
	--wg-accent: var(--colortextlink, #0a5cad);
	--wg-border: rgba(128, 128, 128, 0.28);
	--wg-border-strong: rgba(128, 128, 128, 0.45);
	--wg-soft: rgba(128, 128, 128, 0.07);
	--wg-card-bg: var(--colorbackbody, #fff);
	--wg-ok: #2e8b57;
	--wg-skip: #8a8a8a;
	--wg-hint: #c98a00;
	--wg-hint-bg: rgba(255, 196, 0, 0.14);
	--wg-hint-border: rgba(220, 160, 0, 0.55);
	--wg-radius: 8px;
}

/* ---------- Type colors ---------- */
.wg-type-info { --wg-tc: #2f80c9; }
.wg-type-checklist { --wg-tc: #2e8b57; }
.wg-type-yesno { --wg-tc: #8e44ad; }
.wg-type-choice { --wg-tc: #16a085; }
.wg-type-text, .wg-type-textarea { --wg-tc: #5a6d84; }
.wg-type-number { --wg-tc: #d35400; }
.wg-type-date { --wg-tc: #c0392b; }
.wg-type-link { --wg-tc: #3f51b5; }
.wg-type-thirdparty { --wg-tc: #8d6e63; }
.wg-type-upload { --wg-tc: #607d8b; }

.wg-hintcolor { color: var(--wg-hint); }

/* ---------- Badges ---------- */
.wg-badge {
	display: inline-block;
	font-size: 0.75em;
	line-height: 1.5;
	padding: 0 7px;
	border-radius: 10px;
	vertical-align: middle;
	font-weight: normal;
	white-space: nowrap;
}
.wg-badge-mandatory { background: rgba(192, 57, 43, 0.12); color: #b03a2e; }
.wg-badge-optional { background: var(--wg-soft); color: var(--wg-skip); }

/* ---------- Icon buttons ---------- */
.wg-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	color: inherit;
	opacity: 0.65;
}
a.wg-iconbtn:hover { background: var(--wg-soft); opacity: 1; text-decoration: none; }
.wg-iconbtn.wg-disabled { opacity: 0.2; }
.wg-iconbtn-danger:hover { color: #c0392b; }

/* ---------- Progress ---------- */
.wg-progress {
	display: inline-block;
	vertical-align: middle;
	width: 140px;
	height: 8px;
	border-radius: 4px;
	background: var(--wg-soft);
	border: 1px solid var(--wg-border);
	overflow: hidden;
}
.wg-progress-bar { height: 100%; background: var(--wg-ok); transition: width 0.3s; }
.wg-progress-label { font-size: 0.85em; margin-left: 6px; vertical-align: middle; opacity: 0.75; }
.wg-progress-small { width: 80px; height: 6px; }
.wg-run-progress .wg-progress { width: calc(100% - 50px); }

/* ---------- Empty states ---------- */
.wg-empty {
	padding: 22px;
	text-align: center;
	border: 1px dashed var(--wg-border-strong);
	border-radius: var(--wg-radius);
	opacity: 0.85;
	margin: 10px 0;
}
.wg-empty.small { padding: 12px; }
.wg-empty .fas { margin-right: 6px; opacity: 0.6; }

/* ================================================================== Builder */
.wg-builder { margin-top: 18px; }

.wg-steplist { list-style: none; margin: 0; padding: 0; }
.wg-steplist.wg-saving { opacity: 0.5; pointer-events: none; }

.wg-stepitem {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	margin: 0 0 8px 0;
	border: 1px solid var(--wg-border);
	border-radius: var(--wg-radius);
	background: var(--wg-card-bg);
	position: relative;
}
.wg-stepitem:hover { border-color: var(--wg-border-strong); }
.wg-stepitem:target { box-shadow: 0 0 0 2px var(--wg-accent); }
.wg-stepitem-edit { display: block; border-color: var(--wg-accent); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
.wg-sort-placeholder { border: 2px dashed var(--wg-accent); border-radius: var(--wg-radius); margin-bottom: 8px; list-style: none; }

.wg-drag { cursor: grab; opacity: 0.35; padding: 6px 2px; }
.wg-drag:hover { opacity: 0.8; }
.wg-stepnum {
	flex: 0 0 auto;
	min-width: 26px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	border-radius: 13px;
	background: var(--wg-soft);
	font-weight: bold;
	font-size: 0.9em;
	margin-top: 2px;
}
.wg-stepicon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: var(--wg-tc, #888);
}
.wg-stepbody { flex: 1 1 auto; min-width: 0; }
.wg-steptitle { font-weight: bold; font-size: 1.05em; }
.wg-stepmeta { font-size: 0.85em; opacity: 0.7; margin-top: 2px; }
.wg-stepinstr { font-size: 0.9em; opacity: 0.8; margin-top: 4px; }
.wg-stepactions { flex: 0 0 auto; display: flex; gap: 2px; white-space: nowrap; }

.wg-addsection { margin-top: 16px; }
.wg-addtitle { font-weight: bold; font-size: 1.05em; margin: 6px 0 10px 0; }
.wg-addtitle .fas { color: var(--wg-accent); margin-right: 4px; }

.wg-palette {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 10px;
}
a.wg-tile, span.wg-tile {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 10px 12px;
	border: 1px solid var(--wg-border);
	border-radius: var(--wg-radius);
	background: var(--wg-card-bg);
	color: inherit;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
a.wg-tile:hover {
	text-decoration: none;
	border-color: var(--wg-tc, var(--wg-accent));
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
}
.wg-tile-icon {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: var(--wg-tc, #888);
}
a.wg-tile:hover .wg-tile-icon { box-shadow: 0 0 0 3px rgba(128, 128, 128, 0.15); }
.wg-tile-text { display: flex; flex-direction: column; min-width: 0; }
.wg-tile-label { font-weight: bold; }
.wg-tile-desc { font-size: 0.82em; opacity: 0.7; margin-top: 2px; line-height: 1.3; }
.wg-palette-group {
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.65;
	margin: 14px 0 6px 2px;
}
.wg-addtitle + .wg-palette-group { margin-top: 4px; }
.wg-tile-disabled { opacity: 0.55; filter: grayscale(0.8); }
a.wg-tile.wg-tile-disabled:hover { transform: none; box-shadow: none; }

/* Placeholder help in the step form */
.wg-phhelp { margin-top: 6px; }
.wg-phhelp summary { cursor: pointer; color: var(--wg-accent); }
.wg-phgroup { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.wg-phgroup-label { flex: 0 0 100%; font-weight: bold; font-size: 0.9em; margin-top: 4px; }
a.wg-ph {
	display: inline-block;
	padding: 1px 6px;
	border: 1px solid var(--wg-border);
	border-radius: 10px;
	font-size: 0.85em;
	color: inherit;
	white-space: nowrap;
}
a.wg-ph:hover { text-decoration: none; border-color: var(--wg-accent); }
a.wg-ph code { font-size: 0.95em; }

/* Preview / editable data of an action for an external system */
.wg-extdata { width: 100%; max-width: 760px; border-collapse: collapse; margin: 4px 0 8px 0; }
.wg-extdata td { padding: 4px 6px; vertical-align: top; }
.wg-extdata td.wg-extdata-label { width: 30%; white-space: nowrap; opacity: 0.8; }
.wg-extdata input[type=text], .wg-extdata textarea { width: 100%; box-sizing: border-box; }
.wg-extdata .wg-missing { border-color: #e0a800; }
.wg-extinfo { margin: 6px 0; }
.wg-extinfo .fas { opacity: 0.7; }
.wg-extresult a { white-space: nowrap; }
.wg-jsonpreview { max-height: 260px; overflow: auto; font-size: 0.85em; background: rgba(128, 128, 128, 0.08); padding: 8px; border-radius: 6px; }

.wg-stepform-title { font-weight: bold; font-size: 1.1em; margin: 2px 0 12px 0; }
.wg-stepform-title .fas { color: var(--wg-tc, var(--wg-accent)); margin-right: 4px; }
.wg-stepform-table td { padding-top: 6px; padding-bottom: 6px; }
.wg-typedesc { margin-left: 8px; }

/* ================================================================== Overview */
.wg-intro { margin: -4px 0 14px 0; }
.wg-section { margin: 18px 0 26px 0; }
.wg-section-title { margin: 0 0 10px 0; font-size: 1.15em; }
.wg-section-title .fas { opacity: 0.6; }

.wg-runcards, .wg-tiles, .wg-quickstart {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
}
a.wg-runcard {
	display: block;
	padding: 12px 14px;
	border: 1px solid var(--wg-border);
	border-left: 4px solid var(--wg-ok);
	border-radius: var(--wg-radius);
	background: var(--wg-card-bg);
	color: inherit;
}
a.wg-runcard:hover { text-decoration: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.wg-runcard-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.wg-runcard-title { font-weight: bold; }
.wg-runcard-ref { font-size: 0.8em; white-space: nowrap; }
.wg-runcard-progress { margin: 8px 0; }
.wg-runcard-progress .wg-progress { width: calc(100% - 50px); }
.wg-runcard-meta { font-size: 0.9em; }
.wg-runcard-foot { margin-top: 6px; }

a.wg-quickstart-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	border: 1px solid var(--wg-border);
	border-radius: var(--wg-radius);
	background: var(--wg-card-bg);
	color: inherit;
}
a.wg-quickstart-item:hover { text-decoration: none; border-color: var(--wg-accent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
a.wg-quickstart-item .fas { color: var(--wg-accent); font-size: 1.2em; margin-bottom: 4px; }
.wg-quickstart-label { font-weight: bold; }
.wg-quickstart-meta { font-size: 0.82em; opacity: 0.7; }

.wg-startfor { margin: 0 0 14px 0; font-size: 1.05em; }
.wg-wftile {
	display: flex;
	flex-direction: column;
	padding: 14px;
	border: 1px solid var(--wg-border);
	border-radius: var(--wg-radius);
	background: var(--wg-card-bg);
}
.wg-wftile-head { display: flex; gap: 10px; align-items: flex-start; }
.wg-wftile-icon { color: var(--wg-accent); font-size: 1.4em; margin-top: 2px; }
.wg-wftile-title { font-weight: bold; font-size: 1.05em; }
.wg-wftile-meta { font-size: 0.82em; opacity: 0.7; }
.wg-wftile-desc { font-size: 0.9em; opacity: 0.85; margin: 8px 0 0 0; flex: 1 1 auto; }
.wg-wftile-actions { margin-top: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.wg-wftile-actions .button { margin: 0 !important; }

/* ================================================================== Guided run */
.wg-run {
	display: grid;
	grid-template-columns: 270px minmax(0, 1fr);
	gap: 22px;
	margin-top: 16px;
	align-items: start;
}
.wg-run-side {
	border: 1px solid var(--wg-border);
	border-radius: var(--wg-radius);
	padding: 14px;
	background: var(--wg-card-bg);
	position: sticky;
	top: 70px;
}
.wg-run-progresslabel { font-size: 0.85em; margin: 4px 0 10px 0; }

.wg-stepper { list-style: none; margin: 0; padding: 0; position: relative; }
.wg-st { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; position: relative; }
.wg-st:not(:last-child)::after {
	content: '';
	position: absolute;
	left: 12px;
	top: 31px;
	bottom: -5px;
	width: 2px;
	background: var(--wg-border);
}
.wg-st-dot {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8em;
	font-weight: bold;
	border: 2px solid var(--wg-border-strong);
	background: var(--wg-card-bg);
	position: relative;
	z-index: 1;
	box-sizing: border-box;
}
.wg-st-label { padding-top: 3px; line-height: 1.3; color: inherit; }
a.wg-st-label:hover { text-decoration: underline; }
.wg-st-done .wg-st-dot { background: var(--wg-ok); border-color: var(--wg-ok); color: #fff; }
.wg-st-done:not(:last-child)::after { background: var(--wg-ok); }
.wg-st-skipped .wg-st-dot { border-style: dashed; color: var(--wg-skip); }
.wg-st-skipped .wg-st-label { opacity: 0.6; text-decoration: line-through; }
.wg-st-pending .wg-st-label { opacity: 0.75; }
.wg-st-current .wg-st-dot { border-color: var(--wg-accent); color: var(--wg-accent); box-shadow: 0 0 0 4px rgba(10, 92, 173, 0.15); }
.wg-st-current .wg-st-label { opacity: 1; font-weight: bold; }
.wg-st-viewing .wg-st-label { font-weight: bold; color: var(--wg-accent); }

.wg-hints-switch {
	display: block;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--wg-border);
	font-size: 0.9em;
	cursor: pointer;
}

.wg-card {
	border: 1px solid var(--wg-border);
	border-radius: var(--wg-radius);
	padding: 18px 22px 20px 22px;
	background: var(--wg-card-bg);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
.wg-card-processed { border-left: 4px solid var(--wg-ok); }
.wg-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wg-card-counter { font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.65; }
.wg-card-type { font-size: 0.85em; color: var(--wg-tc, inherit); font-weight: bold; }
.wg-spacer { flex: 1 1 auto; }
.wg-card-title { margin: 10px 0 12px 0; font-size: 1.5em; line-height: 1.25; }

button.wg-hintbtn {
	cursor: pointer;
	border: 1px solid var(--wg-hint-border);
	background: transparent;
	color: var(--wg-hint);
	border-radius: 14px;
	padding: 3px 12px;
	font-size: 0.9em;
	font-family: inherit;
}
button.wg-hintbtn:hover, button.wg-hintbtn.wg-active { background: var(--wg-hint-bg); }

.wg-hint {
	display: none;
	gap: 10px;
	align-items: flex-start;
	padding: 10px 14px;
	margin: 0 0 14px 0;
	border-radius: 6px;
	background: var(--wg-hint-bg);
	border: 1px solid var(--wg-hint-border);
	animation: wg-fadein 0.18s ease-out;
}
.wg-hint.wg-hint-open { display: flex; }
.wg-hint-icon { color: var(--wg-hint); margin-top: 3px; }
.wg-hint-text { flex: 1 1 auto; }
@keyframes wg-fadein { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

.wg-instruction { font-size: 1.05em; line-height: 1.55; margin-bottom: 16px; }
.wg-processed-info { margin: 0 0 14px 0; font-size: 0.9em; }

.wg-input { margin: 8px 0 14px 0; }
.wg-input-text { width: 100%; max-width: 640px; box-sizing: border-box; font-size: 1.05em; padding: 8px 10px !important; }
.wg-input-number { width: 160px; font-size: 1.05em; padding: 8px 10px !important; }
.wg-unit { font-weight: bold; opacity: 0.8; }

.wg-checklist-head { font-size: 0.9em; margin-bottom: 6px; }
.wg-checklist-counter { font-weight: bold; margin-right: 10px; }
ul.wg-checklist { list-style: none; margin: 0; padding: 0; max-width: 680px; }
ul.wg-checklist li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	margin-bottom: 6px;
	border: 1px solid var(--wg-border);
	border-radius: 6px;
	transition: background 0.15s;
}
ul.wg-checklist li label { flex: 1 1 auto; cursor: pointer; }
ul.wg-checklist li input { width: 18px; height: 18px; cursor: pointer; }
ul.wg-checklist li.wg-checked { background: rgba(46, 139, 87, 0.09); border-color: rgba(46, 139, 87, 0.45); }
ul.wg-checklist li.wg-checked label { text-decoration: line-through; opacity: 0.75; }

.wg-yesno { display: flex; gap: 12px; flex-wrap: wrap; }
.wg-yesno .button { min-width: 140px; font-size: 1.1em; padding: 10px 20px !important; margin: 0 !important; }
.wg-yesno .wg-btn-yes .fas { color: var(--wg-ok); }
.wg-yesno .wg-btn-no .fas { color: #c0392b; }
.wg-yesno .wg-selected { box-shadow: 0 0 0 3px var(--wg-accent); }

.wg-choices { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
label.wg-choice {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 9px 12px;
	border: 1px solid var(--wg-border);
	border-radius: 6px;
	cursor: pointer;
}
label.wg-choice:hover { border-color: var(--wg-accent); }
label.wg-choice input { width: 17px; height: 17px; }

.wg-btn-open { font-size: 1.05em; padding: 9px 18px !important; }
.wg-returned {
	margin-top: 12px;
	padding: 9px 12px;
	border-radius: 6px;
	background: rgba(46, 139, 87, 0.1);
	border: 1px solid rgba(46, 139, 87, 0.4);
	max-width: 640px;
}
.wg-inlinelink { margin-left: 8px; white-space: nowrap; }

ul.wg-filelist { list-style: none; padding: 0; margin: 0 0 10px 0; }
ul.wg-filelist li { padding: 4px 0; display: flex; align-items: center; gap: 6px; }
.wg-upload { padding: 12px; border: 1px dashed var(--wg-border-strong); border-radius: 6px; max-width: 640px; }

details.wg-notebox { margin: 4px 0 14px 0; }
details.wg-notebox summary { cursor: pointer; opacity: 0.75; font-size: 0.92em; margin-bottom: 6px; }
details.wg-notebox textarea { max-width: 640px; }

.wg-card-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	border-top: 1px solid var(--wg-border);
	padding-top: 14px;
	margin-top: 6px;
}
.wg-card-actions .button { margin: 0 !important; }
.wg-btn-primary { font-weight: bold; }
.button.wg-btn-primary,
a.button.wg-btn-primary {
	background: var(--butactionbg, #6c6aa8) !important;
	color: var(--textbutaction, #fff) !important;
	border-color: transparent !important;
}
.button.wg-btn-primary:hover { filter: brightness(1.08); }
.wg-backlink { opacity: 0.8; margin-right: 10px; }

.wg-readonly { margin: 6px 0 14px 0; }
.wg-readonly-value { margin-top: 10px; font-size: 1.05em; }
.wg-readonly-note { margin-top: 8px; opacity: 0.85; }

.wg-card-state { text-align: center; padding: 34px 22px; }
.wg-state-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 12px auto;
	border-radius: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: #fff;
	background: var(--wg-ok);
}
.wg-card-canceled .wg-state-icon { background: var(--wg-skip); }
.wg-card-state h2 { margin: 0 0 6px 0; }
.wg-state-actions { margin-top: 18px; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.wg-state-actions .button { margin: 0 !important; }

/* Protocol */
ul.wg-loglist { list-style: none; margin: 4px 0 0 0; padding: 0; font-size: 0.92em; }
ul.wg-loglist li.wg-nok { opacity: 0.6; }
ul.wg-loglist li.wg-ok .fas { color: var(--wg-ok); }

/* ================================================================== Guide panel */
.wg-guide {
	position: fixed;
	right: 18px;
	bottom: 18px;
	width: 340px;
	max-width: calc(100vw - 36px);
	z-index: 1005;
	background: var(--wg-card-bg);
	border: 1px solid var(--wg-border-strong);
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
	font-size: 0.95em;
	overflow: hidden;
}
.wg-guide-head {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 12px;
	background: var(--wg-accent);
	color: #fff;
}
.wg-guide-head a { color: #fff; opacity: 0.85; padding: 0 4px; }
.wg-guide-head a:hover { opacity: 1; text-decoration: none; }
.wg-guide-title { flex: 1 1 auto; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-guide-body { padding: 12px 14px; max-height: 50vh; overflow-y: auto; }
.wg-guide-step { margin-bottom: 8px; }
.wg-guide-instr { margin-bottom: 10px; line-height: 1.45; }
.wg-guide .wg-hint { margin: 8px 0 4px 0; }
.wg-guide-actions { margin-top: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wg-guide-actions .button { margin: 0 !important; }
.wg-guide-back { font-size: 0.9em; }
.wg-guide-min .wg-guide-body { display: none; }
.wg-guide-min .wg-guide-toggle .fas { transform: rotate(180deg); }
.wg-guide-min { width: 260px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.wg-run { grid-template-columns: minmax(0, 1fr); }
	.wg-run-side { position: static; order: 2; }
	.wg-run-main { order: 1; }
	.wg-stepper { max-height: 220px; overflow-y: auto; }
	.wg-card { padding: 14px; }
	.wg-stepitem { flex-wrap: wrap; }
	.wg-stepactions { width: 100%; justify-content: flex-end; }
}

@media print {
	.wg-guide, .wg-hintbtn, .wg-card-actions, .wg-hints-switch { display: none !important; }
	.wg-hint { display: flex !important; }
}