/* Editor- en hover-styling, bovenop forfoxsake.css */

/* ==================== toolbar en meta ==================== */

.ffs-editor-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: 1200px;
	margin: 12px auto 0;
	padding: 0 12px;
}

.ffs-editor-toolbar-spacer { flex: 1 1 auto; }

.ffs-editor-toolbar select,
.ffs-editor-toolbar button,
.ffs-editor-chapter-actions button,
.ffs-ed-addbar button,
.ffs-ed-table-actions button {
	font: inherit;
	font-size: 13px;
	padding: 5px 10px;
	background: #fff;
	border: 1px solid var(--ffs-border);
	cursor: pointer;
}

.ffs-editor-toolbar button:hover,
.ffs-editor-chapter-actions button:hover,
.ffs-ed-addbar button:hover,
.ffs-ed-table-actions button:hover { background: #ede5d0; }

.ffs-btn-primary {
	background: var(--ffs-heading) !important;
	color: #fff;
	border-color: var(--ffs-heading) !important;
}

.ffs-btn-primary:hover { opacity: 0.9; }
.ffs-btn-attention { box-shadow: 0 0 0 2px #f0ad4e; }

.ffs-editor-status { font-size: 13px; color: #3c763d; }
.ffs-editor-status--error { color: #a94442; }

.ffs-editor-meta {
	display: flex;
	gap: 12px;
	max-width: 1200px;
	margin: 10px auto 0;
	padding: 0 12px;
	flex-wrap: wrap;
}

.ffs-editor-meta label {
	display: flex;
	flex-direction: column;
	font-size: 12px;
	color: #666;
	gap: 2px;
}

.ffs-editor-meta input {
	font: inherit;
	font-size: 13px;
	padding: 5px 8px;
	border: 1px solid var(--ffs-border);
	min-width: 200px;
}

.ffs-editor-meta-desc { flex: 1 1 auto; }
.ffs-editor-meta-desc input { width: 100%; }

/* ==================== layout ==================== */

.ffs-editor-page {
	display: flex;
	gap: 12px;
	max-width: 1200px;
	margin: 12px auto;
	padding: 0 12px;
	align-items: flex-start;
}

.ffs-editor-chapters {
	flex: 0 0 240px;
	background: var(--ffs-bg);
	border: 1px solid var(--ffs-border);
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 12px;
	max-height: calc(100vh - 24px);
}

.ffs-editor-chapters #ed-tree { flex: 1 1 auto; overflow-y: auto; }

.ffs-editor-chapter-actions {
	display: flex;
	gap: 4px;
	padding: 8px;
	border-top: 1px solid var(--ffs-border);
}

.ffs-editor-chapter-actions button:first-child { flex: 1 1 auto; }

.ffs-editor-canvas {
	flex: 1 1 auto;
	min-width: 0;
	padding: 16px 20px 32px;
}

/* ==================== sidebar-boom ==================== */

.ffs-toc-cat {
	padding: 8px 12px 4px;
	font-family: var(--ffs-serif);
	font-variant: small-caps;
	font-size: 16px;
	color: var(--ffs-heading);
	border-bottom: 1px solid #e5dcc6;
	background: var(--ffs-bg-head);
}

.ffs-ed-cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ffs-ed-cat-add {
	font: inherit;
	border: 1px solid var(--ffs-border);
	background: #fff;
	cursor: pointer;
	line-height: 1;
	padding: 1px 7px 3px;
}

.ffs-ed-cat-add:hover { background: #ede5d0; }

.ffs-toc-empty {
	padding: 4px 12px 6px;
	font-size: 12px;
	color: #aaa;
	font-style: italic;
	border-bottom: 1px solid #e5dcc6;
}

/* ==================== entry-kop ==================== */

.ffs-ed-entry-head {
	display: flex;
	gap: 12px;
	align-items: flex-end;
	border-bottom: 2px solid var(--ffs-heading);
	padding-bottom: 6px;
	margin-bottom: 12px;
}

.ffs-ed-entry-name {
	flex: 1 1 auto;
	font-family: var(--ffs-serif);
	font-variant: small-caps;
	font-size: 28px;
	color: var(--ffs-heading);
	border: 0;
	outline: none;
	background: transparent;
	min-width: 0;
}

.ffs-ed-entry-cat-label {
	font-size: 12px;
	color: #666;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ffs-ed-entry-cat-label select {
	font: inherit;
	font-size: 13px;
	padding: 4px 6px;
	border: 1px solid var(--ffs-border);
	background: #fff;
}

/* ==================== blokken ==================== */

.ffs-ed-block { position: relative; margin: 2px 0; }

.ffs-ed-block-bar {
	position: absolute;
	top: -10px;
	right: 0;
	display: none;
	gap: 2px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--ffs-border);
	padding: 1px 4px;
	z-index: 5;
}

.ffs-ed-block:hover > .ffs-ed-block-bar,
.ffs-ed-block:focus-within > .ffs-ed-block-bar { display: flex; }

.ffs-ed-block-bar button {
	font-size: 12px;
	border: 0;
	background: none;
	cursor: pointer;
	padding: 2px 5px;
	color: #666;
}

.ffs-ed-block-bar button:hover { color: #000; background: #ede5d0; }

.ffs-ed-block-type {
	font-size: 11px;
	color: #999;
	padding-right: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.ffs-ed-block-author {
	font-size: 11px;
	color: #b07a2a;
	font-style: italic;
	padding-right: 4px;
}

.ffs-ed-text {
	outline: none;
	min-height: 1.4em;
	line-height: 1.55;
	padding: 2px 2px;
	border-radius: 2px;
}

.ffs-ed-text:hover { background: #f7f2e4; }
.ffs-ed-text:focus { background: #f4eeda; }

.ffs-ed-text:empty::before {
	content: "Typ hier... (@ voor een link)";
	color: #bbb;
}

.ffs-ed-block-name {
	font: inherit;
	border: 0;
	border-bottom: 1px dashed var(--ffs-border);
	outline: none;
	width: 100%;
	padding: 2px;
	margin: 4px 0;
	font-family: var(--ffs-serif);
	font-variant: small-caps;
	font-size: 18px;
	color: var(--ffs-heading);
	background: transparent;
}

.ffs-ed-sub { padding-left: 2px; }

.ffs-ed-list { margin: 4px 0; }
.ffs-ed-listitem { display: inline-block; width: 100%; }

.ffs-ed-cell { min-width: 40px; }

.ffs-ed-table-actions { display: flex; gap: 4px; margin: 4px 0 8px; }

.ffs-ed-img { max-width: 100%; margin-top: 6px; }

.ffs-ed-img-row { display: flex; gap: 8px; align-items: center; }
.ffs-ed-img-row .ffs-ed-block-name { flex: 1 1 auto; width: auto; }
.ffs-ed-upload {
	font: inherit;
	font-size: 13px;
	padding: 4px 10px;
	background: #fff;
	border: 1px solid var(--ffs-border);
	cursor: pointer;
	flex: 0 0 auto;
}
.ffs-ed-upload:hover { background: #ede5d0; }

.ffs-ed-addbar {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	align-items: center;
	margin-top: 16px;
	padding-top: 10px;
	border-top: 1px dashed var(--ffs-border);
	font-size: 12px;
	color: #999;
}

.ffs-ed-placeholder {
	color: #999;
	font-style: italic;
	padding: 24px 0;
}

.ffs-ed-hint {
	font-size: 12px;
	color: #8a6d3b;
	background: #fcf8e3;
	padding: 4px 8px;
	margin: 4px 0;
}

.ffs-ed-tip { font-size: 12px; color: #999; margin-top: 12px; }

.ffs-ed-block-json {
	width: 100%;
	min-height: 140px;
	font-family: Consolas, Monaco, monospace;
	font-size: 12px;
	border: 1px solid var(--ffs-border);
	padding: 8px;
	resize: vertical;
}

/* ==================== mobiel ==================== */

@media (max-width: 900px) {
	.ffs-editor-page { flex-direction: column; }
	.ffs-editor-chapters { position: static; flex: 1 1 auto; width: 100%; max-height: 280px; }
}

.ffs-editor-check {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #444;
	align-self: flex-end;
	padding-bottom: 6px;
}

.ffs-ed-visible-label { padding-bottom: 10px; }

.ffs-users-page { max-width: 700px; margin: 24px auto; padding: 0 12px; }
.ffs-users-add { display: flex; gap: 8px; margin-top: 12px; }
.ffs-users-add input {
	font: inherit;
	font-size: 13px;
	padding: 6px 8px;
	border: 1px solid var(--ffs-border);
	flex: 1 1 auto;
}
.ffs-users-add button { font: inherit; padding: 6px 12px; cursor: pointer; border: 1px solid var(--ffs-border); background: #fff; }

.ffs-ed-row { display: flex; align-items: stretch; border-bottom: 1px solid #e5dcc6; }
.ffs-ed-row .ffs-toc-item { flex: 1 1 auto; border-bottom: 0; min-width: 0; }
.ffs-ed-row .ffs-toc-item--dmhidden::after { content: none; } /* icoon komt nu van de knop */
.ffs-ed-eye {
	border: 0;
	background: none;
	cursor: pointer;
	padding: 0 10px;
	font-size: 13px;
	opacity: 0.25;
	filter: grayscale(1);
}
.ffs-ed-eye:hover { opacity: 0.7; }
.ffs-ed-eye--on { opacity: 1; filter: none; }

/* ==================== character sheet-editor ==================== */

.ffs-cs-ed-pb {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #666;
	margin: 6px 0 10px;
}

.ffs-cs-ed-pb input {
	width: 50px;
	font: inherit;
	padding: 3px 6px;
	border: 1px solid var(--ffs-border);
}

.ffs-cs-ed-abilities {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 8px;
	margin-bottom: 12px;
}

.ffs-cs-ed-ability {
	background: var(--ffs-bg-head);
	border: 1px solid var(--ffs-border);
	padding: 6px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}

.ffs-cs-ed-ability-label {
	font-family: var(--ffs-serif);
	font-variant: small-caps;
	font-weight: 700;
	font-size: 13px;
	color: var(--ffs-heading);
}

.ffs-cs-ed-ability input {
	width: 50px;
	font: inherit;
	font-size: 14px;
	text-align: center;
	padding: 2px;
	border: 1px solid var(--ffs-border);
}

.ffs-cs-ed-mod { font-size: 12px; color: #666; }

.ffs-cs-ed-save {
	font-size: 11px;
	color: #666;
	display: flex;
	align-items: center;
	gap: 2px;
}

.ffs-cs-ed-skills {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 4px 16px;
}

.ffs-cs-ed-skill {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
}

.ffs-cs-ed-skill-abil {
	flex: 0 0 auto;
	width: 30px;
	font-size: 11px;
	color: #999;
	font-weight: 700;
}

.ffs-cs-ed-skill-name { flex: 1 1 auto; }

.ffs-cs-ed-skill select {
	font: inherit;
	font-size: 12px;
	padding: 2px 4px;
	border: 1px solid var(--ffs-border);
	background: #fff;
}