/* สรุปรายงานแผนฯ 3 (/p3) — เนื้อหาอยู่ใน layout หลักของ plans4 (plan / plan_bkk) ; CSS ทั้งหมดผูกกับ #p3 เพื่อไม่ชนกับ plan.css / bkk-theme.css */
#p3{
  --bg:var(--n0,#fff);--bg2:#fff;--bg3:var(--p0,#f4f9f7);--bg4:#e3ebe7;
  --border:rgba(0,0,0,.08);--border2:rgba(0,0,0,.14);
  --text:var(--n900,#1a1a2e);--text2:var(--n700,#414442);--text3:var(--n500,#626664);
  --accent:var(--p500,#1a7e3f);--accent2:var(--p500,#1a7e3f);
  --gold:#b7791f;--gold2:#c9a227;--green:#1a7e3f;--green2:#22c55e;--red:#dc2626;--red2:#ef4444;
  --purple:#7c3aed;--cyan:#0891b2;--orange:#ea580c;
  --side-width:248px;--shadow-sm:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.05);
  --shadow:0 4px 16px rgba(0,0,0,.08);--shadow-lg:0 8px 32px rgba(0,0,0,.14);--radius:var(--r-lg,12px);
  --d1:#2563eb;--d2:#dc2626;--d3:#7c3aed;--d4:#16a34a;--d5:#ea580c;--d6:#d97706;--d7:#0891b2;--d8:#db2777;--d9:#475569;
  font-size:14px;line-height:1.6;color:var(--text);font-family:inherit;
}
#p3 *,#p3 *::before,#p3 *::after{box-sizing:border-box;margin:0;padding:0}
#p3 .app{display:flex;gap:20px;align-items:flex-start;max-width:1320px;margin:0 auto;padding:20px 20px 40px}
#p3 .sidebar{width:var(--side-width);flex:none;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;position:sticky;top:calc(var(--header-h,56px) + 16px);max-height:calc(100vh - var(--header-h,56px) - 32px);overflow-y:auto}
#p3 .main{flex:1;min-width:0;display:flex;flex-direction:column}
#p3 .topbar{display:flex;align-items:center;gap:14px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:10px 18px;margin-bottom:18px}
#p3 .content{flex:1}
@media(max-width:900px){#p3 .app{flex-direction:column;padding:14px}#p3 .sidebar{width:100%;position:static;max-height:none}}
#p3 *,
#p3 *::before,
#p3 *::after{box-sizing: border-box; margin:0; padding:0;}
#p3 .sidebar-logo{padding: 20px 18px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--p50,#e8f5ee) 0%, #f4f9f7 100%);}
#p3 .sidebar-logo .logo-tag{font-size:9px; font-weight:700; letter-spacing:2px;
  color:var(--accent); text-transform:uppercase; margin-bottom:4px; display:block;}
#p3 .sidebar-logo h1{font-size:13px; font-weight:700; color:var(--text); line-height:1.35;}
#p3 .sidebar-logo .sub{font-size:10px; color:var(--text3); margin-top:3px;}
#p3 .nav-section{padding:14px 0 4px;}
#p3 .nav-section-title{font-size:9px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--text3); padding:0 18px 8px;}
#p3 .nav-item{display:flex; align-items:center; gap:10px;
  padding:9px 18px; cursor:pointer;
  font-size:12.5px; color:var(--text2); font-weight:500;
  border-left: 2px solid transparent;
  transition: all 0.18s ease;
  text-decoration:none;}
#p3 .nav-item:hover{color:var(--text); background:var(--bg3);}
#p3 .nav-item.active{color:var(--accent); background:rgba(0,116,75,0.06);
  border-left-color:var(--accent);}
#p3 .nav-dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
#p3 .nav-badge{margin-left:auto; font-size:9px; background:rgba(0,116,75,0.1);
  color:var(--accent); border-radius:99px; padding:2px 6px; font-weight:700;}
#p3 .breadcrumb{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text3);}
#p3 .breadcrumb .active{color:var(--text); font-weight:600;}
#p3 .breadcrumb .link-text{cursor:pointer; color:var(--accent2);}
#p3 .breadcrumb .link-text:hover{text-decoration:underline;}
#p3 .topbar-actions{margin-left:auto; display:flex; gap:8px; align-items:center;}
#p3 .pill-btn{background:var(--bg3); border:1px solid var(--border2);
  color:var(--text2); border-radius:6px; padding:5px 12px;
  font-size:11px; cursor:pointer; font-family:inherit;
  transition:all 0.15s; font-weight:500;}
#p3 .pill-btn:hover{border-color:var(--accent); color:var(--accent); background:var(--p50,#e8f5ee);}
#p3 .pill-btn.primary{background:var(--accent); color:#fff; border-color:var(--accent);}
#p3 .pill-btn.primary:hover{background:var(--p700,#145c2e);}
#p3 .pill-btn.danger{border-color:var(--red2); color:var(--red);}
#p3 .pill-btn.danger:hover{background:#fef2f2;}
#p3 .page{display:none;}
#p3 .page.active{display:block;}
#p3 .section-heading{font-size:18px; font-weight:700; color:var(--text); margin-bottom:6px;}
#p3 .section-sub{font-size:12.5px; color:var(--text2); margin-bottom:20px;}
#p3 .overview-header{background:linear-gradient(135deg, var(--p50,#e8f5ee) 0%, #f4f9f7 60%, #fbf7e6 100%);
  border:1px solid rgba(0,116,75,0.15);
  border-radius:var(--radius); padding:24px 28px;
  margin-bottom:24px; position:relative; overflow:hidden;}
#p3 .overview-header .doc-title{font-size:18px; font-weight:700; margin-bottom:6px;}
#p3 .overview-header .doc-sub{font-size:12px; color:var(--text2); margin-bottom:16px;}
#p3 .overview-header .meta-row{display:flex; gap:12px; flex-wrap:wrap;}
#p3 .meta-chip{background:#fff; border:1px solid var(--border2);
  border-radius:6px; padding:4px 12px; font-size:11px; color:var(--text2);
  box-shadow:var(--shadow-sm);}
#p3 .meta-chip span{color:var(--text); font-weight:600;}
#p3 .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
#p3 .grid-3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px;}
#p3 .grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
#p3 .grid-9{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
#p3 .card{background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px;
  box-shadow:var(--shadow-sm);}
#p3 .card-title{font-size:11px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
  color:var(--text3); margin-bottom:12px; display:flex; align-items:center; gap:8px;}
#p3 .stat-card{background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 18px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
  box-shadow:var(--shadow-sm);}
#p3 .stat-card:hover{border-color:var(--accent2); transform:translateY(-2px); box-shadow:var(--shadow);}
#p3 .stat-label{font-size:11px; color:var(--text3); font-weight:600; letter-spacing:0.3px; margin-bottom:8px;}
#p3 .stat-value{font-size:26px; font-weight:700; color:var(--text); line-height:1;}
#p3 .stat-unit{font-size:12px; color:var(--text2); margin-top:2px;}
#p3 .stat-trend{display:flex; align-items:center; gap:4px; font-size:11px; margin-top:8px;}
#p3 .trend-up{color:var(--green);}
#p3 .trend-down{color:var(--red);}
#p3 .dim-card{background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px;
  cursor:pointer; transition:all 0.2s;
  position:relative; overflow:hidden;
  box-shadow:var(--shadow-sm);}
#p3 .dim-card::before{content:''; position:absolute; top:0; left:0; right:0; height:3px;}
#p3 .dim-card:hover{border-color:var(--border2); transform:translateY(-2px); box-shadow:var(--shadow);}
#p3 .dim-card.d1::before{background:var(--d1);}
#p3 .dim-card.d2::before{background:var(--d2);}
#p3 .dim-card.d3::before{background:var(--d3);}
#p3 .dim-card.d4::before{background:var(--d4);}
#p3 .dim-card.d5::before{background:var(--d5);}
#p3 .dim-card.d6::before{background:var(--d6);}
#p3 .dim-card.d7::before{background:var(--d7);}
#p3 .dim-card.d8::before{background:var(--d8);}
#p3 .dim-card.d9::before{background:var(--d9);}
#p3 .dim-icon{font-size:20px; margin-bottom:8px;}
#p3 .dim-name{font-size:14px; font-weight:700; margin-bottom:4px;}
#p3 .dim-count{font-size:11px; color:var(--text3); margin-bottom:12px;}
#p3 .dim-progress-bar{height:4px; background:var(--bg4); border-radius:99px; overflow:hidden; margin-bottom:6px;}
#p3 .dim-progress-fill{height:100%; border-radius:99px; transition:width 0.6s ease;}
#p3 .dim-progress-pct{font-size:11px; color:var(--text2); display:flex; justify-content:space-between;}
#p3 .progress-row{margin-bottom:12px;}
#p3 .progress-label{display:flex; justify-content:space-between; align-items:center; margin-bottom:5px;}
#p3 .progress-label .name{font-size:12px; color:var(--text2);}
#p3 .progress-label .pct{font-size:12px; font-weight:700;}
#p3 .progress-bar{height:6px; background:var(--bg4); border-radius:99px; overflow:hidden;}
#p3 .progress-fill{height:100%; border-radius:99px;}
#p3 .strategy-block{background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; margin-bottom:12px;
  box-shadow:var(--shadow-sm);}
#p3 .strategy-header{padding:14px 18px; cursor:pointer;
  display:flex; align-items:center; gap:12px;
  transition:background 0.15s;}
#p3 .strategy-header:hover{background:var(--bg3);}
#p3 .strategy-num{width:28px; height:28px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; flex-shrink:0;}
#p3 .strategy-name{font-size:13px; font-weight:600; flex:1;}
#p3 .strategy-badge{font-size:10px; padding:2px 8px; border-radius:99px; font-weight:700;}
#p3 .strategy-toggle{color:var(--text3); font-size:10px; transition:transform 0.2s;}
#p3 .strategy-toggle.open{transform:rotate(90deg);}
#p3 .strategy-body{display:none; border-top:1px solid var(--border); padding:16px 18px; background:var(--bg3);}
#p3 .strategy-body.open{display:block;}
#p3 .data-table{width:100%; border-collapse:collapse; font-size:12px;}
#p3 .data-table th{padding:8px 14px; text-align:left; font-size:10px; font-weight:700;
  letter-spacing:0.5px; text-transform:uppercase; color:var(--text3);
  background:var(--bg3); border-bottom:2px solid var(--border);}
#p3 .data-table td{padding:9px 14px; border-bottom:1px solid var(--border);
  color:var(--text2); vertical-align:top;}
#p3 .data-table tr:last-child td{border-bottom:none;}
#p3 .data-table tr:hover td{background:var(--bg3); color:var(--text);}
#p3 .data-table .highlight{color:var(--text); font-weight:600;}
#p3 .badge{display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:99px; font-size:10px; font-weight:700;
  white-space:nowrap;}
#p3 .badge-green{background:rgba(22,163,74,0.1); color:var(--green); border:1px solid rgba(22,163,74,0.2);}
#p3 .badge-red{background:rgba(220,38,38,0.1); color:var(--red);   border:1px solid rgba(220,38,38,0.2);}
#p3 .badge-yellow{background:rgba(217,119,6,0.1); color:var(--gold);  border:1px solid rgba(217,119,6,0.2);}
#p3 .badge-blue{background:rgba(0,116,75,0.08); color:var(--accent); border:1px solid rgba(0,116,75,0.15);}
#p3 .badge-gray{background:var(--bg3); color:var(--text3); border:1px solid var(--border2);}
#p3 .year-tabs{display:flex; gap:6px; margin-bottom:20px; flex-wrap:wrap;}
#p3 .year-tab{padding:6px 16px; border-radius:6px; font-size:12px; font-weight:600;
  cursor:pointer; background:var(--bg2); border:1px solid var(--border2);
  color:var(--text2); transition:all 0.15s;}
#p3 .year-tab:hover{border-color:var(--accent); color:var(--accent);}
#p3 .year-tab.active{background:var(--accent); border-color:var(--accent); color:#fff;}
#p3 .detail-panel{background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px; margin-bottom:20px;
  box-shadow:var(--shadow-sm);}
#p3 .detail-panel h3{font-size:15px; font-weight:700; margin-bottom:6px;}
#p3 .detail-panel .desc{font-size:12.5px; color:var(--text2); line-height:1.7; margin-bottom:16px;}
#p3 .kr-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}
#p3 .kr-card{background:var(--bg3); border:1px solid var(--border);
  border-radius:8px; padding:12px;}
#p3 .kr-year{font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text3); margin-bottom:4px;}
#p3 .kr-code{font-size:11px; font-weight:700; color:var(--accent); font-family:ui-monospace,Consolas,monospace; margin-bottom:4px;}
#p3 .kr-name{font-size:11px; color:var(--text2); margin-bottom:8px;}
#p3 .kr-result{font-size:12px; font-weight:600; color:var(--text);}
#p3 .kr-target{font-size:10px; color:var(--text3);}
#p3 .agency-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px;}
#p3 .agency-card{background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px; cursor:pointer;
  transition:all 0.2s; box-shadow:var(--shadow-sm);}
#p3 .agency-card:hover{border-color:var(--accent2); transform:translateY(-2px); box-shadow:var(--shadow);}
#p3 .agency-icon{font-size:22px; margin-bottom:8px;}
#p3 .agency-name{font-size:12px; font-weight:700; margin-bottom:3px;}
#p3 .agency-abbr{font-size:10px; color:var(--text3); margin-bottom:8px;}
#p3 .agency-desc{font-size:11px; color:var(--text2); margin-bottom:8px;}
#p3 .agency-tags{display:flex; flex-wrap:wrap; gap:4px;}
#p3 .agency-tag{font-size:9px; padding:1px 6px; border-radius:99px;
  font-weight:700; border:1px solid;}
#p3 .search-input{border:1px solid var(--border2); background:var(--bg2);
  border-radius:8px; padding:8px 14px; font-size:13px;
  font-family:inherit; color:var(--text); outline:none;
  transition:border-color 0.15s; box-shadow:var(--shadow-sm);}
#p3 .search-input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,116,75,0.1);}
#p3 .pp-table td{font-size:12px;}
#p3 .pp-good{color:var(--green); font-weight:600;}
#p3 .pp-mid{color:var(--gold);  font-weight:600;}
#p3 .pp-na{color:var(--text3);}
#p3 .scroll-x{overflow-x:auto;}
#p3 .back-btn{display:inline-flex; align-items:center; gap:6px;
  font-size:12px; color:var(--accent); cursor:pointer;
  margin-bottom:16px; padding:6px 12px;
  background:rgba(0,116,75,0.06); border:1px solid rgba(0,116,75,0.15);
  border-radius:6px; font-weight:600;
  transition:background 0.15s;}
#p3 .back-btn:hover{background:rgba(0,116,75,0.1);}
#p3 .page-footer{font-size:11px; color:var(--text3); text-align:center;
  margin-top:40px; padding:20px 0; border-top:1px solid var(--border);
  line-height:1.8;}
#p3 .modal-overlay{display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.35); z-index:1000;
  align-items:center; justify-content:center;}
#p3 .modal-overlay.open{display:flex;}
#p3 .modal{background:var(--bg2); border-radius:12px;
  padding:28px; width:min(560px,95vw);
  max-height:90vh; overflow-y:auto;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--border);}
#p3 .modal-title{font-size:16px; font-weight:700; margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid var(--border);}
#p3 .form-row{margin-bottom:14px;}
#p3 .form-row label{display:block; font-size:11px; font-weight:700; color:var(--text2); margin-bottom:5px; text-transform:uppercase; letter-spacing:0.3px;}
#p3 .form-row input,
#p3 .form-row select,
#p3 .form-row textarea{width:100%; padding:8px 12px; border:1px solid var(--border2);
  border-radius:6px; font-family:inherit; font-size:13px; color:var(--text);
  background:var(--bg2); outline:none;
  transition:border-color 0.15s;}
#p3 .form-row input:focus,
#p3 .form-row select:focus,
#p3 .form-row textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,116,75,0.08);}
#p3 .form-row textarea{resize:vertical; min-height:80px;}
#p3 .modal-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:20px; padding-top:16px; border-top:1px solid var(--border);}
#p3 .toast{position:fixed; bottom:24px; right:24px;
  background:var(--text); color:#fff;
  padding:10px 18px; border-radius:8px; font-size:13px;
  box-shadow:var(--shadow-lg); z-index:2000;
  transform:translateY(60px); opacity:0;
  transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);}
#p3 .toast.show{transform:translateY(0); opacity:1;}
#p3 .toast.success{background:var(--green);}
#p3 .toast.error{background:var(--red);}
#p3 .radar-grid{stroke:rgba(0,0,0,0.06);}
#p3 .radar-axis{stroke:rgba(0,0,0,0.06);}
#p3 .loading{display:flex; align-items:center; justify-content:center;
  padding:48px; color:var(--text3); flex-direction:column; gap:12px;}
#p3 .spinner{width:28px; height:28px; border:3px solid var(--bg4);
  border-top-color:var(--accent); border-radius:50%;
  animation:spin 0.8s linear infinite;}
@keyframes spin{ to { transform:rotate(360deg); } }
@media(max-width:900px){
#p3 .grid-4{grid-template-columns:1fr 1fr;}
#p3 .agency-grid{grid-template-columns:1fr 1fr;}
#p3 .grid-9{grid-template-columns:1fr 1fr;}
#p3 .kr-grid{grid-template-columns:1fr 1fr;}
#p3 .grid-2,
#p3 .grid-3{grid-template-columns:1fr;}}