/* แผนพัฒนากรุงเทพมหานคร ระยะที่ ๓ — Dashboard (แปลงจาก monitor.bangkok.go.th/bkk20yrs3) */
:root{
  --bg:#f4f6fb;--bg2:#eef0f8;--white:#ffffff;--border:#e2e6f0;--border2:#cdd2e8;
  --text:#1a2040;--text2:#4a5270;--text3:#8892b0;--text4:#c4cadb;
  --blue:#1565c0;--blueh:#1976d2;--blue-bg:#e8f0fd;
  --shadow:0 1px 4px rgba(26,32,64,.07),0 4px 16px rgba(26,32,64,.05);
  --shadow-md:0 4px 20px rgba(26,32,64,.11);
  --shadow-lg:0 8px 40px rgba(26,32,64,.14);
  --r:12px;--r-sm:8px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Sarabun',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.6;}

/* HEADER */
.header{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(26,32,64,.06);}
.hdr-top{padding:14px 32px;display:flex;align-items:center;gap:14px;}
.hdr-logo{width:46px;height:46px;border-radius:11px;background:linear-gradient(135deg,#1565c0,#42a5f5);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;box-shadow:0 2px 8px rgba(21,101,192,.3);}
.hdr-info h1{font-size:16px;font-weight:800;color:var(--text);letter-spacing:-.3px;}
.hdr-info p{font-size:11.5px;color:var(--text3);margin-top:1px;}
.hdr-badges{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;}
.badge{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;}
.badge-b{background:var(--blue-bg);color:var(--blue);}
.badge-g{background:#e8f5e9;color:#2e7d32;}
.badge-o{background:#fff3e0;color:#e65100;}
.nav{border-top:1px solid var(--border);padding:0 32px;display:flex;overflow-x:auto;background:var(--white);}
.nav-btn{padding:11px 16px;font-family:'Sarabun',sans-serif;font-size:13px;font-weight:600;color:var(--text3);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:all .18s;display:flex;align-items:center;gap:5px;}
.nav-btn:hover{color:var(--text2);}
.nav-btn.active{color:var(--blue);border-bottom-color:var(--blue);}

/* CONTENT */
.content{padding:26px 32px;max-width:1500px;margin:0 auto;}
.tab{display:none;}
.tab.active{display:block;animation:fadeIn .22s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* LOADER */
.loader{display:flex;align-items:center;justify-content:center;min-height:200px;color:var(--text3);font-size:13px;gap:10px;}
.spin{width:22px;height:22px;border:2px solid var(--border2);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* SECTION TITLE */
.sec-ttl{font-size:14px;font-weight:800;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.sec-bar{width:3px;height:17px;border-radius:2px;background:var(--blue);flex-shrink:0;}

/* STAT CARDS */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px;margin-bottom:24px;}
.stat-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:17px 18px;box-shadow:var(--shadow);}
.stat-card .num{font-size:30px;font-weight:800;font-family:'IBM Plex Mono',monospace;line-height:1;}
.stat-card .lbl{font-size:11.5px;color:var(--text3);margin-top:4px;font-weight:600;}
.stat-card .ico{font-size:19px;margin-bottom:7px;}

/* VISION */
.vision{background:linear-gradient(135deg,#e8f0fd,#f0e8fd);border:1px solid #c5d6f5;border-radius:var(--r);padding:18px 24px;margin-bottom:24px;}
.vision-lbl{font-size:11px;font-weight:700;color:var(--blue);letter-spacing:.8px;margin-bottom:5px;}
.vision-txt{font-size:17px;font-weight:800;color:var(--text);margin-bottom:6px;line-height:1.4;}
.vision-sub{font-size:13px;color:var(--text2);line-height:1.7;}

/* BUDGET BAND */
.budget-band{background:linear-gradient(135deg,#1565c0,#1e88e5);color:#fff;border-radius:var(--r);padding:15px 22px;margin-bottom:22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;box-shadow:0 4px 16px rgba(21,101,192,.25);}
.bb-i{text-align:center;}
.bb-v{font-size:24px;font-weight:800;font-family:'IBM Plex Mono',monospace;line-height:1;}
.bb-l{font-size:10.5px;opacity:.8;margin-top:2px;}
.bb-div{width:1px;height:36px;background:rgba(255,255,255,.22);}

/* BAR CHART */
.bar-chart{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:18px 22px;margin-bottom:24px;box-shadow:var(--shadow);}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.bar-lbl{width:175px;font-size:11.5px;color:var(--text2);flex-shrink:0;line-height:1.3;}
.bar-track{flex:1;height:24px;background:var(--bg2);border-radius:6px;overflow:hidden;}
.bar-fill{height:100%;border-radius:6px;display:flex;align-items:center;padding-left:9px;font-size:11px;font-weight:700;color:#fff;font-family:'IBM Plex Mono',monospace;min-width:60px;}

/* TIMELINE */
.tl-wrap{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:18px 22px;margin-bottom:24px;overflow-x:auto;box-shadow:var(--shadow);}
.tl-grid{display:grid;grid-template-columns:210px repeat(5,1fr);gap:3px;min-width:580px;}
.tl-hd{padding:6px 8px;background:var(--bg2);border-radius:5px;font-size:11px;font-weight:700;color:var(--text3);text-align:center;}
.tl-lbl{padding:6px 8px;font-size:12px;color:var(--text2);display:flex;align-items:center;}
.tl-on{padding:6px 4px;background:var(--blue-bg);border:1px solid #c5d6f5;border-radius:5px;text-align:center;font-size:10px;font-weight:700;color:var(--blue);}
.tl-off{padding:6px 4px;background:var(--bg);border-radius:5px;text-align:center;font-size:10px;color:var(--text4);}

/* STRATEGY CARDS */
.strat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:14px;margin-bottom:24px;}
.strat-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:all .2s;box-shadow:var(--shadow);}
.strat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--border2);}
.sc-head{padding:15px 18px;display:flex;align-items:flex-start;gap:12px;}
.sc-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;}
.sc-code{font-size:10.5px;font-weight:700;font-family:'IBM Plex Mono',monospace;margin-bottom:3px;}
.sc-name{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.4;}
.sc-stats{display:flex;border-top:1px solid var(--border);}
.sc-stat{flex:1;padding:9px 10px;text-align:center;border-right:1px solid var(--border);}
.sc-stat:last-child{border-right:none;}
.sc-stat .sv{font-size:17px;font-weight:800;font-family:'IBM Plex Mono',monospace;}
.sc-stat .sl{font-size:9.5px;color:var(--text3);margin-top:1px;}
.sc-subs{padding:11px 18px 13px;display:flex;flex-direction:column;gap:5px;}
.sc-sub{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;color:var(--text2);}
.sc-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-top:6px;}
.sc-sdgs{padding:0 18px 12px;display:flex;flex-wrap:wrap;gap:5px;}
.sdg-chip{font-size:10px;font-weight:700;padding:2px 7px;border-radius:7px;background:var(--bg2);color:var(--text3);cursor:default;}
.drill-btn{display:flex;align-items:center;gap:5px;padding:7px 14px;border-radius:7px;font-size:11.5px;font-weight:700;border:none;cursor:pointer;margin:0 18px 13px;font-family:'Sarabun',sans-serif;color:#fff;transition:opacity .15s;}
.drill-btn:hover{opacity:.88;}

/* DRILL OVERLAY */
.drill-ov{display:none;position:fixed;inset:0;background:rgba(20,26,60,.38);z-index:500;backdrop-filter:blur(4px);}
.drill-ov.open{display:flex;align-items:flex-start;justify-content:flex-end;}
.drill-panel{width:min(760px,96vw);height:100vh;background:var(--white);overflow-y:auto;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;animation:slideIn .22s ease;}
@keyframes slideIn{from{transform:translateX(36px);opacity:0}to{transform:translateX(0);opacity:1}}
.dp-head{padding:18px 22px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--white);z-index:10;display:flex;align-items:center;gap:11px;}
.dp-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.dp-info{flex:1;}
.dp-info h2{font-size:14.5px;font-weight:800;color:var(--text);line-height:1.3;}
.dp-info p{font-size:11.5px;color:var(--text3);margin-top:2px;}
.dp-close{width:30px;height:30px;border-radius:7px;border:1px solid var(--border);background:none;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;color:var(--text3);flex-shrink:0;transition:all .15s;}
.dp-close:hover{background:var(--bg);color:var(--text);}
.dp-body{padding:18px 22px;flex:1;}
.dp-sec{margin-bottom:22px;}
.dp-sec-ttl{font-size:10.5px;font-weight:700;color:var(--text3);letter-spacing:.7px;text-transform:uppercase;margin-bottom:9px;padding-bottom:6px;border-bottom:1px solid var(--border);}

/* ACCORDION */
.acc{border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;margin-bottom:7px;}
.acc-head{padding:11px 14px;display:flex;align-items:center;gap:9px;cursor:pointer;background:var(--bg);transition:background .14s;user-select:none;}
.acc-head:hover{background:var(--bg2);}
.acc-head.open{background:var(--blue-bg);}
.acc-code{font-size:10px;font-weight:700;font-family:'IBM Plex Mono',monospace;padding:2px 7px;border-radius:5px;flex-shrink:0;}
.acc-ttl{font-size:12.5px;font-weight:600;color:var(--text);flex:1;}
.acc-ag{font-size:10.5px;color:var(--text3);flex-shrink:0;}
.acc-chevron{font-size:13px;color:var(--text3);transition:transform .18s;flex-shrink:0;}
.acc-head.open .acc-chevron{transform:rotate(90deg);}
.acc-body{display:none;padding:14px;background:var(--white);border-top:1px solid var(--border);}
.acc-body.open{display:block;}

/* PROJECT TABLE */
.proj-tbl{width:100%;border-collapse:collapse;font-size:11.5px;}
.proj-tbl th{padding:7px 9px;text-align:left;background:var(--bg);font-size:10.5px;font-weight:700;color:var(--text3);border-bottom:1px solid var(--border);}
.proj-tbl td{padding:8px 9px;border-bottom:1px solid rgba(226,230,240,.55);vertical-align:top;color:var(--text2);}
.proj-tbl tr:last-child td{border-bottom:none;}
.proj-tbl tr:hover td{background:var(--bg);}
.pn{color:var(--text);font-weight:600;}
.ag-tag{display:inline-flex;align-items:center;padding:2px 7px;border-radius:5px;font-size:10px;font-weight:700;background:var(--bg2);color:var(--text2);}
.bgt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;font-weight:600;color:#2e7d32;}
.yr-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 1px;}
.yr-y{background:var(--blue);}
.yr-n{background:var(--border);}

/* KPI */
.kpi-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.kpi-item{background:var(--bg);border-radius:7px;padding:9px 12px;border-left:3px solid;}
.kpi-name{font-size:12px;font-weight:600;color:var(--text);margin-bottom:3px;}
.kpi-tgt{display:flex;gap:5px;flex-wrap:wrap;}
.kpi-t{font-size:10px;font-family:'IBM Plex Mono',monospace;padding:2px 7px;border-radius:4px;font-weight:600;}
.kpi-2566{background:var(--blue-bg);color:var(--blue);}
.kpi-2570{background:#e8f5e9;color:#2e7d32;}
.kpi-ag{font-size:10px;color:var(--text3);margin-top:3px;}

/* SDG BLOCKS */
.sdg-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:6px;}
.sdg-blk{padding:5px 11px;border-radius:7px;font-size:11px;font-weight:700;color:#fff;cursor:pointer;transition:opacity .15s;}
.sdg-blk:hover{opacity:.82;}

/* MAIN TABLE */
.tbl-wrap{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);margin-bottom:24px;}
.tbl-toolbar{padding:12px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:9px;}
.tbl-title{font-size:13.5px;font-weight:700;color:var(--text);}
.filt-row{display:flex;gap:5px;flex-wrap:wrap;}
.filt-btn{padding:4px 11px;border-radius:18px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid var(--border);background:var(--bg);color:var(--text3);font-family:'Sarabun',sans-serif;transition:all .14s;}
.filt-btn.active,.filt-btn:hover{background:var(--blue);border-color:var(--blue);color:#fff;}
.main-tbl{width:100%;border-collapse:collapse;}
.main-tbl th{padding:9px 13px;text-align:left;font-size:10.5px;font-weight:700;color:var(--text3);background:var(--bg);border-bottom:1px solid var(--border);}
.main-tbl td{padding:9px 13px;font-size:12px;color:var(--text2);border-bottom:1px solid rgba(226,230,240,.45);vertical-align:middle;}
.main-tbl tr:hover td{background:var(--bg);}
.spill{display:inline-flex;padding:3px 8px;border-radius:7px;font-size:10px;font-weight:700;}
.lpill{display:inline-block;padding:2px 7px;border-radius:6px;font-size:10px;font-weight:700;}

/* AGENCY GRID */
.ag-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-bottom:24px;}
.ag-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);}
.ag-hdr{display:flex;align-items:center;gap:9px;margin-bottom:11px;}
.ag-abbr{font-size:11px;font-weight:700;font-family:'IBM Plex Mono',monospace;padding:3px 8px;border-radius:6px;background:var(--blue-bg);color:var(--blue);}
.ag-nm{font-size:12.5px;font-weight:700;color:var(--text);}
.ag-bar-t{height:4px;border-radius:3px;background:var(--bg2);overflow:hidden;margin-bottom:8px;}
.ag-bar-f{height:100%;border-radius:3px;background:linear-gradient(90deg,#1565c0,#42a5f5);}
.ag-foot{display:flex;justify-content:space-between;align-items:center;}
.ag-strs{display:flex;gap:4px;flex-wrap:wrap;}
.ag-cnt{font-size:11px;color:var(--text3);font-family:'IBM Plex Mono',monospace;}

/* AGENCY CARD — clickable */
.ag-card{cursor:pointer;transition:all .2s;}
.ag-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--blue);}
.ag-drill-hint{font-size:10px;color:var(--blue);margin-top:7px;text-align:right;}

/* AGENCY DRILL PANEL */
.ag-drill-tabs{display:flex;gap:2px;border-bottom:2px solid var(--border);margin-bottom:16px;}
.ag-drill-tab{padding:9px 16px;font-family:'Sarabun',sans-serif;font-size:12.5px;font-weight:700;color:var(--text3);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .15s;}
.ag-drill-tab:hover{color:var(--text2);}
.ag-drill-tab.active{color:var(--blue);border-bottom-color:var(--blue);}
.ag-tab-badge{font-size:10px;padding:1px 6px;border-radius:10px;background:var(--bg2);color:var(--text3);font-family:'IBM Plex Mono',monospace;}
.ag-drill-tab.active .ag-tab-badge{background:var(--blue-bg);color:var(--blue);}
.ag-tab-pane{display:none;animation:fadeIn .2s ease;}
.ag-tab-pane.active{display:block;}
.ag-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px;}
.ag-stat-box{background:var(--bg);border-radius:10px;padding:13px 15px;text-align:center;border:1px solid var(--border);}
.ag-stat-box .asn{font-size:28px;font-weight:800;font-family:'IBM Plex Mono',monospace;line-height:1;}
.ag-stat-box .asl{font-size:11px;color:var(--text3);margin-top:4px;font-weight:600;}
.strat-row-hdr{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;margin-bottom:7px;}
.sub-ref-card{background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:11px 14px;margin-bottom:8px;display:flex;align-items:center;gap:10px;}
.sub-ref-info{flex:1;}
.sub-ref-info .sr-name{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.3;}
.sub-ref-info .sr-meta{font-size:10.5px;color:var(--text3);margin-top:2px;}
.empty-state{text-align:center;padding:32px 20px;color:var(--text3);}
.empty-state .ei{font-size:32px;margin-bottom:9px;}
.empty-state p{font-size:13px;}

/* SDG GRID */
.sdg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:24px;}
.sdg-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:14px;box-shadow:var(--shadow);cursor:pointer;transition:all .18s;}
.sdg-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.sdg-top{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
.sdg-num{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;flex-shrink:0;font-family:'IBM Plex Mono',monospace;}
.sdg-ttl{font-size:12.5px;font-weight:700;color:var(--text);line-height:1.3;}
.sdg-bar{height:4px;border-radius:2px;background:var(--bg2);overflow:hidden;margin-bottom:6px;}
.sdg-bar-f{height:100%;border-radius:2px;}
.sdg-strs{display:flex;gap:4px;flex-wrap:wrap;}
.sdg-sc{font-size:10.5px;color:var(--text3);margin-top:5px;text-align:right;}
.sdg-drill-hint{font-size:10px;color:var(--blue);margin-top:6px;text-align:right;}

/* SDG Drill Panel extra styles */
.sdg-strat-section{border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;margin-bottom:12px;}
.sdg-strat-header{padding:12px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);}
.sdg-strat-body{padding:14px 16px;}

/* ANALYSIS */
.analysis-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px;}
.ins-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);}
.ins-ttl{font-size:13px;font-weight:800;color:var(--text);margin-bottom:11px;}
.ins-item{display:flex;gap:8px;margin-bottom:8px;font-size:12.5px;color:var(--text2);line-height:1.6;}
.ins-dot{flex-shrink:0;margin-top:6px;width:5px;height:5px;border-radius:50%;}

/* SEARCH */
.search-inp{padding:7px 13px;border:1px solid var(--border);border-radius:7px;font-family:'Sarabun',sans-serif;font-size:12.5px;color:var(--text);background:var(--bg);width:220px;outline:none;transition:border .14s;}
.search-inp:focus{border-color:var(--blue);background:#fff;}

/* Matrix */
.ck-y{color:#2e7d32;font-size:13px;}
.ck-n{color:var(--border2);font-size:13px;}

@media(max-width:820px){
  .hdr-top{padding:10px 16px;flex-wrap:wrap;}
  .nav{padding:0 16px;}
  .content{padding:14px 16px;}
  .strat-grid{grid-template-columns:1fr;}
  .analysis-grid{grid-template-columns:1fr;}
  .hdr-badges{display:none;}
}