/* ==========================================================================
   Procurement Monitor — ธีมหน้าจัดการ
   พอร์ตมาจาก DinsorOffice design system (office/dinsornext/src/styles/app.scss)
   ซึ่งกลั่นมาจากธีม Adminto v5.2.0 อีกที — โครง #wrapper / .left-side-menu /
   .navbar-custom / .content-page, ฟอนต์ IBM Plex Sans Thai
   สีตาม VI ของ RADAR (docs/vi-board/): กรม #0B2D5B · ส้ม #FF7700 · เทา #E8ECF2 · พื้น #F8F9FB

   Bootstrap 5.3 โหลดแยกจาก /static/vendor/bootstrap/ ก่อนไฟล์นี้
   ฟอนต์โหลดจาก /static/vendor/fonts/fonts.css — ทั้งหมด vendor ไว้ในเครื่อง
   CSP จึงยังเป็น default-src 'self' ล้วนเหมือนเดิม
   ========================================================================== */

:root {
	--theme-font: 'IBM Plex Sans Thai', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--theme-color: #ff7700;
	--brand-orange: #ff7700;
	--brand-orange-hover: #e06900;
	--brand-navy: #0b2d5b;
	--brand-navy-soft: #e8ecf2;
	--brand-cyan: #22a7f0;
	--brand-green: #10c469;
	--brand-yellow: #f9c851;
	--brand-red: #ff5b5b;
	--brand-dark: var(--brand-navy);
	--brand-muted: #6c757d;
	--brand-border: #e8ecf2;
	--brand-bg: #f8f9fb;
	--sidebar-width: 240px;
	--topbar-height: 70px;

	/* --- ระยะห่างกลาง: การ์ด/ตาราง/หัวการ์ด ทุกหน้าอ้างชุดนี้ ขอบซ้ายของเนื้อหาจะตรงกันเสมอ
	   ทั้งฝั่ง markup ใหม่ (.card-body) และ legacy (.card .body / .card > h2) --- */
	--card-pad-x: 20px;
	--card-pad-y: 18px;
	--card-gap: 24px;

	/* --- compat tokens: เทมเพลตเดิมมี inline style="…var(--border)…" อยู่หลายจุด
	   (_roadmap.html, opportunities/detail.html, rubrics/list.html) ให้ map ไปสีแบรนด์ใหม่ --- */
	--border: var(--brand-border);
	--surface: #ffffff;
	--bg: var(--brand-bg);
	--text: #313a46;
	--muted: var(--brand-muted);
	--accent: var(--brand-orange);
	--accent-soft: #fff4ed;
	--danger: var(--brand-red);
	--danger-soft: #feeded;
	--warn: #b25e00;
	--warn-soft: #fef9ed;
	--star: var(--brand-yellow);
	--ok: var(--brand-green);
	--ok-soft: #eafaf1;
	--radius: 6px;
}

html, body,
h1, h2, h3, h4, h5, h6, p, span, a, input, select, button, textarea {
	font-family: var(--theme-font), sans-serif;
}

html, body {
	font-weight: 300;
	font-size: 15px;
	background-color: var(--brand-bg);
	color: var(--brand-muted);
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

a { color: var(--brand-orange); text-decoration: none; }
a:hover { color: var(--brand-orange-hover); }

/* ==========================================
   LEFT STRIP LINE (ลายเซ็นหลังล็อกอิน)
   ========================================== */
#wrapper::before {
	content: '';
	border-left: 3px solid var(--theme-color);
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	z-index: 99999;
}

/* Utilities */
.center-align { text-align: center !important; }
.left-align { text-align: left !important; }
.right-align { text-align: right !important; }
.theme-text-color { color: var(--theme-color) !important; }
.text-nowrap { text-wrap: nowrap; }

/* ==========================================
   Topbar
   ========================================== */
.navbar-custom {
	background-color: #ffffff;
	box-shadow: none;
	min-height: var(--topbar-height);
	height: var(--topbar-height);
	border-bottom: 1px solid var(--brand-border);
	padding: 0;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1001;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.navbar-custom .page-title-main {
	font-size: 1.2rem;
	margin: 0;
	line-height: var(--topbar-height);
	color: var(--brand-navy);
	font-weight: 600;
	display: inline-block;
	padding-left: 24px;
}
.navbar-custom .page-title-main a { color: inherit; }
.navbar-custom .page-title-main .sep { color: #ced4da; font-weight: 400; margin: 0 8px; }

.navbar-custom .topbar-right {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-right: 24px;
}
.navbar-custom .topbar-user {
	color: var(--brand-muted);
	font-size: 0.9rem;
}
.button-menu-mobile {
	border: none;
	background: transparent;
	color: var(--brand-muted);
	font-size: 1.4rem;
	line-height: var(--topbar-height);
	height: var(--topbar-height);
	padding: 0 6px;
	cursor: pointer;
	display: none;
}

/* ==========================================
   LOGO BOX
   ========================================== */
.logo-box {
	background-color: #ffffff;
	width: var(--sidebar-width);
	height: var(--topbar-height);
	display: flex;
	align-items: center;
	padding: 0 24px;
	border-bottom: 1px solid var(--brand-border);
	border-right: 1px solid var(--brand-border);
	box-sizing: border-box;
	flex-shrink: 0;
}
.logo-box .logo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	text-decoration: none;
	line-height: 1.15;
}
/* wordmark RADAR — ตัว D สีส้มตาม VI (ยังไม่มีไฟล์โลโก้ SVG จริง ใช้ตัวอักษรไปก่อน) */
.logo-box .logo .logo-brand {
	font-size: 1.45rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--brand-navy);
	line-height: 1;
}
.logo-brand .logo-d { color: var(--brand-orange); }
.logo-box .logo .logo-byline {
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--brand-navy);
	margin-top: 3px;
	align-self: flex-end;
}

/* ==========================================
   Left Sidebar Menu
   ========================================== */
.left-side-menu {
	width: var(--sidebar-width);
	background: #ffffff;
	box-shadow: none;
	border-right: 1px solid var(--brand-border);
	top: var(--topbar-height);
	bottom: 0;
	left: 0;
	position: fixed;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.sidebar-content {
	overflow-y: auto;
	flex-grow: 1;
	padding: 10px 0;
}
.sidebar-menu-title {
	padding: 18px 24px 8px 24px;
	letter-spacing: 0.08em;
	font-size: 0.72rem;
	text-transform: uppercase;
	color: #a0aec0;
	font-weight: 700;
}
.sidebar-nav-link {
	color: #4a5568;
	font-size: 0.92rem;
	font-weight: 400;
	padding: 11px 24px;
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	transition: all 0.15s ease;
	position: relative;
	white-space: nowrap;
}
.sidebar-nav-link span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sidebar-nav-link i {
	color: #adb5bd;
	font-size: 1.15rem;
	flex-shrink: 0;
}
.sidebar-nav-link:hover,
.sidebar-nav-link:focus {
	color: var(--brand-navy);
	background-color: #f1f4f8;
}
/* เมนูที่เปิดอยู่เป็นกรมท่าบนพื้นเทา ตาม VI — ส้มเก็บไว้ให้ปุ่มกดหลัก */
.sidebar-nav-link.active {
	color: var(--brand-navy);
	font-weight: 600;
	background-color: var(--brand-navy-soft);
	border-right: 3px solid var(--brand-orange);
}
/* ไอคอนเมนูเป็นสีเทากลาง ๆ ตามปกติ — ส้มเฉพาะเมนูที่เปิดอยู่หรือตอนชี้เมาส์
   เพื่อไม่ให้ทั้งคอลัมน์เมนูอ่านเป็นแถบส้ม */
.sidebar-nav-link:hover i,
.sidebar-nav-link:focus i,
.sidebar-nav-link.active i {
	color: var(--brand-orange);
}
.sidebar-footer {
	padding: 15px 24px;
	font-size: 0.75rem;
	color: #a0aec0;
	border-top: 1px solid var(--brand-border);
	background-color: #ffffff;
}

/* ==========================================
   Content Page
   ========================================== */
.content-page {
	margin-left: var(--sidebar-width);
	margin-top: var(--topbar-height);
	padding: 24px 24px 0;
	background-color: var(--brand-bg);
	min-height: calc(100vh - var(--topbar-height));
	display: flex;
	flex-direction: column;
}
.content-page > .content { flex: 1; }
/* layout ของหน้าพนักงาน (/board) ไม่มี sidebar */
.no-sidebar .navbar-custom .logo-box { border-right: none; }
.no-sidebar .content-page { margin-left: 0; }

.page-title-box {
	padding: 4px 0 20px;
}
.page-title-box h1,
.page-title-box .page-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--brand-dark);
	margin: 0;
}
.page-title-box a { color: var(--brand-muted); }

/* ==========================================
   Cards
   ========================================== */
.card {
	background-color: #ffffff;
	border: 1px solid var(--brand-border);
	border-radius: var(--radius);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
	margin-bottom: var(--card-gap);
}
.card-body { padding: var(--card-pad-y) var(--card-pad-x); }
/* ลูกตรงของ .card ที่ไม่ได้อยู่ใน .body/.card-body/ตาราง — เดิมชิดขอบการ์ดเพราะ padding เป็น 0
   ดันให้มี gutter เท่ากับหัวการ์ด (เส้นคั่นภายใน .timeline/.checklist จึงร่นเข้าตามหัวข้อ) */
.card > .timeline,
.card > .checklist,
.card > .pager,
.card > .pagination {
	padding-left: var(--card-pad-x);
	padding-right: var(--card-pad-x);
}
.card > #message.alert { margin-left: var(--card-pad-x); margin-right: var(--card-pad-x); }
.header-title {
	font-size: 1.05rem;
	margin: 0 0 14px 0;
	font-weight: 600;
	color: var(--brand-dark);
}
.card-body > .header-title:last-child { margin-bottom: 0; }
.card .subhead { color: var(--brand-muted); font-size: 0.85rem; }

/* ==========================================
   Buttons
   ========================================== */
.btn { font-size: 0.875rem; font-weight: 500; border-radius: 4px; }
.btn-primary,
.btn-theme-orange {
	background-color: var(--brand-orange);
	border-color: var(--brand-orange);
	color: #ffffff;
	padding: 7px 16px;
	transition: all 0.15s ease;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-theme-orange:hover {
	background-color: var(--brand-orange-hover);
	border-color: var(--brand-orange-hover);
	color: #ffffff;
}
.btn-primary:disabled, .btn-primary.disabled {
	background-color: var(--brand-orange);
	border-color: var(--brand-orange);
	opacity: 0.55;
}
.btn-info { background-color: #23b7e5; border-color: #23b7e5; color: #fff; }
.btn-warning { background-color: #f9c851; border-color: #f9c851; color: #fff; }
.btn-danger { background-color: #ff5b5b; border-color: #ff5b5b; color: #fff; }
.btn-theme-outline-orange {
	border-color: var(--brand-orange);
	color: var(--brand-orange);
	background-color: transparent;
}
.btn-theme-outline-orange:hover {
	background-color: var(--brand-orange);
	color: #ffffff;
}
.btn-soft-danger {
	background-color: #feeded;
	border-color: #feeded;
	color: #ff5b5b;
}
.btn-soft-danger:hover { background-color: #ff5b5b; border-color: #ff5b5b; color: #fff; }
.btn-link { color: var(--brand-orange); }

/* ==========================================
   Forms
   ========================================== */
.form-label {
	font-size: 0.8rem;
	color: var(--brand-muted);
	margin-bottom: 3px;
	font-weight: 500;
}
.form-control, .form-select {
	font-size: 0.9rem;
	border-color: #dee2e6;
}
.form-control:focus, .form-select:focus {
	border-color: var(--brand-orange);
	box-shadow: 0 0 0 0.15rem rgba(255, 102, 0, 0.12);
}
.form-check-input:checked {
	background-color: var(--brand-orange);
	border-color: var(--brand-orange);
}
.form-check-input:focus {
	border-color: var(--brand-orange);
	box-shadow: 0 0 0 0.15rem rgba(255, 102, 0, 0.12);
}

/* ==========================================
   Tables
   ========================================== */
.table {
	color: #4a5568;
	vertical-align: middle;
	margin-bottom: 0;
}
.table > thead > tr > th {
	background-color: #f8f9fa;
	color: #495057;
	font-weight: 600;
	font-size: 0.82rem;
	border-top: 1px solid var(--brand-border);
	border-bottom: 2px solid var(--brand-border);
	padding: 12px var(--card-pad-x);
	white-space: nowrap;
}
.table > tbody > tr > td {
	padding: 13px var(--card-pad-x);
	border-bottom: 1px solid #f1f3f5;
	font-size: 0.9rem;
}
.table-hover > tbody > tr:hover > * { background-color: #fcfdfe; }
.table td.num, .table th.num { text-align: right; white-space: nowrap; }
/* ตารางแนวคีย์-ค่า บนหน้ารายละเอียด (th อยู่ซ้าย) */
.table.kv > tbody > tr > th {
	background: transparent;
	font-weight: 600;
	color: var(--brand-muted);
	font-size: 0.85rem;
	border-bottom: 1px solid #f1f3f5;
	padding: 13px var(--card-pad-x);
	white-space: nowrap;
}

/* ==========================================
   Badges
   ========================================== */
.badge {
	padding: 4px 10px;
	font-weight: 500;
	font-size: 0.72rem;
}
.badge.rounded-pill { border-radius: 30px; }
.badge.bg-success { background-color: #10c469 !important; color: #fff; }
.badge.bg-soft-success { background-color: #eafaf1 !important; color: #10c469; }
.badge.bg-soft-warning { background-color: #fef9ed !important; color: #d9a325; }
.badge.bg-soft-danger { background-color: #feeded !important; color: #ff5b5b; }
.badge.bg-soft-info { background-color: #eef8fe !important; color: #22a7f0; }
.badge.bg-soft-orange { background-color: #fff4ed !important; color: var(--brand-orange); }
.badge.bg-soft-secondary { background-color: #f1f3f5 !important; color: #6c757d; }

/* ==========================================
   Footer
   ========================================== */
.footer {
	border-top: 1px solid var(--brand-border);
	padding: 18px 0;
	margin-top: 24px;
	color: #a0aec0;
	font-size: 0.8rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px;
}

/* ==========================================
   หน้า Authentication
   ========================================== */
.auth-wrapper {
	background: linear-gradient(135deg, #fff4ed 0%, #f8f9fa 55%);
	min-height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.auth-card {
	width: 380px;
	max-width: 100%;
	background: #ffffff;
	border: 1px solid var(--brand-border);
	border-radius: 8px;
	box-shadow: 0 6px 26px rgba(0, 0, 0, 0.08);
	border-top: 3px solid var(--brand-orange);
	padding: 30px 28px;
}
.auth-card .auth-brand {
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--brand-navy);
	margin: 0 0 4px;
}
.auth-card .auth-sub {
	color: var(--brand-muted);
	font-size: 0.85rem;
	margin: 0 0 22px;
}

/* ==========================================================================
   ชิ้นส่วนเฉพาะของ Procurement Monitor
   พอร์ตจาก base.css เดิม เปลี่ยน token เป็นสีแบรนด์ใหม่
   ========================================================================== */

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }
.text-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* แผงข้อความ inline (#message) — JS ตั้ง class เป็น "alert error" / "alert ok" */
#message:empty { display: none; }
#message.alert { padding: 9px 14px; border-radius: 6px; font-size: 0.85rem; margin-bottom: 14px; }
#message.error { background: var(--danger-soft); color: var(--danger); }
#message.ok { background: var(--ok-soft); color: var(--ok); }

/* การ์ดตัวเลขบน dashboard */
.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	margin-bottom: var(--card-gap);
}
.stat {
	background: #ffffff;
	border: 1px solid var(--brand-border);
	border-radius: var(--radius);
	padding: var(--card-pad-y) var(--card-pad-x);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.stat .n { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; color: var(--brand-dark); }
.stat .k { color: var(--brand-muted); font-size: 0.78rem; }

/* ปุ่มดาวติดตามของทีม (ในตาราง) */
button.star {
	background: none;
	border: none;
	color: #d7dbe0;
	font-size: 18px;
	line-height: 1;
	padding: 2px 6px;
	margin-top: 2px;
	font-weight: 400;
	cursor: pointer;
}
button.star:hover { color: var(--star); }
button.star.on { color: var(--star); }

.pager { display: flex; gap: 8px; align-items: center; padding: 14px 0 2px; }

/* ---------------------------------------------------------------- แถบเลขหน้า (_pagination.html) */
.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 6px;
	padding: 16px 0 var(--card-pad-x);
}
.pagination .page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--brand-border);
	border-radius: 6px;
	background: #ffffff;
	color: var(--brand-dark);
	font-size: 0.875rem;
	line-height: 1;
	transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.pagination a.page-link:hover {
	border-color: var(--brand-orange);
	color: var(--brand-orange);
}
.pagination .page-link.active {
	background: var(--brand-orange);
	border-color: var(--brand-orange);
	color: #ffffff;
	font-weight: 600;
	cursor: default;
}
.pagination .page-link.page-nav { font-size: 1.05rem; color: var(--brand-muted); }
.pagination .page-link.disabled {
	color: #c7ccd3;
	background: #f6f7f9;
	cursor: default;
}
.pagination .page-gap {
	min-width: 20px;
	text-align: center;
	color: var(--brand-muted);
	user-select: none;
}

/* ---------------------------------------------------------------- ไทม์ไลน์ประกาศ */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 12px 0; border-bottom: 1px solid var(--brand-border); }
.timeline li:last-child { border-bottom: none; }
.timeline .when { color: var(--brand-muted); font-size: 0.78rem; }
.files { margin: 8px 0 0; padding-left: 18px; font-size: 0.78rem; color: var(--brand-muted); }

/* ---------------------------------------------------------------- roadmap ของโครงการ */
.roadmap { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.roadmap .track h3 { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--brand-dark); }
.roadmap .track > p { margin: 2px 0 12px; }
.roadmap ol { list-style: none; margin: 0; padding: 0; }
.roadmap .step {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 0 0 16px 0;
	font-size: 0.85rem;
}
.roadmap .step .dot { margin-top: 4px; }
.roadmap .step .body { padding: 0; }
.roadmap .step .when { color: var(--brand-muted); font-size: 0.78rem; line-height: 1.5; }
.roadmap .step:last-child { padding-bottom: 0; }
.roadmap .step::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 18px;
	bottom: 4px;
	width: 1px;
	background: var(--brand-border);
}
.roadmap .step:last-child::before { display: none; }
.roadmap .dot {
	flex: 0 0 13px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	border: 2px solid var(--brand-border);
	background: #fff;
	z-index: 1;
}
.roadmap .step.done .dot { background: var(--ok); border-color: var(--ok); }
.roadmap .step.current .dot { border-color: var(--brand-orange); box-shadow: 0 0 0 3px var(--accent-soft); }
.roadmap .step.cancelled .dot { background: var(--danger); border-color: var(--danger); }
.roadmap .step.todo .label { color: var(--brand-muted); }
.roadmap .step.current .label { font-weight: 600; color: var(--brand-dark); }
.roadmap .step.cancelled .label { color: var(--danger); }

/* ---------------------------------------------------------------- เช็คลิสต์เอกสาร */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--brand-border);
}
.checklist li:last-child { border-bottom: none; }
.checklist .label { flex: 1; min-width: 0; }
.checklist .file { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.checklist .file a {
	font-size: 0.8rem;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.checklist .file input[type="file"] { font-size: 0.78rem; max-width: 210px; }

/* ==========================================================================
   Legacy component compatibility
   เทมเพลตหน้าเนื้อ (opportunities, bids, follows, watch_rules, rubrics, jobs,
   board, company) ยังใช้ชุดคลาสเดิมของ base.css — ให้ render เป็นสไตล์ DinsorOffice
   โดยไม่ต้องรื้อ markup ทีละไฟล์ · โครง shell (sidebar/topbar) กับหน้า dashboard/login
   ใช้ markup Adminto/Bootstrap เต็มตัวแล้ว
   ========================================================================== */

/* หัวการ์ดแบบเดิม <div class="card"><h2>…<span class="spacer"></span>…</h2> */
.card > h2 {
	margin: 0;
	padding: 14px var(--card-pad-x);
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--brand-dark);
	border-bottom: 1px solid var(--brand-border);
	display: flex;
	align-items: center;
	gap: 10px;
}
.card > h2 .spacer, .spacer { flex: 1; }
.card > h2 + .body, .card > h2 + .table-wrap, .card > h2 + ul,
.card > h2 + .roadmap { border-top: 0; }
.card .body { padding: var(--card-pad-y) var(--card-pad-x); }
.card .note { padding: 16px var(--card-pad-x); color: var(--brand-muted); font-size: 0.85rem; }
.card > .body + .body { border-top: 1px solid var(--brand-border); }
/* .body ที่ต้องมีเส้นคั่นจากบล็อกบน (เดิมเขียน inline style="border-top:1px solid var(--border)")
   ครอบทั้ง .body ตรง ๆ ในการ์ด และ .body ที่ถูกวนซ้ำเป็นรายการ (ผลประเมิน) */
.card .body.section { border-top: 1px solid var(--brand-border); }
.card > h2 + .body.section { border-top: 0; }

/* หัวข้อย่อย/ย่อหน้า/ตารางคีย์-ค่า ในเนื้อการ์ด — เดิมคุมด้วย inline style ในเทมเพลตหน้ารายละเอียด */
.card .body > h2 {
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--brand-dark);
	display: block;
}
.card .body > table { margin-top: 14px; }
.card .body > p { margin: 8px 0 0; }
.card .body > p:first-child { margin-top: 0; }
.card .body > p.err { color: var(--danger); }
.card .body > .detail-actions { margin-top: 12px; align-items: center; gap: 8px; }

/* ตารางแบบเดิม (bare <table>) */
.card table, table.plain { width: 100%; border-collapse: collapse; }
.card table:not(.table) > thead > tr > th,
.card table:not(.table) > tbody > tr > th,
.card table:not(.table) > tbody > tr > td {
	padding: 12px var(--card-pad-x);
	text-align: left;
	border-bottom: 1px solid #f1f3f5;
	vertical-align: top;
	font-size: 0.9rem;
}
.card table > thead > tr > th {
	font-size: 0.82rem;
	color: #495057;
	font-weight: 600;
	background: #f8f9fa;
	white-space: nowrap;
	border-bottom: 2px solid var(--brand-border);
}
.card table > tbody > tr:hover > td { background: #fcfdfe; }
/* ชื่อโครงการในตารางโครงการ — ดำตามปกติ ส้มเฉพาะตอน hover (ไม่ใช้สีลิงก์ส้มทั่วไป
   เพราะทั้งตารางเป็นลิงก์แถวเดียวกันหมด ขึ้นส้มทั้งแผงจะจับจุดคลิกไม่ออก) */
.title-link { color: var(--text); }
.title-link:hover { color: var(--brand-orange); }
.card table > tbody > tr:last-child > td { border-bottom: none; }
td.num, th.num { text-align: right !important; white-space: nowrap; }
.table-wrap { overflow-x: auto; }

/* คอลัมน์ TOR ในตารางโครงการ (_row.html) — ไอคอนโฟลเดอร์ กดเปิด <dialog> รายชื่อไฟล์ทุกกรณี */
.tor-cell { white-space: nowrap; }
button.tor-open { background: none; border: none; padding: 0; cursor: pointer; line-height: 1; }
.tor-icon { font-size: 22px; line-height: 1; color: var(--text); vertical-align: middle; }
button.tor-open:hover .tor-icon { color: var(--brand-orange); }
.tor-dialog {
	border: none; border-radius: 10px; padding: 0; width: min(480px, calc(100vw - 32px));
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18); white-space: normal; text-align: left;
}
.tor-dialog::backdrop { background: rgba(33, 37, 41, 0.45); }
.tor-dialog-head { padding: 16px 20px 12px; border-bottom: 1px solid var(--border); }
.tor-dialog-title { font-weight: 600; margin-bottom: 2px; }
.tor-dialog > ul { list-style: none; margin: 0; padding: 8px; max-height: 60vh; overflow-y: auto; }
.tor-dialog > ul > li > a {
	display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; border-radius: 6px; word-break: break-all;
}
.tor-dialog > ul > li > a { color: var(--text); }
.tor-dialog > ul > li > a:hover { background: var(--accent-soft); color: var(--brand-orange); }
.tor-dialog > ul .mdi { font-size: 18px; line-height: 1.2; }
.tor-dialog-foot { display: flex; justify-content: flex-end; padding: 10px 16px 14px; margin: 0; }

/* ป้ายสถานะแบบเดิม .tag */
.tag {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	background: var(--accent-soft);
	color: var(--brand-orange);
	white-space: nowrap;
	line-height: 1.7;
}
.tag.gray { background: #f1f3f5; color: var(--brand-muted); }
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.warn { background: var(--warn-soft); color: #d9a325; }
.tag.danger { background: var(--danger-soft); color: var(--danger); }

.muted { color: var(--brand-muted); }
.small { font-size: 0.8rem; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* ฟอร์มแบบเดิม .row / .field / .check
   เทมเพลตเดิมใช้ class="row" เป็น flex container ทั่วไป แต่ Bootstrap ยึด .row เป็น grid
   (บังคับ .row > * ให้ width:100%) — ต้องปลดตรงนี้ให้ลูกกลับมากว้างตามเนื้อ */
form.row, .card .row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; margin: 0 0 14px; }
/* แถวของฟิลด์มีจังหวะห่างเท่ากับ .field เดี่ยว — เดิม margin:0 ทำให้ฟิลด์ใต้แถว (เช่นในฟอร์ม
   สร้างเวอร์ชันเกณฑ์/โปรไฟล์บริษัท) ไปชิดกับแถวบน · แถวสุดท้ายและแถวปุ่มไม่ต้องมีหางล่าง */
form.row:last-child, .card .row:last-child, .card .row.detail-actions { margin-bottom: 0; }
form.row > *, .card .row > * { width: auto; max-width: none; flex-shrink: 1; }
/* padding แยกออกมาเว้น button/.btn — เดิมรวมอยู่ในเซ็ตข้างบนแล้วกวาดโดนปุ่มที่วางตรงลูกของ .row
   ด้วย (เช่น ปุ่มติดตาม/ตัดสินใจยื่นใน .row.detail-actions) padding เลยหายเป็น 0 ทั้งที่ตัวเลือก
   ปุ่ม (.card button:where(...)) ตั้งไว้ 7px 15px แต่จำเพาะเจาะจงน้อยกว่า .card .row > * เลยแพ้ */
form.row > *:not(button):not(.btn), .card .row > *:not(button):not(.btn) { padding: 0; }
form.row > .field, .card .row > .field { flex: 1 1 auto; min-width: 150px; margin-bottom: 0; }
.field { margin-bottom: 14px; }
.field > label:not(.check) {
	display: block;
	font-size: 0.8rem;
	color: var(--brand-muted);
	margin-bottom: 3px;
	font-weight: 500;
}
.field input:not([type=checkbox]):not([type=radio]),
.field select,
.field textarea,
.login-box input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid #dee2e6;
	border-radius: 5px;
	font: inherit;
	font-size: 0.9rem;
	background: #fff;
	color: var(--text);
}
.field textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus, .login-box input:focus {
	outline: none;
	border-color: var(--brand-orange);
	box-shadow: 0 0 0 0.15rem rgba(255, 102, 0, 0.12);
}
label.check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text); }
label.check input { width: auto; accent-color: var(--brand-orange); }

/* เลือกบุคลากรขึ้นสไลด์ข้อเสนอ (_proposal_deck.html) — จัดเป็นกลุ่มตามแผนกแทนลิสต์ยาวเส้นเดียว
   ที่ติ๊กยากเมื่อทะเบียนโตเกิน ~10 คน แต่ละกลุ่มเป็นกรอบของตัวเอง มีหัวกลุ่ม + ปุ่ม "เลือกทั้งหมด"
   เฉพาะกลุ่มนั้น (bindPersonnelGroupSelectAll ใน app.js) ส่วนคนที่ AI เสนอจากผลวิเคราะห์ TOR
   เน้นด้วยกรอบ+พื้นหลังเขียวอ่อน ให้เห็นต่างจากคนที่ต้องเลือกเองโดยไม่ต้องอ่าน tag ทีละใบ */
.personnel-groups { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.personnel-group { border: 1px solid var(--brand-border); border-radius: 8px; padding: 10px 12px; }
.personnel-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.personnel-group-name { font-weight: 600; font-size: 0.88rem; color: var(--brand-dark); }
.personnel-group-head .select-all { margin-left: auto; }
.personnel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.personnel-item {
	display: flex; align-items: flex-start; gap: 8px;
	border: 1px solid #eee; border-radius: 6px; padding: 8px 10px;
	cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.personnel-item:hover { border-color: var(--brand-orange); }
.personnel-item input { width: auto; margin-top: 3px; accent-color: var(--brand-orange); }
.personnel-item.suggested { border-color: var(--ok); background: var(--ok-soft); }
.personnel-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.personnel-item-name { font-size: 0.88rem; font-weight: 500; display: flex; align-items: center; gap: 6px; }

/* ตัวกรองหน้ารายการโครงการ — สามชั้นซ้อนกัน: ช่องกรอก / checkbox / ปุ่ม
   แต่ละช่องยืดเต็มที่ว่าง และตัดขึ้นบรรทัดใหม่ทั้งช่องเมื่อพื้นที่ไม่พอ (ไม่บีบให้แคบจนอ่านไม่ออก) */
.filters { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.filters .filters-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: flex-end;
}
.filters .filters-fields > .field {
	/* ไม่ยืด — อยู่ตามความกว้างพื้นฐาน แล้วตัดขึ้นบรรทัดใหม่ทั้งช่องเมื่อไม่พอ
	   ช่องที่ควร "กินที่ว่างที่เหลือ" (ค้นหา/หน่วยงาน) เปิด flex-grow แยกด้านล่าง */
	flex: 0 1 190px;
	margin-bottom: 0;
	min-width: 0;
}
.filters .filters-fields > .field.field-grow-2 { flex-grow: 2; flex-basis: 220px; }
.filters .filters-fields > .field.field-grow-3 { flex-grow: 3; flex-basis: 260px; }
.filters .filters-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	align-items: center;
}
.filters .filters-actions { display: flex; }

/* ปุ่มแบบเดิม — ตัว :not() ห่อด้วย :where() เพราะ :not(.a):not(.b):not(.c) ธรรมดานับความจำเพาะ
   เท่ากับมี 3 คลาสจริง ๆ (จำเพาะ 0,5,1) สูงกว่า .ghost/.danger/.accent (0,2,1) เสียอีก — ปุ่มพวกนั้น
   เคยแพ้กติกานี้เงียบ ๆ แล้วออกมาเป็นสีส้มทึบเหมือนปุ่มหลักทุกอัน (:where() ไม่นับความจำเพาะเลย
   ไม่ว่าข้างในจะซับซ้อนแค่ไหน กติกาสีจึงกลับไปขึ้นกับคลาสจริงเหมือนที่ควรเป็น) */
.card button:where(:not(.btn):not(.star):not(.button-menu-mobile):not(.card-fold):not(.tor-open)),
button.btn:where(:not([class*="btn-"])),
a.btn:where(:not([class*="btn-"])) {
	padding: 7px 15px;
	border: 1px solid var(--brand-orange);
	background: var(--brand-orange);
	color: #fff;
	border-radius: 5px;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	display: inline-block;
	text-decoration: none;
	line-height: 1.5;
}
.card button:where(:not(.btn):not(.star):not(.card-fold):not(.tor-open)):hover,
button.btn:where(:not([class*="btn-"])):hover,
a.btn:where(:not([class*="btn-"])):hover { background: var(--brand-orange-hover); border-color: var(--brand-orange-hover); color: #fff; }

/* ปุ่มพับการ์ด — ลูกศร ^ / v เปล่า ๆ ไม่มีพื้นหลัง ดันไปขวาสุดของแถว (margin-left:auto ในแถว flex) */
button.card-fold {
	background: none; border: none; color: var(--brand-muted);
	font-size: 20px; line-height: 1; padding: 0 4px; margin-left: auto;
	cursor: pointer; align-self: center;
}
button.card-fold:hover { color: var(--text); }
.card button.ghost, a.btn.ghost, button.btn.ghost {
	background: #fff; color: var(--text); border-color: #dee2e6; font-weight: 500;
}
.card button.ghost:hover, a.btn.ghost:hover { background: #f8f9fa; border-color: #ced4da; color: var(--text); }
/* ปุ่มระดับ "ดึงของเข้ามาเสริม" — ไม่ใช่ CTA หลักของหน้า (ไม่ใช่สีส้มทึบเหมือนบันทึก/เพิ่ม)
   แต่ก็ไม่ใช่ปุ่มกลาง ๆ แบบ ghost: ใบที่ AI เสนอมาให้ดึงเข้าเช็คลิสต์จริง, ตั้งของที่เคยคัดทิ้ง
   กลับเข้าคิว — เห็นชัดว่ามีของใหม่รอให้กดแต่ไม่ได้แย่งความสนใจจาก CTA หลัก */
.card button.accent, a.btn.accent {
	background: #fff; color: var(--brand-orange); border-color: var(--brand-orange); font-weight: 500;
}
.card button.accent:hover, a.btn.accent:hover { background: var(--brand-orange); color: #fff; }
/* ปุ่มลบ — ทึบสีแดงเหมือนปุ่มหลักทึบสีส้ม (ไม่ใช่ outline) ตั้งใจให้หน้าตาเดียวกันทั้งระบบ
   ต่างกันแค่สี ไม่มีเหตุผลอะไรให้ต้อง outline โดยเฉพาะ */
.card button.danger, a.btn.danger {
	background: var(--danger); color: #fff; border-color: var(--danger); font-weight: 500;
}
.card button.danger:hover, a.btn.danger:hover { background: #e64545; border-color: #e64545; color: #fff; }
.card button.small, a.btn.small { padding: 3px 10px; font-size: 0.78rem; }
.card button:disabled { opacity: 0.55; cursor: default; }

/* toggle switch — คอลัมน์ "เปิดใช้" ของตารางบุคลากร (และที่อื่นที่มี checkbox แบบ on/off
   ล้วน ๆ โดยไม่มีข้อความกำกับ) ทึบเขียวตอนเปิด เทาตอนปิด ต่างจาก .check ที่เป็น checkbox
   ธรรมดาไว้ใช้คู่กับ label ข้อความ (เช่น ติ๊กเลือกบุคลากรตอนร่างสไลด์) */
.toggle-switch { position: relative; display: inline-block; width: 38px; height: 22px; vertical-align: middle; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .toggle-slider {
	position: absolute; inset: 0; cursor: pointer;
	background: #ccc; border-radius: 22px; transition: background 0.15s;
}
.toggle-switch .toggle-slider::before {
	content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px;
	background: #fff; border-radius: 50%; transition: transform 0.15s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--ok); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }
.toggle-switch input:disabled + .toggle-slider { opacity: 0.55; cursor: default; }

/* alert แบบเดิม (บางหน้าใช้ .alert ตรง ๆ) */
.alert.error { background: var(--danger-soft); color: var(--danger); border: 0; }
.alert.ok { background: var(--ok-soft); color: var(--ok); border: 0; }

/* หน้า login เก่า (login-page/login-box) — เผื่อ fallback */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.login-box {
	width: 380px; max-width: 100%;
	background: #fff; border: 1px solid var(--brand-border);
	border-top: 3px solid var(--brand-orange);
	border-radius: 8px; padding: 30px 28px;
	box-shadow: 0 6px 26px rgba(0, 0, 0, 0.08);
}
.login-box h1 { font-size: 1.15rem; margin: 0 0 3px; color: var(--brand-dark); }
.login-box p.sub { margin: 0 0 22px; color: var(--brand-muted); font-size: 0.85rem; }

details > summary { cursor: pointer; }

/* ---------------------------------------------------------------- ผลวิเคราะห์ TOR — หัวข้อพับได้ */
/* :not([hidden]) เพราะลูกศรพับก้อน (bindTorResultToggle) ตั้ง body.hidden — display:flex
   ที่ตัว #id ทับ UA style [hidden]{display:none} ถ้าไม่กันไว้ ก้อนจะไม่ยอมพับ */
#tor-result-body:not([hidden]) { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.tor-sec { border: 1px solid var(--brand-border); border-radius: var(--radius); }
.tor-sec > summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--brand-dark);
}
.tor-sec > summary::-webkit-details-marker { display: none; }
.tor-sec > summary::before {
	content: "\25B8";
	color: var(--brand-muted);
	font-size: 0.8rem;
	transition: transform 0.15s;
}
.tor-sec[open] > summary::before { transform: rotate(90deg); }
.tor-sec[open] > summary { border-bottom: 1px solid var(--brand-border); }
.tor-sec > summary .count { margin-left: auto; font-weight: 400; flex: 0 0 auto; }
.tor-sec > .sec-body { padding: 2px 14px 12px; }
.tor-sec > .sec-body > table { margin-top: 12px; }
.tor-sec > .sec-body > .detail-actions { margin-top: 12px; }

/* รายการต้นไม้ของผลวิเคราะห์ TOR (_scoring_tree.html) — ใช้กับทุกหมวดที่มีหัวข้อย่อย
   (เกณฑ์คะแนน/คุณสมบัติบังคับ/เช็คลิสต์สเปก/งานส่งมอบ) เดิมทุกข้อ/ข้อย่อยแสดง level เดียวกันหมด
   ทำให้แยกไม่ออกว่าอันไหนเป็นหัวข้อใหญ่ อันไหนเป็นข้อย่อยของอันไหน · ระดับลูกร่นเข้า + มีเส้นคั่นซ้าย
   แยกหัวข้อที่มีลูก (has-children) ด้วยสีเท่านั้น ไม่ใช้ตัวหนา */
.scoring-tree { list-style: none; margin: 0; padding: 0; }
.scoring-tree .scoring-tree { margin: 6px 0 10px 18px; padding-left: 14px; border-left: 2px solid var(--brand-border); }
.scoring-tree > li { padding: 10px 0; border-bottom: 1px solid var(--brand-border); }
.scoring-tree > li:last-child { border-bottom: none; }
.scoring-tree > li.has-children { border-bottom: none; padding-bottom: 0; }
.scoring-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.scoring-row .tag { flex: 0 0 auto; }
.scoring-tree > li.has-children > .scoring-row .scoring-item { color: var(--brand-dark); }
/* กฎรวมท้ายหมวด เช่น "ต้องได้คะแนนผ่านเกณฑ์รวมไม่น้อยกว่า…" — แยกจากเกณฑ์ที่มีน้ำหนักคะแนนย่อย
   ด้วยพื้นหลังอุ่น ๆ ให้อ่านเป็น "กติกา" ไม่ใช่รายการที่นับรวมกับข้ออื่น */
.scoring-tree > li.threshold { margin-top: 6px; padding: 10px 12px; background: var(--warn-soft); border-radius: var(--radius); border-bottom: none; }

/* checkbox "เตรียม/แก้ไขแล้ว" ต่อข้อ — เฉพาะ 3 หมวดใน CHECKABLE_SECTIONS (mandatory_requirements/
   compliance_checklist/capability_gaps) ติ๊กแล้วขีดฆ่า+จางลง ให้เห็นว่าอันไหนจัดการแล้วโดยไม่ต้อง
   ลบทิ้งออกจากลิสต์ (ผลวิเคราะห์ AI ห้ามแก้ทับ — ดู TorAnalysis) */
.item-check { display: flex; align-items: baseline; gap: 8px; cursor: pointer; flex: 1 1 auto; min-width: 0; }
.item-check input[type="checkbox"] { flex: 0 0 auto; margin-top: 3px; cursor: pointer; }
.is-checked { text-decoration: line-through; color: var(--muted); }

/* ==========================================
   select2 — ปรับให้เข้าชุดกับ .field input (ขอบเทา โฟกัสส้ม)
   ========================================== */
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single {
	height: 38px;
	border: 1px solid #dee2e6;
	border-radius: 5px;
	background: #fff;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 36px;
	padding-left: 12px;
	color: var(--text);
	font-size: 0.9rem;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #adb5bd; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; right: 6px; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--brand-orange);
	box-shadow: 0 0 0 0.15rem rgba(255, 102, 0, 0.12);
	outline: none;
}
.select2-dropdown {
	border: 1px solid #dee2e6;
	border-radius: 5px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}
.select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1px solid #dee2e6;
	border-radius: 4px;
	padding: 6px 10px;
	outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--brand-orange);
}
.select2-results__option { padding: 7px 12px; font-size: 0.9rem; }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--brand-orange);
}
.select2-container--default .select2-results__option[aria-selected=true] {
	background-color: var(--accent-soft);
	color: var(--brand-dark);
}
.select2-container--default .select2-selection--single .select2-selection__clear {
	color: #adb5bd;
	margin-right: 22px;
	font-weight: 700;
}

/* ==========================================
   Responsive — จอแคบพับ sidebar
   ========================================== */
@media (max-width: 992px) {
	.left-side-menu { transform: translateX(-100%); transition: transform 0.2s ease; }
	.content-page { margin-left: 0; }
	.logo-box { border-right: none; }
	.button-menu-mobile { display: inline-block; }
	.sidebar-enable .left-side-menu { transform: translateX(0); }
	/* .logo-box ล็อกกว้าง 240px ไว้ให้พอดีกับ sidebar ตอนจอกว้าง — จอแคบ sidebar พับไปแล้ว
	   ความกว้างนั้นไม่มีเหตุผลอะไรเหลือ ปล่อยไว้แบบเดิมกินพื้นที่หน้าจอมือถือไปเกินครึ่งจนหัวข้อ
	   ของหน้า (page-title-main) กับปุ่มออกจากระบบถูกดันล้นขอบขวาไปเลย (ไม่มี scroll ให้ตามไปกด) */
	.logo-box { width: auto; padding: 0 14px; }
	/* wrapper รอบ logo-box/hamburger/หัวข้อหน้า ต้อง min-width:0 ด้วย ไม่งั้น flexbox จะกันพื้นที่ไว้
	   เท่าความกว้างเนื้อในทั้งก้อนโดยไม่ยอมหด (ค่าเริ่มต้นของ flex item คือ min-width:auto) */
	.navbar-custom > .d-flex { min-width: 0; flex: 1 1 auto; }
	.navbar-custom .page-title-main {
		flex: 1 1 auto; min-width: 0; padding-left: 12px;
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
	.navbar-custom .topbar-right { flex-shrink: 0; padding-right: 14px; }
}

/* ---- แผงระหว่างรอร่างสไลด์ (bindProposalDeck) ----
   spinner + แถบวิ่งบอกว่ายังทำงานอยู่ — ไม่ใช่เปอร์เซ็นต์จริง เพราะ console ตอบทีเดียวตอนเสร็จ
   :not([hidden]) ด้วยเหตุผลเดียวกับ #tor-result-body — display:flex ทับ [hidden] ของ UA
   · ขึ้นต้น .card .row เพราะแผงเป็นลูกของ .row ซึ่งโดน `.card .row > * { padding: 0 }` ทับ */
.deck-progress:not([hidden]) {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
	width: 100%; margin-top: 10px; padding: 12px 14px;
	border: 1px solid var(--brand-orange); border-radius: 6px; background: var(--accent-soft);
}
/* ปุ่มร่างถูกซ่อนระหว่างรอ — display ของ .card button ทับ [hidden] ของ UA ต้องกันเอง */
#deck-generate[hidden] { display: none; }
.deck-progress.slow { border-color: var(--warn); background: var(--warn-soft); }
.deck-progress-text { display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; }
.deck-spinner {
	width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
	border: 3px solid rgba(255, 119, 0, 0.25); border-top-color: var(--brand-orange);
	animation: deck-spin 0.8s linear infinite;
}
.deck-progress-bar {
	flex-basis: 100%; height: 4px; overflow: hidden; border-radius: 2px;
	background: rgba(255, 119, 0, 0.15);
}
.deck-progress-bar span {
	display: block; width: 30%; height: 100%; border-radius: 2px; background: var(--brand-orange);
	animation: deck-slide 1.4s ease-in-out infinite;
}
.deck-progress.slow .deck-spinner { border-top-color: var(--warn); }
.deck-progress.slow .deck-progress-bar span { background: var(--warn); }
@keyframes deck-spin { to { transform: rotate(360deg); } }
@keyframes deck-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) {
	.deck-spinner { animation-duration: 2.4s; }
	.deck-progress-bar span { animation: none; width: 100%; opacity: 0.5; }
}

/* ---- หน้าทำสไลด์ข้อเสนอ (opportunities/deck.html) ----
   ซ้ายเตรียมร่าง ขวาผลร่าง · ฝั่งซ้ายไม่ sticky เพราะตัวเลือกบุคลากรยาวกว่าจอได้ — sticky แล้ว
   ครึ่งล่างจะเลื่อนไปดูไม่ได้ · จอแคบพับเป็นคอลัมน์เดียว (เตรียมร่างก่อน ผลร่างตามหลัง) */
.deck-workspace {
	display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
	gap: 0 20px; align-items: start;
}
@media (max-width: 1100px) { .deck-workspace { grid-template-columns: minmax(0, 1fr); } }
.deck-summary-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.deck-generate-note { margin: 6px 0 0; }
.deck-generate-note[hidden] { display: none; }
.deck-summary-head h2 {
	margin: 0; font-size: 16px; font-weight: 600; color: var(--brand-dark); flex: 1 1 auto; min-width: 0;
}
.deck-checks { list-style: none; margin: 8px 0 0; padding: 0; }
.deck-checks li { display: flex; gap: 10px; padding: 7px 0; font-size: 0.88rem; border-bottom: 1px solid var(--brand-border); }
.deck-checks li:last-child { border-bottom: none; }
.deck-check-mark { flex: 0 0 18px; font-weight: 700; text-align: center; }
.deck-checks li.ok .deck-check-mark { color: var(--ok); }
.deck-checks li.missing .deck-check-mark { color: var(--danger); }
.deck-checks li.optional { color: var(--brand-muted); }
.deck-gaps {
	margin-top: 14px; padding: 12px 14px; border: 1px solid var(--warn); border-radius: 6px;
	background: var(--warn-soft); font-size: 0.88rem;
}
.outcome-prompt {
	padding: 12px 14px; border: 1px solid var(--warn); border-radius: 6px;
	background: var(--warn-soft); font-size: 0.88rem;
}
.deck-gaps ul { margin: 6px 0 0; padding-left: 20px; }
.slide-outline { list-style: none; margin: 14px 0 0; padding: 0; }
.slide-outline > li { padding: 12px 0; border-top: 1px solid var(--brand-border); }
.slide-outline-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.slide-no {
	flex: 0 0 auto; min-width: 26px; padding: 1px 6px; border-radius: 4px; text-align: center;
	font-size: 0.78rem; font-weight: 600; background: var(--brand-dark); color: #fff;
}
.slide-bullets { margin: 6px 0 0; padding-left: 54px; font-size: 0.86rem; }
.slide-bullets li { margin: 2px 0; }
.slide-bullets li.need { list-style: none; margin-left: -18px; }
.slide-note { margin: 6px 0 0 36px; }
.slide-note summary { cursor: pointer; }
.slide-note p { margin: 4px 0 0; white-space: pre-line; }
.deck-result tr.selected td { background: var(--accent-soft); }
.deck-result td:last-child { white-space: nowrap; }

/* ---- แก้เนื้อหาสไลด์บนหน้าทำสไลด์ (bindDeckEditor) ----
   ปุ่มเครื่องมือชิดขวาของหัวสไลด์ · แถบบันทึก sticky ติดบนจอ ให้เห็นตลอดว่ามีของค้าง */
.slide-tools { margin-left: auto; display: inline-flex; gap: 4px; flex-wrap: wrap; }
.slide-tools [hidden] { display: none; }
.deck-edit-hint { margin: 10px 0 0; }
.card .body > .deck-editbar:not([hidden]) {
	position: sticky; top: 80px; z-index: 5;
	display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap;
	margin-top: 12px; padding: 10px 14px; border: 1px solid var(--brand-orange); border-radius: 6px;
	background: var(--accent-soft); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.deck-editbar #deck-edit-count { flex: 1 1 200px; font-weight: 500; }
.deck-gaps-head { display: flex; align-items: center; gap: 8px; }
.deck-gaps-head [data-gaps-edit] { margin-left: auto; }
.deck-gaps-head [hidden] { display: none; }
.deck-gaps.empty { border-style: dashed; background: transparent; }
.deck-gaps-form textarea { margin-top: 6px; }
.slide-form, .deck-gaps-form { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 0 36px; }
.slide-form[hidden], .deck-gaps-form[hidden], .slide-deleted[hidden] { display: none; }
.slide-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; font-weight: 500; }
/* กล่องกรอกหน้าตาเดียวกับ .field ของฟอร์มอื่นในระบบ */
.slide-form input, .slide-form select, .slide-form textarea, .deck-gaps-form textarea {
	width: 100%; padding: 7px 10px; border: 1px solid #dee2e6; border-radius: 5px;
	font: inherit; font-size: 0.88rem; font-weight: 400; line-height: 1.55; background: #fff; color: var(--text);
}
.slide-form input:focus, .slide-form select:focus, .slide-form textarea:focus, .deck-gaps-form textarea:focus {
	outline: none; border-color: var(--brand-orange); box-shadow: 0 0 0 0.15rem rgba(255, 102, 0, 0.12);
}
.slide-form textarea, .deck-gaps-form textarea { resize: vertical; }
.slide-form-row { max-width: 260px; }
.slide-form [data-slide-revert] { align-self: flex-start; }
.slide-outline > li.editing { background: #fcfcfd; }
.slide-outline > li.new { background: var(--ok-soft); }
.slide-outline > li.deleted .slide-outline-head { opacity: 0.45; text-decoration: line-through; }
.slide-outline > li.deleted .slide-view,
.slide-outline > li.deleted .slide-form,
.slide-outline > li.deleted .slide-tools { display: none; }
.slide-deleted { display: flex; align-items: center; gap: 8px; margin: 6px 0 0 36px; }
@media (max-width: 600px) {
	.slide-tools { margin-left: 0; width: 100%; }
	.slide-form, .deck-gaps-form, .slide-deleted, .slide-note { margin-left: 0; }
	.slide-bullets { padding-left: 20px; }
}

/* ---- ร่างรอสร้างไฟล์ + แผนภาพ (timeline / process) บนหน้าทำสไลด์ ----
   มุมมองย่อของแผนภาพเป็นแค่ให้ตรวจตัวเลข ไม่ใช่พรีวิวหน้าตาจริง (หน้าตาจริงดูจากไฟล์ .pptx) */
.deck-build {
	display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; justify-content: space-between;
	margin-top: 12px; padding: 12px 14px; border: 1px solid var(--brand-orange); border-radius: 6px;
	background: var(--accent-soft);
}
/* เลือกเทมเพลตตอนสร้างไฟล์ (select2 + ภาพปก) — ภาพสัดส่วน 16:9 ตามสไลด์ */
.deck-template-pick { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-top: 12px; }
.deck-template-pick label { font-weight: 500; }
.deck-template-pick select { width: 320px; max-width: 100%; }
/* .select2-container ทั้งระบบตั้ง width 100% !important ไว้ — ตรงนี้ต้องแคบกว่านั้น */
.deck-template-pick .select2-container { width: 320px !important; max-width: 100%; }
.deck-template-pick .select2-container--default .select2-selection--single { height: 44px; }
.deck-template-pick .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 42px; padding-left: 6px;
}
.deck-template-pick .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }
.template-option { display: flex; align-items: center; gap: 10px; }
.template-thumb {
	flex: none; aspect-ratio: 16 / 9; border-radius: 3px; overflow: hidden;
	background: var(--border); box-shadow: 0 0 0 1px var(--border);
}
.template-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.template-option.small .template-thumb { width: 56px; }
.template-option.large .template-thumb { width: 128px; }
.template-option.large { padding: 4px 0; }
.template-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.diagram-view, .process-mini, .diagram-warnings { margin: 6px 0 0 36px; }
/* ตารางทั่วไปใน .card ตั้ง padding/เส้นไว้หนา — ตารางย่อนี้ต้องชนะ selector ชุดนั้น (ดู .card table) */
.card table.gantt-mini { width: auto; max-width: 100%; font-size: 0.78rem; }
.card table.gantt-mini > thead > tr > th,
.card table.gantt-mini > tbody > tr > td {
	padding: 2px 6px; border: 1px solid var(--border); line-height: 1.35; font-size: 0.78rem;
}
.card table.gantt-mini > thead > tr > th { background: var(--brand-navy-soft); font-weight: 500; text-align: center; color: var(--text); }
.card table.gantt-mini > tbody > tr > td:first-child { min-width: 240px; }
.card table.gantt-mini > tbody > tr > td:not(:first-child) { width: 26px; min-width: 26px; text-align: center; }
.card table.gantt-mini > tbody > tr > td.on,
.card table.gantt-mini > tbody > tr:hover > td.on { background: var(--brand-orange); }
.card table.gantt-mini > tbody > tr.milestones > td:first-child { font-weight: 500; }
.gantt-mini .ms { display: inline-block; padding: 0 4px; border-radius: 8px; background: var(--brand-orange); color: #fff; font-size: 0.7rem; }
.milestone-list { margin: 6px 0 0; padding-left: 18px; }
.process-mini { padding-left: 20px; }
.process-mini > li { margin-bottom: 4px; }
.process-mini ul { margin: 2px 0 0; padding-left: 18px; }
.diagram-warnings, .diagram-warn { list-style: none; padding: 0; }
.diagram-warnings li, .diagram-warn li { margin-top: 4px; }
.diagram-form { display: flex; flex-direction: column; gap: 12px; padding: 12px; border: 1px dashed var(--border); border-radius: 6px; background: #fff; }
.diagram-form[hidden] { display: none; }
.diagram-section { display: flex; flex-direction: column; gap: 6px; }
.diagram-section-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 0.85rem; }
.diagram-section > button { align-self: flex-start; }
.diagram-list { display: flex; flex-direction: column; gap: 6px; }
.diagram-row { display: flex; align-items: center; gap: 6px; }
.slide-form .diagram-row input { width: auto; flex: 1 1 140px; min-width: 0; }
.slide-form .diagram-row input.diagram-wide { flex: 3 1 240px; }
.slide-form .diagram-row input.diagram-month { flex: 0 0 72px; }
.slide-form .diagram-row input.diagram-label { flex: 0 0 64px; }
.diagram-step { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 5px; background: var(--bg); }
.slide-form label.diagram-months { flex-direction: row; align-items: center; gap: 8px; }
.slide-form label.diagram-months input { width: 90px; }
@media (max-width: 600px) {
	.diagram-view, .process-mini, .diagram-warnings { margin-left: 0; }
	.diagram-view { overflow-x: auto; }
	.diagram-row { flex-wrap: wrap; }
}