/* pages.css — [แก้ไขโดย Claude] ปรับเป็นธีมมืด-ทอง-แดงของเว็บ (--mes-*) แทนธีมสว่างสไตล์ Facebook เดิม
   ใช้ตัวแปรสีชุดเดียวกับทั้งเว็บ (ประกาศไว้แล้วใน mpc-profile.css/mps-shell.css) ใส่ fallback ครบกันพัง */

.mes-pg-wrap { max-width: 980px; margin: 0 auto; font-family: inherit; color: var(--mes-text-body, #E0E0E0); }
.mes-pg-cover {
	height: 260px; border-radius: 12px; background: linear-gradient(135deg, var(--mes-bg-nav,#1C1C1E), var(--mes-bg-void,#0C0C0E));
	background-size: cover; background-position: center; margin-bottom: 16px; border: 1px solid var(--mes-border,#2C2C2E);
}
.mes-pg-columns { display: flex; gap: 20px; align-items: flex-start; }

/* ---- คอลัมน์ซ้าย: การ์ดข้อมูลเพจ ---- */
.mes-pg-left {
	flex: 0 0 300px; position: sticky; top: 16px;
	background: var(--mes-bg-card,#121212); border: 1px solid var(--mes-border,#2C2C2E); border-radius: 12px; padding: 20px;
}
.mes-pg-avatar { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid var(--mes-bg-card,#121212); margin-top: -60px; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.mes-pg-name { font-size: 20px; font-weight: 700; margin: 10px 0 2px; color: var(--mes-gold,#D4AF37); }
.mes-pg-category { color: var(--mes-text-meta,#8E8E93); font-size: 13px; margin-bottom: 12px; }
.mes-pg-stat { display: inline-block; margin-right: 14px; font-size: 13px; color: var(--mes-text-meta,#8E8E93); }
.mes-pg-stat b { color: var(--mes-text-body,#E0E0E0); }
.mes-pg-bio { font-size: 14px; margin: 14px 0; line-height: 1.6; color: var(--mes-text-body,#E0E0E0); }
.mes-pg-website { font-size: 13px; word-break: break-all; color: var(--mes-gold,#D4AF37); }
.mes-pg-follow-btn, .mes-pg-btn-primary {
	width: 100%; padding: 10px; border: 1px solid var(--mes-gold,#D4AF37); border-radius: 8px; background: var(--mes-red,#8B0000); color: var(--mes-text-body,#E0E0E0);
	font-weight: 600; font-size: 14px; cursor: pointer; margin-top: 12px;
}
.mes-pg-follow-btn.following { background: var(--mes-bg-void,#0C0C0E); color: var(--mes-text-body,#E0E0E0); border-color: var(--mes-border,#2C2C2E); }
.mes-pg-btn-secondary { display:block; margin: 12px auto; padding: 8px 20px; border-radius: 8px; border:1px solid var(--mes-border,#2C2C2E); background: var(--mes-bg-void,#0C0C0E); color: var(--mes-text-body,#E0E0E0); cursor:pointer; }

/* ---- คอลัมน์ขวา: ฟีดเรียงเดี่ยว (แนวตั้ง สไตล์ FB/Twitter) ---- */
.mes-pg-right { flex: 1; min-width: 0; }
.mes-pg-feed { display: flex; flex-direction: column; gap: 14px; }
.mes-pg-post {
	background: var(--mes-bg-card,#121212); border: 1px solid var(--mes-border,#2C2C2E); border-radius: 12px; padding: 16px;
}
.mes-pg-post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mes-pg-post-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.mes-pg-post-meta { font-size: 12px; color: var(--mes-text-meta,#8E8E93); }
.mes-pg-post-content { font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--mes-text-body,#E0E0E0); }
.mes-pg-post-media { width: 100%; border-radius: 8px; margin-top: 10px; display: block; }
.mes-pg-post-actions { display: flex; gap: 16px; margin-top: 10px; border-top: 1px solid var(--mes-border,#2C2C2E); padding-top: 8px; }
.mes-pg-like-btn { background: none; border: none; cursor: pointer; font-size: 13px; color: var(--mes-text-meta,#8E8E93); }
.mes-pg-like-btn.liked { color: var(--mes-gold,#D4AF37); font-weight: 600; }

/* ---- กล่องโพสต์ (สำหรับแอดมินเพจเท่านั้น) ---- */
.mes-pg-composer { background: var(--mes-bg-card,#121212); border:1px solid var(--mes-border,#2C2C2E); border-radius:12px; padding:14px; margin-bottom:14px; }
.mes-pg-composer textarea { width:100%; border:none; resize:vertical; font-size:15px; min-height:60px; outline:none; background: transparent; color: var(--mes-text-body,#E0E0E0); }
.mes-pg-composer input[type=url] { width:100%; margin-top:8px; padding:6px; border:1px solid var(--mes-border,#2C2C2E); background: var(--mes-bg-void,#0C0C0E); color: var(--mes-text-body,#E0E0E0); border-radius:6px; font-size:13px; }

/* ---- ฟอร์มสร้างเพจ ---- */
.mes-pg-create-form { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.mes-pg-create-form label { display: flex; flex-direction: column; font-size: 14px; gap: 4px; color: var(--mes-text-body,#E0E0E0); }
.mes-pg-create-form input, .mes-pg-create-form textarea { padding: 8px; border: 1px solid var(--mes-border,#2C2C2E); background: var(--mes-bg-void,#0C0C0E); color: var(--mes-text-body,#E0E0E0); border-radius: 6px; font-size: 14px; }

/* ---- กริดรายการเพจทั้งหมด ---- */
.mes-pg-directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 16px; }
.mes-pg-card { background: var(--mes-bg-card,#121212); border:1px solid var(--mes-border,#2C2C2E); border-radius:12px; overflow:hidden; text-decoration:none; color:inherit; display:block; }
.mes-pg-card:hover { border-color: var(--mes-gold,#D4AF37); }
.mes-pg-card-cover { height:90px; background-size:cover; background-position:center; background-color: var(--mes-bg-nav,#1C1C1E); }
.mes-pg-card-body { padding: 10px 12px 14px; }
.mes-pg-card-avatar { width:56px; height:56px; border-radius:50%; border:3px solid var(--mes-bg-card,#121212); margin-top:-34px; object-fit:cover; }
.mes-pg-card-name { font-weight:600; margin-top:6px; color: var(--mes-text-body,#E0E0E0); }
.mes-pg-card-cat { font-size:12px; color: var(--mes-text-meta,#8E8E93); }

.mes-pg-empty, .mes-pg-loading { text-align:center; color: var(--mes-text-meta,#8E8E93); padding: 30px 0; }

/* ---- Wizard สร้างเพจทีละขั้น ---- */
.mes-pg-wizard-progress { text-align: center; font-size: 13px; color: var(--mes-text-meta,#8E8E93); margin-bottom: 10px; }
.mes-pg-wizard-nav { display: flex; gap: 10px; margin-top: 10px; }
.mes-pg-wizard-nav button { flex: 1; margin-top: 0; }

/* ---- แบนเนอร์สถานะเพจ (รอตรวจ/ไม่ผ่าน) ---- */
.mes-pg-status-banner { border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-bottom: 10px; }
.mes-pg-status-banner.pending { background: #3a2f10; color: #e8c468; border: 1px solid #6b5420; }
.mes-pg-status-banner.rejected { background: #3a1414; color: #ff8a80; border: 1px solid var(--mes-red,#8B0000); }

/* ---- เครื่องหมายยืนยันตัวตน ---- */
.mes-pg-verified-badge { color: var(--mes-gold,#D4AF37); font-size: 14px; }

/* ---- แผงจัดการเพจ (แก้ไข/ทีมดูแล/ลบเพจ) ---- */
.mes-pg-manage-panel { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mes-border,#2C2C2E); text-align: left; }
.mes-pg-manage-panel h4 { margin: 14px 0 8px; font-size: 13px; color: var(--mes-text-meta,#8E8E93); text-transform: uppercase; }
.mes-pg-manage-panel h4:first-child { margin-top: 0; }
.mes-pg-manage-panel form { display: flex; flex-direction: column; gap: 8px; }
.mes-pg-manage-panel label { display: flex; flex-direction: column; font-size: 13px; gap: 3px; color: var(--mes-text-body,#E0E0E0); }
.mes-pg-manage-panel input, .mes-pg-manage-panel textarea, .mes-pg-manage-panel select {
	padding: 6px 8px; border: 1px solid var(--mes-border,#2C2C2E); background: var(--mes-bg-void,#0C0C0E); color: var(--mes-text-body,#E0E0E0); border-radius: 6px; font-size: 13px;
}
.mes-pg-admin-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--mes-border,#2C2C2E); }
.mes-pg-remove-admin { background: none; border: 1px solid var(--mes-red,#8B0000); color: #ff8a80; border-radius: 6px; padding: 2px 8px; font-size: 12px; cursor: pointer; }
.mes-pg-post-delete { background: none; border: none; color: var(--mes-text-meta,#8E8E93); cursor: pointer; font-size: 14px; padding: 2px 6px; }
.mes-pg-post-delete:hover { color: #ff8a80; }
.mes-pg-autocomplete-wrap { position: relative; }
.mes-pg-suggestions { position: absolute; z-index: 5; top: 100%; left: 0; right: 0; background: var(--mes-bg-card,#121212); border: 1px solid var(--mes-border,#2C2C2E); border-radius: 6px; max-height: 160px; overflow-y: auto; }
.mes-pg-suggestion { padding: 6px 10px; font-size: 13px; cursor: pointer; color: var(--mes-text-body,#E0E0E0); }
.mes-pg-suggestion:hover { background: var(--mes-bg-void,#0C0C0E); }
.mes-pg-suggestion-empty { color: var(--mes-text-meta,#8E8E93); cursor: default; }
.mes-pg-suggestion-empty:hover { background: none; }

/* ---- ช่องค้นหาเพจ ---- */
.mes-pg-search-box { max-width: 640px; margin: 0 auto; }
#mes-pg-search-input { width:100%; padding:12px 14px; font-size:15px; border:1px solid var(--mes-border,#2C2C2E); background: var(--mes-bg-card,#121212); color: var(--mes-text-body,#E0E0E0); border-radius:24px; margin-bottom:16px; outline:none; }
#mes-pg-search-input:focus { border-color: var(--mes-gold,#D4AF37); }

/* ---- มือถือ: ยุบเหลือคอลัมน์เดียว ---- */
@media (max-width: 700px) {
	.mes-pg-columns { flex-direction: column; }
	.mes-pg-left { flex: 1 1 auto; position: static; width: 100%; }
}