/* Frontend Submit & Edit - base styles (mudah di-override di theme) */

.fse-form-wrap {
	max-width: 100%;
	margin: 0 auto 30px;
	padding: 24px;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	box-sizing: border-box;
}

.fse-form-title {
	margin-top: 0;
	font-size: 1.4em;
}

.fse-edit-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.fse-edit-header .fse-form-title { margin-bottom: 0; }
.fse-preview-btn { white-space: nowrap; }

.fse-link-view { color: #2271b1; }
.fse-notice-inline-link {
	margin-left: 10px;
	font-weight: 600;
	text-decoration: underline;
}

.fse-form-subtitle {
	margin-top: 24px;
	font-size: 1.1em;
	border-top: 1px solid #eee;
	padding-top: 16px;
}

.fse-notice {
	padding: 10px 14px;
	border-radius: 4px;
	margin-bottom: 16px;
	font-size: 0.95em;
}

.fse-notice-success { background: #eafaf0; color: #1e7e34; border: 1px solid #b7e4c7; }
.fse-notice-error   { background: #fdecea; color: #b02a37; border: 1px solid #f5c6cb; }
.fse-notice-info    { background: #eaf1fb; color: #1c5aa0; border: 1px solid #b8d3f0; }

.fse-field { margin-bottom: 16px; }
.fse-field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.fse-field-row .fse-field { flex: 1 1 220px; }

.fse-field label,
.fse-field-label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.fse-field input[type="text"],
.fse-field input[type="email"],
.fse-field input[type="password"],
.fse-field input[type="number"],
.fse-field textarea,
.fse-field select {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid #ccd0d4;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 1em;
}

.fse-field-inline label { display: inline-flex; align-items: center; gap: 6px; font-weight: normal; }

.fse-field-hint {
	font-size: 0.85em;
	color: #666;
	margin-top: 4px;
}

.fse-btn {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 4px;
	border: 1px solid transparent;
	cursor: pointer;
	font-size: 1em;
	text-decoration: none;
	line-height: 1.4;
}

.fse-btn-primary { background: #2271b1; color: #fff; }
.fse-btn-primary:hover { background: #135e96; color: #fff; }

.fse-btn-secondary { background: #f0f0f1; color: #1d2327; border-color: #ccd0d4; }
.fse-btn-secondary:hover { background: #e0e0e1; }

.fse-btn-ghost { background: transparent; color: #b02a37; border-color: #e0b4b7; }
.fse-btn-ghost:hover { background: #fdecea; }

.fse-form-links { margin-top: 6px; }
.fse-form-links-sep { margin: 0 6px; color: #999; }

/* Profile */
.fse-profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.fse-profile-avatar img { border-radius: 50%; display: block; }
.fse-profile-name { margin: 0 0 4px; }
.fse-profile-email, .fse-profile-since { margin: 2px 0; color: #555; }
.fse-profile-bio { margin: 16px 0; }
.fse-profile-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.fse-profile-avatar-preview { margin-bottom: 16px; }
.fse-profile-extra-fields { margin: 16px 0; }
.fse-profile-fields-table { width: 100%; border-collapse: collapse; }
.fse-profile-fields-table th, .fse-profile-fields-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eee; vertical-align: top; }
.fse-profile-fields-table th { width: 35%; font-weight: 600; color: #444; }

/* CPT switcher tabs */
.fse-cpt-switcher { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.fse-cpt-tab {
	padding: 6px 14px;
	border-radius: 20px;
	background: #f0f0f1;
	color: #1d2327;
	text-decoration: none;
	font-size: 0.9em;
}
.fse-cpt-tab-active { background: #2271b1; color: #fff; }

/* Scope switcher: Post Saya / Semua Post (khusus Admin/Editor) */
.fse-scope-switcher {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.fse-scope-tab {
	padding: 5px 12px;
	border: 1px solid #ccd0d4;
	border-radius: 4px;
	text-decoration: none;
	color: #1d2327;
	font-size: 0.9em;
}
.fse-scope-tab-active { background: #1d2327; color: #fff; border-color: #1d2327; }
.fse-scope-hint { font-size: 0.8em; color: #888; }

/* List posts */
.fse-list-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.fse-posts-table { width: 100%; border-collapse: collapse; }
.fse-posts-table th, .fse-posts-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #eee; }
.fse-status-badge { padding: 3px 10px; border-radius: 12px; font-size: 0.8em; display: inline-block; }
.fse-status-publish { background: #eafaf0; color: #1e7e34; }
.fse-status-draft { background: #f0f0f1; color: #555; }
.fse-status-pending { background: #fff8e5; color: #8a6d00; }
.fse-status-future { background: #eaf1fb; color: #1c5aa0; }
.fse-link-delete { color: #b02a37; }
.fse-empty-state { color: #666; padding: 20px 0; text-align: center; }

.fse-col-thumb { width: 56px; }
.fse-thumb-img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; display: block; }
.fse-thumb-placeholder { width: 48px; height: 48px; border-radius: 4px; background: #f0f0f1; display: block; }

.fse-pagination { margin-top: 18px; display: flex; gap: 6px; }
.fse-page-link { padding: 5px 11px; border: 1px solid #ccd0d4; border-radius: 4px; text-decoration: none; color: #1d2327; }
.fse-page-active { background: #2271b1; color: #fff; border-color: #2271b1; }

/* Featured Image (custom uploader) */
.fse-featured-image-field { margin-bottom: 20px; }

.fse-status-field {
	background: #fff8e5;
	border: 1px solid #f0dfa0;
	border-radius: 6px;
	padding: 14px 16px;
	margin-bottom: 20px;
}
.fse-status-field .fse-field-label::before {
	content: "★ ";
	color: #b8860b;
}

.fse-guest-field { }
.fse-required { color: #b02a37; }

/* Honeypot anti-spam: disembunyikan di luar layar (bukan display:none) supaya
   tetap "terisi" bagi bot form-filler sederhana, tapi tidak terlihat manusia. */
.fse-hp-field {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.fse-featured-image-preview {
	width: 100%;
	max-width: 300px;
	min-height: 120px;
	border: 1px dashed #ccd0d4;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
	overflow: hidden;
	background: #fafafa;
}
.fse-featured-image-preview img {
	max-width: 100%;
	height: auto;
	display: block;
}
.fse-featured-image-preview .fse-no-image {
	color: #888;
	font-size: 0.9em;
	padding: 20px;
}
.fse-featured-image-buttons { display: flex; gap: 8px; }

/* Taxonomy fields (rendered outside ACF form) */
.fse-taxonomy-fields { margin-bottom: 10px; }
.fse-checkbox-list { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.fse-checkbox-item { font-weight: normal !important; display: inline-flex; align-items: center; gap: 6px; }
.fse-select-multiple { min-height: 90px; }

.fse-back-link { margin-top: 16px; }

/* ACF form tweaks di frontend */
.fse-form-wrap .acf-form .acf-field { margin-bottom: 16px !important; }
.fse-form-wrap .acf-form .acf-label label { font-weight: 600; }
.fse-form-wrap .acf-form-submit { margin-top: 20px; }

/* ================================================================
 * LAYOUT "Sidebar" (mirip WordPress) — Judul & Konten di kolom utama,
 * Status/Featured Image/Taxonomy/Guest fields di sidebar kanan.
 * Diaktifkan lewat pengaturan "Layout Form Submit/Edit Post".
 *
 * .fse-layout-columns > .fse-main-col + .fse-sidebar-col adalah wrapper YANG
 * KITA BUAT SENDIRI (dibuka di html_before_fields, ditutup+dilanjutkan di
 * html_after_fields) — sengaja TIDAK bergantung pada class/struktur internal
 * ACF, supaya tetap benar berapa pun versi ACF-nya atau bagaimana pun ACF
 * membungkus field-fieldnya sendiri.
 * ================================================================ */
.fse-layout-wp { max-width: 1100px; }
.fse-layout-wp .fse-layout-columns {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 4px 28px;
	align-items: start;
}
.fse-layout-wp .fse-main-col { min-width: 0; }
.fse-layout-wp .fse-sidebar-col {
	background: #f8f9fa;
	border: 1px solid #e2e2e2;
	border-radius: 6px;
	padding: 16px;
}
.fse-layout-wp .fse-sidebar-col .fse-status-field,
.fse-layout-wp .fse-sidebar-col .fse-featured-image-field,
.fse-layout-wp .fse-sidebar-col .fse-taxonomy-fields,
.fse-layout-wp .fse-sidebar-col .fse-guest-field {
	margin-bottom: 18px;
}
.fse-layout-wp .fse-sidebar-col > *:last-child { margin-bottom: 0; }

.fse-layout-wp .fse-form-submit-row { margin-top: 16px; }

/* Judul post dibuat lebih besar & menonjol di kolom utama, mirip wp-admin.
   Nama input title yang dipakai ACF (_post_title) ditarget langsung, plus
   fallback data-name untuk jaga-jaga beda versi ACF. */
.fse-layout-wp .fse-main-col input[name="_post_title"],
.fse-layout-wp .fse-main-col .acf-field[data-name="post_title"] input[type="text"] {
	font-size: 1.4em;
	padding: 12px 14px;
	font-weight: 600;
}

@media (max-width: 900px) {
	.fse-layout-wp .fse-layout-columns {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.fse-form-wrap { padding: 16px; }
	.fse-field-row { flex-direction: column; gap: 0; }
}