/* RobertBlok.com — Fullstack development */

/* =====================================================================
   Atlasmuseum — edit forms (EditArtist / EditArtwork)
   Modern 2026 styling. Author: Robert Blok
   Uses the AtlasNova design tokens (defined globally on :root).
   Class names are kept identical so the existing JavaScript keeps working.
   ===================================================================== */

.an-editform { max-width: 860px; }

/* ---- Two-column label / field layout ---- */
.an-editform table.formtable,
table.formtable {
	border-collapse: collapse;
	width: 100%;
	margin: 0 0 8px;
}
table.formtable > tbody > tr > th,
table.formtable > tbody > tr > td {
	padding: 12px 14px;
	vertical-align: top;
	text-align: left;
	border-bottom: 1px solid var(--an-line, #e7e7e2);
}
table.formtable > tbody > tr > th {
	width: 190px;
	font-weight: 600;
	color: var(--an-ink, #1b1c1e);
	white-space: nowrap;
}

/* ---- Inputs ---- */
.createboxInput,
input.createboxInput[type="text"],
.an-editform input[type="text"],
.an-editform textarea {
	font: inherit;
	color: var(--an-ink, #1b1c1e);
	background: #fff;
	border: 1px solid var(--an-line, #e7e7e2);
	border-radius: 9px;
	padding: 9px 12px;
	max-width: 100%;
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s;
}
.createboxInput:focus,
.an-editform input:focus,
.an-editform textarea:focus {
	outline: none;
	border-color: var(--an-yellow-dp, #e6c500);
	box-shadow: 0 0 0 3px rgba(251, 224, 35, .22);
}
.an-editform textarea,
textarea.createboxInput { width: 100%; min-height: 110px; resize: vertical; }

/* Multi-value rows (Prénom, Nom, …) */
.inputSpan { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.inputSpan input.createboxInput { flex: 1 1 auto; }

/* ---- Add / remove line buttons ( [ + ] / [ x ] ) ---- */
.edit_item_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	font-weight: 600;
	color: var(--an-ink, #1b1c1e);
	background: #fff;
	border: 1px solid var(--an-line, #e7e7e2);
	border-radius: 999px;
	cursor: pointer;
	user-select: none;
	transition: background .12s, border-color .12s;
}
.edit_item_button:hover { background: #fbfbf9; border-color: #d9d9d2; }
.add_button {
	color: #0a7cc2;
	border-color: #cfe6f3;
	background: #f4fbff;
}
.add_button:hover { background: #e9f6ff; }

/* ---- Wikidata import button ---- */
#amImportButton,
.an-editform button {
	font: inherit;
	font-weight: 600;
	color: var(--an-ink, #1b1c1e);
	background: var(--an-yellow, #fbe023);
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 999px;
	padding: 8px 18px;
	cursor: pointer;
	transition: background .15s;
}
#amImportButton:hover,
.an-editform button:hover { background: var(--an-yellow-dp, #e6c500); }

/* ---- Publish button ---- */
.edit_publish { margin: 22px 0 8px; }
.edit_publish input[type="button"],
input[name="wpSave"] {
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--an-ink, #1b1c1e);
	background: var(--an-yellow, #fbe023);
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 999px;
	padding: 11px 30px;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(230, 197, 0, .35);
	transition: background .15s, transform .05s;
}
.edit_publish input[type="button"]:hover { background: var(--an-yellow-dp, #e6c500); }
.edit_publish input[type="button"]:active { transform: translateY(1px); }

/* ---- Image / portrait ---- */
.image_thumb { margin-top: 12px; }
.image_thumb img {
	max-width: 220px;
	height: auto;
	border-radius: 10px;
	border: 1px solid var(--an-line, #e7e7e2);
}
.image_disclaimer {
	margin-top: 10px;
	padding: 10px 12px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--an-ink-soft, #5c6268);
	background: #faf9f4;
	border: 1px solid var(--an-line, #e7e7e2);
	border-radius: 9px;
}

/* ---- Misc ---- */
.mandatory { color: #b3282d; }
.an-editform h2 {
	font-size: 20px;
	font-weight: 700;
	color: var(--an-ink, #1b1c1e);
	margin: 28px 0 12px;
	padding-left: 12px;
	border-left: 4px solid var(--an-yellow, #fbe023);
}
.an-editform h2 span { background: none; }
.an-editform a.external { color: #0a7cc2; }

/* Friendly error notice */
.an-notice { padding: 14px 16px; border-radius: 10px; font-size: 15px; }
.an-notice-error {
	color: #7a1f22;
	background: #fdecec;
	border: 1px solid #f3c3c3;
}

/* Keep the legacy HeaderTabs styling that used to live here. */
.headertabs { border: 1px solid #aaaaaa; padding: 5px; margin-bottom: 10px; }

/* ---- Checkbox groups (type, colours, materials…) — tidy responsive columns ---- */
.checkboxes3columns { margin: 4px 0; }
.checkboxesSpan {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 2px 14px;
}
.checkboxLabel {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 5px 9px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.35;
	cursor: pointer;
	transition: background .12s;
}
.checkboxLabel:hover { background: #faf9f4; }
.checkboxLabel input[type="checkbox"] { margin: 2px 0 0; flex: 0 0 auto; }

/* A touch more breathing room between form rows */
table.formtable > tbody > tr > th,
table.formtable > tbody > tr > td { padding-top: 15px; padding-bottom: 15px; }

/* =====================================================================
   2026 polish — hero Wikidata panel, sticky publish, hover, responsive.
   (Robert Blok)  Pure styling; the markup and JS hooks are untouched.
   ===================================================================== */

/* Subtle row hover so long forms are easy to scan */
table.formtable > tbody > tr:hover > th,
table.formtable > tbody > tr:hover > td { background: #fcfcf7; }

/* Make the Wikidata import row a clear, inviting hero panel.
   Scoped to the explicit .am-wd-hero row so it only decorates the real
   Wikidata field — not the first row of every sub-table. (Robert Blok) */
tr.am-wd-hero > th,
tr.am-wd-hero > td {
	background: linear-gradient(0deg, rgba(251,224,35,.12), rgba(251,224,35,.12));
	border-bottom: 2px solid var(--an-yellow-dp, #e6c500);
	padding-top: 20px;
	padding-bottom: 20px;
}
tr.am-wd-hero > th { font-size: 16px; }
tr.am-wd-hero > th::before {
	content: "✦ ";
	color: var(--an-yellow-dp, #b8860b);
}
tr.am-wd-hero > th::after {
	content: "Collez un identifiant Wikidata (Q…) et cliquez sur Importer pour pré-remplir la fiche.";
	display: block;
	margin-top: 6px;
	max-width: 175px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--an-ink-soft, #5c6268);
	white-space: normal;
}

/* Publish bar: stays reachable at the bottom, clearly primary */
.edit_publish {
	position: sticky;
	bottom: 0;
	margin: 30px 0 0;
	padding: 14px 0;
	background: linear-gradient(0deg, var(--an-surface, #fff) 72%, rgba(255,255,255,0));
	border-top: 1px solid var(--an-line, #e7e7e2);
	z-index: 3;
}

/* Empty multi-value rows show only a [+] button — give it a clearer label */
.add_button { font-size: 0; padding: 0 14px; }
.add_button::after {
	content: "+ Ajouter";
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
}

/* =====================================================================
   Collection form — explicit per-field help, intro panel.
   The generic "paste a Wikidata Q…" first-row hint does NOT apply here
   (this form has no Wikidata import), so it is neutralised. (Robert Blok)
   ===================================================================== */

/* Turn off the generic Wikidata hero/hint on the collection form */
.an-collection-form table.formtable > tbody > tr:first-child > th,
.an-collection-form table.formtable > tbody > tr:first-child > td {
	background: none;
	border-bottom: 1px solid var(--an-line, #e7e7e2);
	padding-top: 15px;
	padding-bottom: 15px;
}
.an-collection-form table.formtable > tbody > tr:first-child > th { font-size: inherit; }
.an-collection-form table.formtable > tbody > tr:first-child > th::before,
.an-collection-form table.formtable > tbody > tr:first-child > th::after { content: none; }

/* Intro / explainer panel */
.an-intro {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin: 4px 0 22px;
	padding: 20px 22px;
	border-radius: 16px;
	background: radial-gradient(120% 160% at 0% 0%, rgba(251,224,35,.16), rgba(255,255,255,0) 60%), var(--an-surface, #fff);
	border: 1px solid var(--an-line, #e7e7e2);
	box-shadow: 0 10px 30px rgba(20,20,20,.05);
}
.an-intro-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: #1b1c1e;
	background: linear-gradient(135deg, var(--an-yellow, #FBE023), var(--an-yellow-dp, #E6C500));
	box-shadow: 0 6px 16px rgba(230,197,0,.4);
}
.an-intro-body h2 {
	margin: 2px 0 8px;
	padding: 0;
	border: 0;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--an-ink, #1b1c1e);
}
.an-intro-body p {
	margin: 0 0 8px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--an-ink-soft, #5c6268);
}
.an-intro-body p:last-child { margin-bottom: 0; }
.an-intro-help { font-size: 13.5px; }

/* Per-field help text under each input */
.field-hint {
	margin-top: 8px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--an-ink-soft, #5c6268);
	max-width: 640px;
}

/* =====================================================================
   Artwork edit form — tabbed sections (Infos essentielles, Description…)
   The tab JS toggles .tab_selected / .section_selected classes; without
   these rules the tabs rendered as a bare bullet list and every section
   stacked on top of each other. (Robert Blok)
   ===================================================================== */

/* Only one section visible at a time */
.edit_section.section_unselected { display: none; }
.edit_section.section_selected  { display: block; }

/* Tab bar container */
.headertabs { border: 0; padding: 0; margin: 0 0 6px; }
.edit-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 6px;
	background: #faf9f4;
	border: 1px solid var(--an-line, #e7e7e2);
	border-radius: 14px;
}
.edit-tabs li { list-style: none; margin: 0; }

/* Individual tabs */
.edit_tab {
	cursor: pointer;
	padding: 9px 16px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 14px;
	color: var(--an-ink-soft, #5c6268);
	white-space: nowrap;
	user-select: none;
	transition: background .15s, color .15s, box-shadow .15s;
}
.edit_tab:hover { background: #fff; color: var(--an-ink, #1b1c1e); }
.edit_tab.tab_selected {
	background: var(--an-yellow, #fbe023);
	color: var(--an-ink, #1b1c1e);
	box-shadow: 0 2px 8px rgba(230, 197, 0, .4);
}

/* Short instruction under the tab bar */
.edit-tabs-hint {
	margin: 12px 2px 22px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--an-ink-soft, #5c6268);
}

/* Sub-block headings inside each section */
.edit_section h2 {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -.01em;
	margin: 24px 0 10px;
	padding-left: 12px;
	border-left: 4px solid var(--an-yellow, #fbe023);
	color: var(--an-ink, #1b1c1e);
}
.edit_section h2 .mw-headline { background: none; }
.edit_section h2:first-child { margin-top: 8px; }

/* Responsive: stack label above field on phones/tablets */
@media (max-width: 700px) {
	.an-editform { max-width: 100%; }
	.an-intro { flex-direction: column; gap: 12px; }
	table.formtable,
	table.formtable > tbody,
	table.formtable > tbody > tr,
	table.formtable > tbody > tr > th,
	table.formtable > tbody > tr > td { display: block; width: auto; }
	table.formtable > tbody > tr > th {
		border-bottom: 0;
		padding: 14px 2px 2px;
		white-space: normal;
	}
	table.formtable > tbody > tr > td { padding: 2px 2px 14px; border-bottom: 1px solid var(--an-line, #e7e7e2); }
	tr.am-wd-hero > th::after { max-width: 100%; }
	.inputSpan { flex-wrap: wrap; }
}

/* =====================================================================
   Buttons — aligned with the site-wide button system (skin.css).
   Import from Wikidata = primary (dark); Publier = accent (yellow);
   helper actions = outline; remove = quiet icon button.
   RobertBlok.com — Fullstack development
   ===================================================================== */
.an-editform button,
.multipleTemplateAdder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--an-btn-h, 40px);
	padding: 0 16px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--an-ink, #1b1c1e);
	background: #fff;
	border: 1px solid #dcdcd5;
	border-radius: var(--an-btn-r, 10px);
	box-shadow: 0 1px 2px rgba(20, 20, 20, .06);
	cursor: pointer;
	transition: background-color .15s, border-color .15s, box-shadow .15s, transform .06s;
}
.an-editform button:hover,
.multipleTemplateAdder:hover {
	background: #fafaf7;
	border-color: #c9c9c1;
	box-shadow: 0 4px 14px rgba(20, 20, 20, .12);
}
.an-editform button:active { transform: translateY(1px); }
.an-editform button:focus-visible,
.edit_item_button:focus-visible,
.edit_publish input[type="button"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(251, 224, 35, .55);
}

#amImportButton {
	color: #fff;
	background: var(--an-ink, #1b1c1e);
	border-color: var(--an-ink, #1b1c1e);
}
#amImportButton:hover { background: #000; border-color: #000; }

.edit_publish input[type="button"],
input[name="wpSave"] {
	min-height: 48px;
	padding: 0 28px;
	font-size: 15px;
	font-weight: 700;
	color: var(--an-ink, #1b1c1e);
	background: var(--an-yellow, #fbe023);
	border: 0;
	border-radius: 12px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 6px 18px rgba(230, 197, 0, .35);
}
.edit_publish input[type="button"]:hover,
input[name="wpSave"]:hover { background: #ffe94d; }

/* [ x ] remove a line -> round icon button */
.edit_item_button:not(.add_button) {
	width: 34px;
	min-width: 34px;
	height: 34px;
	padding: 0;
	font-size: 0;
	color: var(--an-ink-soft, #5c6268);
	background: transparent;
	border-color: transparent;
	border-radius: 50%;
}
.edit_item_button:not(.add_button)::after { content: "✕"; font-size: 13px; }
.edit_item_button:not(.add_button):hover { color: #b3282d; background: #fdecec; border-color: #f3c3c3; }

/* [ + ] add a line -> dashed outline */
.add_button {
	height: 36px;
	color: var(--an-ink, #1b1c1e);
	background: #fff;
	border: 1px dashed #c9c9c1;
	border-radius: var(--an-btn-r, 10px);
}
.add_button:hover { background: #fffbe0; border-color: var(--an-yellow-dp, #e6c500); }

/* ---- Field widths: never wider than the column ----
   PageForms renders some fields with size="60" inside an inline-block
   wrapper, which sized itself to the input and pushed the page sideways on
   phones (553 px on a 390 px screen).
   RobertBlok.com — Fullstack development */
.inputSpan { max-width: 100%; }
.createboxInput,
.an-editform input[type="text"],
.an-editform textarea { max-width: 100%; }
@media (max-width: 700px) {
	.inputSpan { display: flex; width: 100%; }
	.inputSpan input.createboxInput,
	table.formtable td input[type="text"] { width: 100%; min-width: 0; }
	/* The Wikidata hint cell spans the full width like every other label. */
	tr.am-wd-hero > th { width: auto !important; max-width: none !important; }
}