/* ═══════════════════════════════════════════════════════════
   ธีมสีหน้า "แผนดำเนินงาน"
   โหลดผ่าน includes/plan-theme.php หลัง <style> ของแต่ละหน้า
   สีมาจาก --pt1 (อ่อน) / --pt2 (เข้ม) / --pt-hero (รูปหัวหน้า)
   ═══════════════════════════════════════════════════════════ */

/* ── Hero (ทั้งหน้ารวมและหน้ารายการเอกสาร) ── */
.sp-hero, .ap-hero, .gp-hero, .pp-hero, .bap-hero { align-items: center; }
.sp-hero-bg, .ap-hero-bg, .gp-hero-bg, .pp-hero-bg, .bap-hero-bg {
  background-image: var(--pt-hero);
  background-color: var(--pt2);
  filter: none;
}
.sp-hero-bg::after, .ap-hero-bg::after, .gp-hero-bg::after, .pp-hero-bg::after, .bap-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle, rgba(255,255,255,.10) 1px, transparent 1.4px) 0 0 / 24px 24px,
    linear-gradient(120deg,
      color-mix(in srgb, var(--pt2) 88%, transparent) 0%,
      rgba(15,23,42,.62) 55%,
      color-mix(in srgb, var(--pt1) 70%, transparent) 100%);
}
.sp-hero-inner, .ap-hero-inner, .gp-hero-inner, .pp-hero-inner, .bap-hero-inner { padding-bottom: 0; }
.sp-hero-title, .ap-hero-title, .gp-hero-title, .bap-hero-title {
  text-shadow: 0 3px 18px rgba(0,0,0,.35);
}
.sp-hero-title::after, .ap-hero-title::after, .gp-hero-title::after, .bap-hero-title::after {
  content: ''; display: block; width: 64px; height: 4px; margin: 12px auto 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--pt1), #fff);
}
.bap-hero-sub { color: rgba(255,255,255,.9); }
.sp-hero-lines { opacity: .5; }

/* ── การ์ดนำทางในหน้ารวม (แต่ละใบคนละสี) ── */
.sp-nav-cards > a:nth-child(1), .ap-nav-cards > a:nth-child(1), .gp-nav-cards > a:nth-child(1), .pp-nav-cards > a:nth-child(1) { --nc: var(--pt2); }
.sp-nav-cards > a:nth-child(2), .ap-nav-cards > a:nth-child(2), .gp-nav-cards > a:nth-child(2), .pp-nav-cards > a:nth-child(2) { --nc: #0d9488; }
.ap-nav-cards > a:nth-child(3) { --nc: #2563eb; }
.ap-nav-cards > a:nth-child(4) { --nc: #db2777; }
.ap-nav-cards > a:nth-child(5) { --nc: #7c3aed; }
/* หน้าแผนปฏิบัติการ: ใบแรก (ระดับสาขา) ใช้ฟ้าอมเขียว ใบสอง (ระดับคณะ) ใช้สีธีม */
.ap-nav-cards > a:nth-child(1) { --nc: #0e7490; }
.ap-nav-cards > a:nth-child(2) { --nc: var(--pt2); }

.sp-nav-cards .sp-nav-card, .ap-nav-cards .ap-nav-card, .gp-nav-cards .gp-nav-card, .pp-nav-cards .pp-nav-card {
  border-bottom: 5px solid color-mix(in srgb, var(--nc) 70%, #fff);
  box-shadow: 0 16px 32px -14px var(--nc), 0 4px 12px rgba(0,0,0,.18);
}
.sp-nav-cards .sp-nav-card:hover, .ap-nav-cards .ap-nav-card:hover, .gp-nav-cards .gp-nav-card:hover, .pp-nav-cards .pp-nav-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 40px -14px var(--nc), 0 6px 16px rgba(0,0,0,.2);
}
.sp-nav-cards .sp-nav-card-overlay, .ap-nav-cards .ap-nav-card-overlay,
.gp-nav-cards .gp-nav-card-overlay, .pp-nav-cards .pp-nav-card-overlay {
  background: linear-gradient(to top,
    color-mix(in srgb, var(--nc) 95%, transparent) 0%,
    color-mix(in srgb, var(--nc) 60%, transparent) 50%,
    color-mix(in srgb, var(--nc) 12%, transparent) 100%);
}
.sp-nav-card-label .arrow-btn, .ap-nav-card-label .arrow-btn,
.gp-nav-card-label .arrow-btn, .pp-nav-card-label .arrow-btn {
  background: rgba(255,255,255,.15); transition: background .2s, color .2s;
}
.sp-nav-card:hover .arrow-btn, .ap-nav-card:hover .arrow-btn,
.gp-nav-card:hover .arrow-btn, .pp-nav-card:hover .arrow-btn {
  background: #fff; color: var(--nc); text-shadow: none; opacity: 1;
}

/* ── แท็บหมวด ── */
.ap-tabs, .gp-tabs { border-bottom: 0; box-shadow: 0 6px 18px -12px rgba(15,23,42,.25); }
.ap-tabs .tab-inner, .gp-tabs .tab-inner {
  gap: 8px; padding: 12px 0; overflow-x: auto;
  /* จัดกึ่งกลาง — "safe" กันแท็บตัวแรกโดนตัดจนเลื่อนไปหาไม่ได้เมื่อจอแคบ
     (เบราว์เซอร์ที่ไม่รองรับ safe จะใช้ค่า center บรรทัดบนแทน) */
  justify-content: center;
  justify-content: safe center;
  flex-wrap: nowrap;
}
/* แท็บไม่ให้ถูกบีบจนตัวหนังสือขึ้นบรรทัดใหม่ */
.ap-tabs .tab-inner > a, .gp-tabs .tab-inner > a { flex: 0 0 auto; white-space: nowrap; }
.ap-tabs a, .gp-tabs a {
  border: 1.5px solid color-mix(in srgb, var(--pt1) 45%, #fff);
  border-radius: 50px; padding: 8px 18px; color: var(--pt2); background: #fff;
}
.ap-tabs a:hover, .gp-tabs a:hover {
  color: var(--pt2); background: color-mix(in srgb, var(--pt1) 14%, #fff); border-color: var(--pt1);
}
.ap-tabs a.active, .gp-tabs a.active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--pt1), var(--pt2));
  box-shadow: 0 6px 14px -6px var(--pt2);
}

/* ── พื้นหลังส่วนเนื้อหา ── */
.sp-section, .ap-section, .gp-section, .bap-section {
  background:
    radial-gradient(circle at 4% 8%, color-mix(in srgb, var(--pt1) 16%, transparent), transparent 30%),
    radial-gradient(circle at 96% 70%, color-mix(in srgb, var(--pt2) 10%, transparent), transparent 32%),
    #f5f6fa;
}
/* ลิงก์ "กลับ" → ปุ่มแคปซูล */
.sp-section .container > div:first-child > a,
.ap-section .container > div:first-child > a,
.bap-section .container > div:first-child > a {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--pt2) !important; font-weight: 600;
  background: #fff; border: 1.5px solid color-mix(in srgb, var(--pt1) 45%, #fff);
  border-radius: 50px; padding: 6px 16px; transition: .2s;
}
.sp-section .container > div:first-child > a:hover,
.ap-section .container > div:first-child > a:hover,
.bap-section .container > div:first-child > a:hover {
  color: #fff !important; background: var(--pt2); border-color: var(--pt2);
}

/* ── กล่องตาราง ── */
.sp-box, .ap-box, .gp-box, .bap-box {
  position: relative; border-radius: 18px;
  box-shadow: 0 18px 40px -24px color-mix(in srgb, var(--pt2) 70%, transparent), 0 2px 10px rgba(15,23,42,.05);
}
.sp-box::before, .ap-box::before, .gp-box::before, .bap-box::before {
  content: ''; display: block; height: 6px;
  background: linear-gradient(90deg, var(--pt2), var(--pt1), var(--pt2));
}
.sp-box .sp-box-title, .ap-box .ap-box-title, .gp-box .gp-box-title, .bap-box .bap-box-title {
  color: var(--pt2); padding: 26px 20px 18px; font-size: 1.2rem;
}
.sp-box-title::after, .ap-box-title::after, .gp-box-title::after, .bap-box-title::after {
  content: ''; display: block; width: 56px; height: 4px; margin: 10px auto 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--pt1), var(--pt2));
}

/* ── ตาราง ── */
.sp-table thead tr { background: linear-gradient(90deg, var(--pt2), color-mix(in srgb, var(--pt1) 85%, var(--pt2))); }
.sp-table thead th { background: transparent; color: #fff; letter-spacing: .02em; }
.sp-table tbody tr:nth-child(even) { background: #fafbfd; }
.sp-table tbody tr:hover { background: color-mix(in srgb, var(--pt1) 9%, #fff); }
.sp-table tbody td:first-child { color: var(--pt2); font-weight: 800; }
.sp-table tbody tr:hover td .doc-title { color: var(--pt2); }
.sp-table tbody td:nth-child(3) > span[style*="font-size"] {
  display: inline-block; padding: 3px 11px; border-radius: 50px; font-weight: 600; white-space: nowrap;
  background: color-mix(in srgb, var(--pt1) 14%, #fff); color: var(--pt2) !important;
}
.pdf-btn svg { filter: drop-shadow(0 5px 8px rgba(220,38,38,.3)); transition: transform .25s; }
.pdf-btn:hover { opacity: 1; }
.pdf-btn:hover svg { transform: translateY(-2px) rotate(-4deg) scale(1.05); }
.pdf-btn:hover .pdf-label { color: #dc2626; }
.sp-empty i { color: color-mix(in srgb, var(--pt1) 60%, #fff); }

@media (prefers-reduced-motion: reduce) {
  .pdf-btn svg { transition: none; }
}