/* gender-plans-sdg.css — แดชบอร์ดแผนปฏิบัติการฯ: แถบเครื่องมือ TH|EN, สัญลักษณ์ SDG, ตารางวิเคราะห์ และสำรวจโครงการ (js/gender-plans-sdg.js) */
.gp-app .gp-crumb { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gp-app .gp-crumb-path { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gp-app .gp-tools { display: flex; align-items: center; gap: 10px; }
.gp-app .gp-tool { font-size: 13px; font-weight: 600; color: var(--accent1); text-decoration: none; }
.gp-app .gp-tool:hover { text-decoration: underline; }
.gp-app .gp-lang { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface); }
.gp-app .gp-lang button { border: 0; background: none; padding: 5px 11px; font: 700 12px "IBM Plex Mono", monospace; color: var(--text-muted); cursor: pointer; }
.gp-app .gp-lang button[aria-pressed="true"] { background: var(--text); color: #fff; }

/* สัญลักษณ์ SDG (ไอคอน CSS ตามสีทางการ: หมายเลข + ชื่อย่อ) */
.gp-app .gps-icon { --sdg: #888; display: inline-flex; flex-direction: column; justify-content: space-between; width: 64px; height: 64px; padding: 5px 6px; background: var(--sdg); color: #fff; border-radius: 4px; flex-shrink: 0; overflow: hidden; vertical-align: middle; }
.gp-app .gps-icon b { font: 800 22px/1 "IBM Plex Mono", monospace; }
.gp-app .gps-icon small { font: 700 7.5px/1.15 "Sarabun", sans-serif; letter-spacing: .02em; }
.gp-app .gps-icon.lg { width: 96px; height: 96px; padding: 8px 9px; }
.gp-app .gps-icon.lg b { font-size: 34px; }
.gp-app .gps-icon.lg small { font-size: 10px; }
.gp-app .gps-icon.sm { width: 38px; height: 38px; padding: 3px 4px; }
.gp-app .gps-icon.sm b { font-size: 14px; }
.gp-app .gps-icon.sm small { font-size: 5px; }
.gp-app .gps-chip { --sdg: #888; display: inline-flex; align-items: center; padding: 1px 7px; border: 1px solid var(--sdg); color: var(--sdg); background: color-mix(in srgb, var(--sdg) 9%, white); font: 700 11.5px "IBM Plex Mono", monospace; border-radius: 4px; white-space: nowrap; }

.gp-app .gps { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.gp-app .gps-lead { display: flex; gap: 16px; align-items: flex-start; }
.gp-app .gps-k { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.gp-app .gps-k2 { margin: 20px 0 10px; padding-top: 14px; border-top: 1px dashed var(--border); }
.gp-app .gps-lead h4 { margin: 2px 0 10px; font-size: 17px; color: var(--text); }
.gp-app .gps-targets { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-app .gps-t { --sdg: #FF3A21; display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 9px; font-size: 12px; color: var(--text); background: color-mix(in srgb, var(--sdg) 8%, white); border-left: 3px solid var(--sdg); border-radius: 3px; }
.gp-app .gps-t b { font-family: "IBM Plex Mono", monospace; color: var(--sdg); }
.gp-app .gps-goals { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.gp-app .gps-goal { display: flex; gap: 8px; align-items: center; }
.gp-app .gps-goal b { display: block; font: 700 20px "IBM Plex Mono", monospace; color: var(--text); }
.gp-app .gps-goal span { font-size: 11.5px; color: var(--text-muted); }
.gp-app .gps-matrix-wrap { overflow-x: auto; }
.gp-app .gps-matrix { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13px; }
.gp-app .gps-matrix th { text-align: left; font-size: 12px; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.gp-app .gps-matrix th.c { text-align: center; border-bottom: 3px solid var(--pc); }
.gp-app .gps-matrix td { padding: 7px 10px; border-bottom: 1px solid var(--surface3); }
.gp-app .gps-matrix td.c { text-align: center; width: 150px; }
.gp-app .gps-tname { color: var(--text); }
.gp-app .gps-dot { --sdg: #888; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 50%; background: var(--sdg); color: #fff; font: 700 12px "IBM Plex Mono", monospace; }
.gp-app .gps-none { color: var(--surface3); font-weight: 700; }
.gp-app .gps-note { font-size: 12px; color: var(--text-muted); margin: 12px 0 0; line-height: 1.6; }

/* สำรวจโครงการ */
.gp-app .gpx-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.gp-app .gpx-search { flex: 1 1 240px; min-width: 0; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font: 14px "Sarabun", sans-serif; color: var(--text); }
.gp-app .gpx-search:focus { outline: 2px solid var(--accent2); outline-offset: -1px; }
.gp-app .gpx-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.gp-app .gpx-seg button { border: 0; background: none; padding: 8px 13px; font: 600 13px "Sarabun", sans-serif; color: var(--text-muted); cursor: pointer; }
.gp-app .gpx-seg button + button { border-left: 1px solid var(--border); }
.gp-app .gpx-seg button[aria-pressed="true"] { background: var(--pc, var(--text)); color: #fff; }
.gp-app .gpx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.gp-app .gpx-card { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--pc); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.gp-app .gpx-plan { font-size: 11.5px; font-weight: 700; color: var(--pc); text-transform: uppercase; letter-spacing: .03em; }
.gp-app .gpx-card h4, .gp-app .gpx-li b { margin: 0; font-size: 15px; color: var(--text); line-height: 1.45; }
.gp-app .gpx-depts { display: flex; flex-wrap: wrap; gap: 4px; }
.gp-app .gpx-dept { font-size: 11.5px; padding: 1px 8px; border-radius: 10px; background: var(--surface2); color: var(--text-muted); }
.gp-app .gpx-sdg, .gp-app .gpx-li-s { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.gp-app .gpx-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-left: 4px; }
.gp-app .gpx-kpi { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 4px; }
.gp-app .gpx-kpi th { font-size: 11px; color: var(--text-muted); text-align: center; padding: 5px 4px; border-bottom: 1px solid var(--border); }
.gp-app .gpx-kpi th:first-child { text-align: left; }
.gp-app .gpx-kpi td { padding: 6px 4px; border-bottom: 1px solid var(--surface3); vertical-align: top; }
.gp-app .gpx-kpi td + td { text-align: center; white-space: nowrap; width: 54px; }
.gp-app .gpx-kpi small, .gp-app .gpx-dash { color: var(--text-muted); }
.gp-app .gpx-list { display: flex; flex-direction: column; gap: 8px; }
.gp-app .gpx-li { display: grid; grid-template-columns: 1fr 110px 300px; gap: 14px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-left: 5px solid var(--pc); border-radius: 10px; padding: 12px 16px; }
.gp-app .gpx-li-main { display: flex; flex-direction: column; gap: 4px; }
.gp-app .gpx-li-k { font-size: 12.5px; color: var(--text-muted); text-align: center; }
.gp-app .gpx-table { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.gp-app .gpx-table table { width: 100%; min-width: 1100px; border-collapse: collapse; font-size: 12.5px; }
.gp-app .gpx-table th { text-align: left; font-size: 11.5px; color: var(--text-muted); background: var(--surface2); padding: 9px 10px; position: sticky; top: 0; }
.gp-app .gpx-table td { padding: 8px 10px; border-top: 1px solid var(--surface3); vertical-align: top; }
.gp-app .gpx-table tr.cont td { border-top-style: dashed; }
.gp-app .gpx-table .c { text-align: center; white-space: nowrap; }
.gp-app .gpx-table .no { color: var(--text-muted); font-family: "IBM Plex Mono", monospace; }
.gp-app .gpx-pdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--pc); margin-right: 5px; }
.gp-app .gpx-empty { padding: 20px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border); border-radius: 10px; }
@media (max-width: 860px) {
  .gp-app .gpx-li { grid-template-columns: 1fr; }
  .gp-app .gpx-li-k { text-align: left; }
  .gp-app .gps-lead { flex-direction: column; }
}