:root{
  --navy:#102a43;--navy-2:#173f5f;--gold:#d7a928;--gold-soft:#f6ecd0;
  --bg:#f4f7fb;--panel:#ffffff;--text:#172033;--muted:#64748b;--line:#dfe7f0;
  --green:#16835b;--green-soft:#e8f7f0;--red:#c73b45;--red-soft:#fff0f1;
  --amber:#b7791f;--amber-soft:#fff7e6;--blue:#2563a6;--blue-soft:#edf5ff;
  --shadow:0 14px 40px rgba(16,42,67,.09);--radius:18px;
  font-family:"Noto Sans Thai","Tahoma","Segoe UI",sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text)}button,input,select{font:inherit}button,a{transition:.18s ease}.hidden{display:none!important}.muted{color:var(--muted);font-size:.86rem}.mobile-only{display:none}
.app-shell{min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:284px;background:linear-gradient(165deg,#0d2439 0%,#173f5f 65%,#102a43 100%);color:#fff;padding:26px 20px;display:flex;flex-direction:column;z-index:50;box-shadow:10px 0 34px rgba(16,42,67,.12)}
.brand{display:flex;gap:14px;align-items:center;padding:2px 4px 24px;border-bottom:1px solid rgba(255,255,255,.12)}.brand-mark{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#f5d56a,#d7a928 62%,#8b6411);display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.25);border:2px solid rgba(255,255,255,.55)}.brand-mark span{font-weight:900;letter-spacing:.5px;color:#102a43;font-size:1.02rem}.brand-kicker{font-size:.61rem;letter-spacing:1.7px;color:#f0cf71}.brand-title{font-size:1.25rem;font-weight:800;line-height:1.2}.brand-subtitle{font-size:.72rem;color:#dbe8f2;margin-top:3px;line-height:1.35}
.side-nav{display:flex;flex-direction:column;gap:7px;margin:22px 0}.nav-item{border:0;background:transparent;color:#dce9f3;display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:8px;text-align:left;padding:11px 12px;border-radius:12px;cursor:pointer}.nav-item:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateX(2px)}.nav-item.active{background:linear-gradient(90deg,rgba(215,169,40,.25),rgba(255,255,255,.09));box-shadow:inset 3px 0 0 var(--gold);color:#fff}.nav-icon{width:31px;height:31px;border-radius:9px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-size:.76rem;font-weight:800}.nav-item.active .nav-icon{background:var(--gold);color:var(--navy)}.nav-count{background:rgba(255,255,255,.1);border-radius:999px;padding:2px 7px;font-size:.7rem;color:#fff}.sidebar-card{margin-top:auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px}.sidebar-card-title{font-weight:800;font-size:.8rem;margin-bottom:9px}.source-status{font-size:.78rem;display:flex;align-items:center;gap:7px}.source-detail{font-size:.68rem;color:#c9d8e5;margin:6px 0 12px;line-height:1.5}.pulse{width:8px;height:8px;border-radius:50%;background:#f5c451;box-shadow:0 0 0 5px rgba(245,196,81,.13)}.pulse.ok{background:#49d29d;box-shadow:0 0 0 5px rgba(73,210,157,.14)}.pulse.error{background:#ff7c84;box-shadow:0 0 0 5px rgba(255,124,132,.14)}.sidebar-footer{color:#96adbf;font-size:.64rem;text-align:center;margin-top:14px;line-height:1.5}
.main{margin-left:284px;min-height:100vh;padding:28px 30px 48px}.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:22px}.eyebrow{font-size:.72rem;letter-spacing:1.25px;color:var(--blue);font-weight:800}.topbar h1{font-size:1.72rem;margin:5px 0 4px;color:var(--navy);line-height:1.2}.topbar p{margin:0;color:var(--muted);font-size:.88rem}.top-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}.year-control{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.78rem;background:#fff;border:1px solid var(--line);border-radius:11px;padding:7px 10px}.year-control select{border:0;background:transparent;color:var(--navy);font-weight:800;outline:0}.primary-btn,.secondary-btn,.ghost-btn,.icon-btn{border:0;border-radius:10px;padding:9px 13px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem}.primary-btn{background:var(--navy);color:#fff}.primary-btn:hover{background:var(--navy-2);transform:translateY(-1px)}.secondary-btn{background:#fff;color:var(--navy);border:1px solid var(--line)}.secondary-btn:hover,.ghost-btn:hover{border-color:#b9c9d7;background:#f8fafc}.ghost-btn{background:transparent;color:inherit;border:1px solid rgba(255,255,255,.22)}.ghost-btn.full{width:100%}.filter-panel .ghost-btn{color:var(--navy);border-color:var(--line)}
.loading-panel,.error-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;display:flex;align-items:center;gap:16px;box-shadow:var(--shadow)}.loading-panel span,.error-panel span{display:block;color:var(--muted);font-size:.82rem;margin-top:3px}.loader{width:34px;height:34px;border:4px solid #dbe7f0;border-top-color:var(--gold);border-radius:50%;animation:spin .85s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-panel{border-color:#f3c7cb;background:#fff7f8;color:var(--red)}
.metric-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:16px}.metric-card{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:17px 17px 15px;box-shadow:0 7px 22px rgba(16,42,67,.05)}.metric-card:after{content:"";position:absolute;right:-18px;top:-18px;width:66px;height:66px;border-radius:50%;background:var(--card-soft,#edf5ff)}.metric-label{font-size:.73rem;color:var(--muted);font-weight:700}.metric-value{font-size:1.82rem;font-weight:900;color:var(--card-color,var(--navy));line-height:1.1;margin:8px 0 2px}.metric-note{font-size:.7rem;color:var(--muted)}.metric-card.total{--card-color:var(--navy);--card-soft:#e8eef4}.metric-card.good{--card-color:var(--green);--card-soft:var(--green-soft)}.metric-card.bad{--card-color:var(--red);--card-soft:var(--red-soft)}.metric-card.wait{--card-color:var(--amber);--card-soft:var(--amber-soft)}.metric-card.rate{--card-color:var(--blue);--card-soft:var(--blue-soft)}
.dashboard-grid{display:grid;gap:16px}.two-cols{grid-template-columns:minmax(0,1.45fr) minmax(310px,.75fr)}.owner-gap{grid-template-columns:minmax(0,1.35fr) minmax(350px,.65fr);margin-top:16px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 8px 24px rgba(16,42,67,.05)}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}.panel-kicker{font-size:.62rem;letter-spacing:1.45px;font-weight:900;color:var(--gold)}.panel h2{font-size:1.03rem;margin:3px 0 0;color:var(--navy)}.legend,.table-legend{font-size:.7rem;color:var(--muted);display:flex;gap:12px;align-items:center}.dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:4px}.dot.achieved{background:var(--green)}
.annual-chart{height:260px;display:flex;align-items:flex-end;gap:18px;padding:20px 10px 5px;border-bottom:1px solid var(--line);background-image:linear-gradient(to top,rgba(223,231,240,.65) 1px,transparent 1px);background-size:100% 25%}.bar-item{height:100%;display:flex;flex:1;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;min-width:55px}.bar-value{font-weight:900;color:var(--navy);font-size:.82rem}.bar-track{width:min(54px,72%);height:190px;background:#edf2f6;border-radius:10px 10px 3px 3px;display:flex;align-items:flex-end;overflow:hidden}.bar-fill{width:100%;background:linear-gradient(180deg,#e4c25e,var(--gold));border-radius:10px 10px 3px 3px;min-height:3px;position:relative}.bar-fill.current{background:linear-gradient(180deg,#2c76b5,var(--navy-2))}.bar-year{font-size:.72rem;color:var(--muted);font-weight:700}.bar-count{font-size:.62rem;color:#8796a8}
.donut-wrap{display:flex;justify-content:center;align-items:center;padding:8px}.donut{width:184px;height:184px;border-radius:50%;position:relative;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(16,42,67,.04)}.donut:before{content:"";position:absolute;width:118px;height:118px;background:#fff;border-radius:50%;box-shadow:0 4px 18px rgba(16,42,67,.08)}.donut-center{position:relative;text-align:center}.donut-center strong{display:block;font-size:1.75rem;color:var(--navy)}.donut-center span{font-size:.7rem;color:var(--muted)}.status-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}.status-pill{border-radius:10px;padding:9px;text-align:center;background:#f7f9fc}.status-pill strong{display:block;font-size:1rem}.status-pill span{font-size:.65rem;color:var(--muted)}.status-pill.good strong{color:var(--green)}.status-pill.bad strong{color:var(--red)}.status-pill.wait strong{color:var(--amber)}
.category-panel{margin-top:16px}.category-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.category-card{border:1px solid var(--line);border-radius:14px;padding:14px;background:#fbfcfe;cursor:pointer;text-align:left}.category-card:hover{background:#fff;box-shadow:0 8px 24px rgba(16,42,67,.08);transform:translateY(-2px)}.category-code{display:inline-flex;background:var(--navy);color:#fff;border-radius:8px;padding:5px 8px;font-weight:900;font-size:.77rem}.category-name{font-size:.75rem;line-height:1.45;min-height:44px;margin:9px 0;color:var(--text)}.category-stats{display:flex;justify-content:space-between;font-size:.68rem;color:var(--muted)}.progress{height:7px;background:#e9eef3;border-radius:99px;overflow:hidden;margin:8px 0 6px}.progress>i{height:100%;display:block;border-radius:99px;background:linear-gradient(90deg,var(--green),#4cb887)}.category-rate{font-weight:900;color:var(--green)}
.table-scroll{overflow:auto}.table-scroll.compact{max-height:450px}.table-scroll.wide{max-height:calc(100vh - 245px);border:1px solid var(--line);border-radius:12px}table{border-collapse:collapse;width:100%}.owner-table th,.owner-table td{padding:9px 8px;border-bottom:1px solid #edf1f5;font-size:.72rem;text-align:center}.owner-table th{position:sticky;top:0;background:#f8fafc;color:var(--muted);z-index:2}.owner-table th:first-child,.owner-table td:first-child{text-align:left}.mini-progress{width:80px;height:6px;background:#e9eef3;border-radius:99px;overflow:hidden;margin:auto}.mini-progress i{display:block;height:100%;background:var(--green);border-radius:99px}.rate-good{color:var(--green);font-weight:800}.rate-mid{color:var(--amber);font-weight:800}.rate-low{color:var(--red);font-weight:800}
.attention-list{display:flex;flex-direction:column;gap:9px;max-height:450px;overflow:auto}.attention-item{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;border:1px solid #f0d6d9;background:#fffafb;border-radius:12px;padding:10px}.attention-rank{width:27px;height:27px;border-radius:8px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;font-size:.7rem;font-weight:900}.attention-code{font-size:.66rem;color:var(--red);font-weight:900}.attention-name{font-size:.74rem;line-height:1.4;margin-top:2px}.attention-owner{font-size:.62rem;color:var(--muted);margin-top:4px}.attention-gap{text-align:right}.attention-gap strong{display:block;color:var(--red);font-size:.8rem}.attention-gap span{font-size:.6rem;color:var(--muted)}
.filter-panel{padding:14px 16px;margin-bottom:14px}.filter-row{display:flex;gap:9px;align-items:end;flex-wrap:wrap}.filter-row label{display:flex;flex-direction:column;gap:4px;font-size:.65rem;color:var(--muted);font-weight:700}.filter-row select,.filter-row input{border:1px solid var(--line);border-radius:9px;background:#fff;padding:8px 9px;outline:0;color:var(--text)}.filter-row select:focus,.filter-row input:focus{border-color:#7da8ca;box-shadow:0 0 0 3px rgba(37,99,166,.1)}.search-box{position:relative;flex:1;min-width:280px}.search-box>span{position:absolute;left:10px;bottom:8px;color:var(--muted);font-size:1rem}.search-box input{width:100%;padding-left:31px}.filter-summary{font-size:.7rem;color:var(--muted);margin-top:10px}.detail-panel{padding:18px}.kpi-table{min-width:1640px}.kpi-table th,.kpi-table td{border-right:1px solid #e8edf2;border-bottom:1px solid #e7edf3;padding:7px 8px;font-size:.68rem;vertical-align:top}.kpi-table thead th{position:sticky;background:#f4f7fa;color:#526476;z-index:4;text-align:center;font-weight:800}.kpi-table thead tr:first-child th{top:0}.kpi-table thead tr:nth-child(2) th{top:31px}.kpi-table th.sticky-col,.kpi-table td.sticky-col{position:sticky;left:0;z-index:3;background:#fff;min-width:345px;max-width:345px}.kpi-table thead th.sticky-col{z-index:6;background:#edf3f8}.kpi-table tbody tr:hover td{background:#f9fbfd}.kpi-table tbody tr:hover td.sticky-col{background:#f9fbfd}.kpi-table .group-row td{background:#eaf1f7!important;color:var(--navy);font-weight:900;position:relative;padding:9px 12px}.kpi-code{font-size:.65rem;color:var(--blue);font-weight:900;margin-bottom:3px}.kpi-name{font-size:.72rem;line-height:1.45;color:#24344a}.formula-btn{border:0;background:var(--blue-soft);color:var(--blue);border-radius:7px;padding:5px 7px;font-size:.62rem;cursor:pointer}.type-chip{display:inline-block;padding:3px 6px;border-radius:99px;background:#eef2f6;color:#4b6072;white-space:nowrap;font-size:.59rem}.value-cell{text-align:right;white-space:nowrap}.value-cell.result.good{background:#f1fbf6;color:var(--green);font-weight:800}.value-cell.result.bad{background:#fff5f6;color:var(--red);font-weight:800}.value-cell.result.wait{color:#9aa6b2}.result-arrow{font-size:.55rem;margin-left:3px}.owner-cell{min-width:115px}.year-current{background:#fff9e8!important}.table-legend i{font-style:normal;font-weight:900}.trend-up{color:var(--green)}.trend-down{color:var(--red)}.trend-wait{color:var(--amber)}
.detail-modal{width:min(850px,92vw);border:0;border-radius:18px;padding:25px;box-shadow:0 25px 80px rgba(8,25,40,.35);color:var(--text)}.detail-modal::backdrop{background:rgba(8,25,40,.6);backdrop-filter:blur(3px)}.modal-close{position:absolute;right:14px;top:12px;border:0;background:#eef2f6;width:33px;height:33px;border-radius:50%;cursor:pointer;font-size:1.2rem}.modal-code{color:var(--blue);font-weight:900}.detail-modal h2{font-size:1.22rem;line-height:1.45;color:var(--navy);padding-right:35px}.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.modal-grid>div,.modal-year-grid>div{background:#f6f8fb;border:1px solid var(--line);border-radius:10px;padding:10px}.modal-grid span,.modal-year-grid span{display:block;color:var(--muted);font-size:.64rem}.modal-grid strong{font-size:.78rem}.modal-section{margin-top:15px}.modal-section h3{font-size:.78rem;color:var(--navy);margin:0 0 5px}.modal-section p{margin:0;background:#fbfcfd;border:1px solid var(--line);border-radius:10px;padding:11px;font-size:.78rem;line-height:1.6;white-space:pre-wrap}.modal-year-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:15px}.modal-year-grid h4{margin:0 0 7px;color:var(--navy)}.modal-year-grid strong{display:block;font-size:.72rem;margin-top:4px}
@media(max-width:1300px){.metric-grid{grid-template-columns:repeat(3,1fr)}.category-cards{grid-template-columns:repeat(3,1fr)}.two-cols,.owner-gap{grid-template-columns:1fr}.topbar{flex-direction:column}.top-actions{justify-content:flex-start}}
@media(max-width:900px){.mobile-only{display:inline-flex}.sidebar{transform:translateX(-102%);transition:.25s}.sidebar.open{transform:translateX(0)}.main{margin-left:0;padding:20px}.topbar{padding-left:0}.top-actions{width:100%}.metric-grid{grid-template-columns:repeat(2,1fr)}.category-cards{grid-template-columns:repeat(2,1fr)}.annual-chart{gap:9px}.modal-year-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.main{padding:14px}.topbar h1{font-size:1.35rem}.top-actions{align-items:stretch}.top-actions>*{flex:1}.metric-grid{grid-template-columns:1fr 1fr;gap:9px}.metric-card{padding:13px}.metric-value{font-size:1.45rem}.category-cards{grid-template-columns:1fr}.status-legend{grid-template-columns:1fr}.filter-row>*{width:100%}.search-box{min-width:100%}.modal-grid{grid-template-columns:1fr}.modal-year-grid{grid-template-columns:1fr 1fr}}
@media print{.sidebar,.top-actions,.filter-panel,.mobile-only{display:none!important}.main{margin:0;padding:0}.panel,.metric-card{box-shadow:none;break-inside:avoid}.table-scroll{max-height:none!important;overflow:visible}.kpi-table{min-width:100%;font-size:8px}.detail-panel{display:none}.topbar{margin-bottom:12px}.metric-grid{grid-template-columns:repeat(5,1fr)}}

/* ===== ARU Red–Yellow identity theme ===== */
:root{
  --navy:#8a1538;--navy-2:#5c0f25;--gold:#f4c542;--gold-soft:#fff3bf;
  --bg:#fff9ef;--panel:#ffffff;--text:#3c2329;--muted:#765e64;--line:#ead8d2;
  --green:#16835b;--green-soft:#e8f7f0;--red:#c0392b;--red-soft:#fff0ed;
  --amber:#bd7d00;--amber-soft:#fff5d8;--blue:#9d1d36;--blue-soft:#fbe9ed;
  --shadow:0 14px 40px rgba(138,21,56,.10);--radius:18px;
}
body{background:linear-gradient(180deg,#fff8e7 0,#fffdf8 260px,var(--bg) 100%)}
.sidebar{background:linear-gradient(165deg,#5c0f25 0%,#8a1538 58%,#6f112d 100%);box-shadow:10px 0 34px rgba(92,15,37,.20)}
.brand{border-bottom-color:rgba(244,197,66,.32)}
.brand-mark{background:radial-gradient(circle at 35% 25%,#fff8cb,#f4c542 58%,#c79815);border-color:rgba(255,255,255,.72);box-shadow:0 7px 20px rgba(54,5,18,.35)}
.brand-mark span{color:#74112d}.brand-kicker{color:#ffe47b}.brand-subtitle{color:#ffeef2}
.nav-item{color:#ffeef3}.nav-item:hover{background:rgba(244,197,66,.13)}
.nav-item.active{background:linear-gradient(90deg,rgba(244,197,66,.30),rgba(255,255,255,.08));box-shadow:inset 4px 0 0 var(--gold)}
.nav-item.active .nav-icon{background:var(--gold);color:#6b102a}.nav-count{background:rgba(244,197,66,.18)}
.sidebar-card{background:rgba(255,255,255,.09);border-color:rgba(244,197,66,.25)}
.source-detail{color:#f6dfe5}.sidebar-footer{color:#f2cbd4;border-top:1px solid rgba(244,197,66,.18);padding-top:13px}
.main{position:relative}.main:before{content:"";position:fixed;left:284px;right:0;top:0;height:7px;background:linear-gradient(90deg,var(--gold) 0 44%,var(--navy) 44% 100%);z-index:60}
.topbar{padding-top:5px}.eyebrow{color:var(--navy)}.topbar h1{color:var(--navy)}
.primary-btn{background:linear-gradient(135deg,var(--navy),#ad2746);box-shadow:0 7px 16px rgba(138,21,56,.18)}.primary-btn:hover{background:linear-gradient(135deg,var(--navy-2),var(--navy))}
.secondary-btn{color:var(--navy);border-color:#dfc8c2}.secondary-btn:hover,.filter-panel .ghost-btn:hover{border-color:#c99a91;background:#fff8ed}
.year-control{border-color:#e5cfc8}.year-control select{color:var(--navy)}
.panel,.metric-card{border-color:#ecdcd5}.panel-kicker{color:var(--navy)}
.metric-card{border-top:3px solid var(--gold)}.metric-card.total{--card-color:var(--navy);--card-soft:#f6e7eb}.metric-card.rate{--card-color:var(--navy);--card-soft:#fbe9ed}
.annual-chart .bar-fill{background:linear-gradient(180deg,#f8dc68,var(--gold))}.annual-chart .bar-fill.current{background:linear-gradient(180deg,#bd3654,var(--navy))}
.category-card{border-color:#ead5cf}.category-card:hover{border-color:var(--gold);box-shadow:0 12px 24px rgba(138,21,56,.10)}
.category-code{background:var(--gold-soft);color:var(--navy)}.category-rate{color:var(--navy)}.progress i,.mini-progress i{background:linear-gradient(90deg,var(--gold),var(--navy))}
.owner-table th,.kpi-table thead th{background:#fff5df;color:#6f2939}.kpi-table thead th.sticky-col{background:#ffefc8}.kpi-table .group-row td{background:#fbe9ed!important;color:var(--navy)}
.kpi-code,.modal-code{color:var(--navy)}.formula-btn{background:var(--gold-soft);color:var(--navy)}
.filter-row select:focus,.filter-row input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(138,21,56,.10)}
.year-current{background:#fff3c9!important}
.detail-modal::backdrop{background:rgba(61,8,24,.66)}

/* ===== Category comparison graph ===== */
.category-compare-panel{margin-top:16px}
.category-chart-legend,.indicator-legend{display:flex;gap:18px;flex-wrap:wrap;font-size:.72rem;color:var(--muted);margin:-4px 0 14px}
.category-chart-legend span,.indicator-legend span{display:flex;align-items:center;gap:6px}
.category-chart-legend i,.indicator-legend i{display:inline-block;width:20px;height:6px;border-radius:99px}
.category-chart-legend i.achieved{background:var(--green)}.category-chart-legend i.failed{background:var(--red)}.category-chart-legend i.waiting{background:var(--amber)}
.category-comparison-chart{display:flex;flex-direction:column;gap:9px}
.category-compare-row{display:grid;grid-template-columns:minmax(230px,1.05fr) minmax(320px,1.8fr) 150px;gap:18px;align-items:center;width:100%;border:1px solid var(--line);background:#fffdf9;border-radius:13px;padding:12px 14px;text-align:left;cursor:pointer}
.category-compare-row:hover{border-color:var(--gold);background:#fffaf0;transform:translateY(-1px);box-shadow:0 8px 20px rgba(138,21,56,.08)}
.category-compare-label{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:10px}.category-compare-label strong{display:grid;place-items:center;height:34px;border-radius:9px;background:var(--navy);color:#fff;font-size:.74rem}.category-compare-label span{font-size:.72rem;line-height:1.35;color:var(--text)}
.category-compare-plot{min-width:0}.category-total-bar{height:18px;display:flex;overflow:hidden;border-radius:999px;background:#f3e9e4;box-shadow:inset 0 0 0 1px rgba(122,59,72,.08)}.category-total-bar i{height:100%;display:block}.category-total-bar .achieved{background:var(--green)}.category-total-bar .failed{background:var(--red)}.category-total-bar .waiting{background:var(--amber)}
.category-compare-counts{display:flex;gap:14px;margin-top:5px;font-size:.62rem;color:var(--muted)}
.category-compare-rate{text-align:right}.category-compare-rate strong{display:block;color:var(--navy);font-size:1.05rem}.category-compare-rate span{font-size:.61rem;color:var(--muted)}

/* ===== Per-indicator charts ===== */
.indicator-chart-panel{margin-bottom:16px}.indicator-chart-head{align-items:flex-start}.panel-description{font-size:.72rem;color:var(--muted);margin:4px 0 0}.chart-controls{display:flex;gap:8px;flex-wrap:wrap}.chart-controls label{display:flex;flex-direction:column;gap:3px;font-size:.62rem;color:var(--muted);font-weight:700}.chart-controls select{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 9px;color:var(--navy);font-weight:700}
.indicator-legend i.result{background:var(--navy)}.indicator-legend i.target{background:var(--gold)}.indicator-legend i.benchmark{background:#65535a}
.indicator-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.indicator-card{border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#fff 0%,#fffdfa 100%);overflow:hidden;box-shadow:0 5px 16px rgba(84,28,43,.05)}
.indicator-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 15px 8px;border-top:4px solid var(--gold)}
.indicator-code{display:inline-flex;background:var(--gold-soft);color:var(--navy);padding:3px 7px;border-radius:7px;font-size:.64rem;font-weight:900}.indicator-card h3{font-size:.76rem;line-height:1.45;margin:7px 0 0;color:#482933;font-weight:800}
.indicator-status{white-space:nowrap;border-radius:999px;padding:4px 8px;font-size:.6rem;font-weight:900}.indicator-status.good{background:var(--green-soft);color:var(--green)}.indicator-status.bad{background:var(--red-soft);color:var(--red)}.indicator-status.wait{background:var(--amber-soft);color:var(--amber)}
.indicator-meta{display:flex;gap:7px;flex-wrap:wrap;padding:0 15px 7px}.indicator-meta span{background:#f8f1ed;border:1px solid #eee0da;border-radius:99px;padding:3px 7px;color:var(--muted);font-size:.58rem}
.indicator-chart-canvas{padding:0 7px 3px}.indicator-svg{display:block;width:100%;height:auto;min-height:190px}.chart-gridline{stroke:#eadfd9;stroke-width:1}.chart-axis-value,.chart-axis-year{fill:#806d70;font-size:10px;font-family:"Noto Sans Thai","Tahoma",sans-serif}.chart-line{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}.chart-line.result-series{stroke:var(--navy)}.chart-line.target-series{stroke:var(--gold);stroke-dasharray:8 5}.chart-line.benchmark-series{stroke:#65535a;stroke-dasharray:3 5}.indicator-svg circle.result-series{fill:var(--navy);stroke:#fff;stroke-width:2}.indicator-svg circle.target-series{fill:var(--gold);stroke:#fff;stroke-width:2}.indicator-svg circle.benchmark-series{fill:#65535a;stroke:#fff;stroke-width:2}
.chart-no-number{height:210px;display:grid;place-content:center;text-align:center;color:var(--muted);padding:20px}.chart-no-number strong{color:var(--navy);font-size:.78rem}.chart-no-number span{font-size:.65rem;margin-top:4px}
.indicator-card-foot{display:flex;justify-content:space-between;align-items:center;padding:8px 14px 12px;border-top:1px solid #f0e5e0;font-size:.62rem;color:var(--muted)}
.chart-pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px}.chart-pagination span{font-size:.72rem;color:var(--muted);min-width:150px;text-align:center}.chart-pagination button:disabled{opacity:.4;cursor:not-allowed;transform:none}
.empty-chart-state{grid-column:1/-1;padding:34px;text-align:center;border:1px dashed #d9c4bd;border-radius:12px;color:var(--muted);background:#fffaf3}

@media(max-width:1050px){.indicator-chart-grid{grid-template-columns:1fr}.category-compare-row{grid-template-columns:minmax(210px,1fr) minmax(250px,1.4fr) 125px}}
@media(max-width:900px){.main:before{left:0}.category-compare-row{grid-template-columns:1fr}.category-compare-rate{text-align:left;display:flex;align-items:baseline;gap:8px}.indicator-chart-head{flex-direction:column}.chart-controls{width:100%}}
@media(max-width:560px){.category-compare-counts{gap:8px;flex-wrap:wrap}.indicator-chart-grid{gap:10px}.indicator-card-head{flex-direction:column}.indicator-status{align-self:flex-start}.chart-controls label{flex:1}.chart-controls select{width:100%}}
@media print{.category-compare-row{break-inside:avoid}.indicator-chart-panel{display:none}}

/* Admin access */
.admin-login-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border-radius:10px;background:#f4c430;color:#65102a;text-decoration:none;font-weight:800;box-shadow:0 4px 12px rgba(101,16,42,.12);white-space:nowrap}.admin-login-btn:hover{filter:brightness(.97);transform:translateY(-1px)}.admin-sidebar-btn{display:flex;align-items:center;justify-content:center;margin-top:9px;padding:10px 12px;border-radius:9px;background:#f4c430;color:#65102a;text-decoration:none;font-weight:900}.admin-sidebar-btn:hover{background:#ffd84d}@media(max-width:760px){.admin-login-btn{width:100%}}


/* Chart type selector: line / bar */
.indicator-card-actions{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.chart-type-toggle{display:inline-flex;border:1px solid #dfc9c2;border-radius:9px;overflow:hidden;background:#fff}
.chart-type-toggle button{border:0;background:#fff;color:var(--muted);font:inherit;font-size:.58rem;font-weight:900;padding:5px 9px;cursor:pointer}
.chart-type-toggle button+button{border-left:1px solid #ead9d3}
.chart-type-toggle button:hover{background:#fff7df;color:var(--navy)}
.chart-type-toggle button.active{background:var(--navy);color:#fff}
.chart-zero-line{stroke:#b9a9a4;stroke-width:1.2}
.chart-bar{opacity:.92}
.chart-bar:hover{opacity:1;filter:brightness(.96)}
.chart-bar.result-series{fill:var(--navy)}
.chart-bar.target-series{fill:var(--gold)}
.chart-bar.benchmark-series{fill:#65535a}
@media(max-width:560px){.indicator-card-actions{align-items:flex-start;width:100%}.chart-type-toggle{align-self:flex-start}}