/* Clean monitoring look (2026-10): header-first layout, flat white cards, one blue accent.
   Loaded last on every page so it wins over the older theme files. */
:root{--c-bg:#f3f5f8;--c-card:#fff;--c-line:#e2e6ec;--c-ink:#1d2433;--c-ink2:#5b6474;--c-muted:#8a93a3;--c-blue:#1565c0;--c-blue-50:#e8f1fb;--c-red:#d32f2f;--c-amber:#b26a00;--series-3:#26a69a;--r:8px;--shadow:none;--shadow-hover:0 2px 10px #1d243314}
html,body{background:var(--c-bg)!important}
body{color:var(--c-ink);font-family:Roboto,"Segoe UI",system-ui,-apple-system,"Noto Sans Khmer","Khmer OS Battambang",sans-serif}

/* ---------- Header ---------- */
.shell.site{display:block!important;min-height:100vh}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 32px;background:var(--c-card);border-bottom:1px solid var(--c-line)}
.site-brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.site-brand img{flex:none;border-radius:10px}
.site-name{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.site-name strong{color:var(--c-ink);font-size:17px;font-weight:700;font-family:"Noto Sans Khmer","Khmer OS Battambang",sans-serif}
.site-name span{color:var(--c-blue);font-size:13px;font-weight:500;letter-spacing:.1px}
.site-header .identity{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.site-header .top-control{border:1px solid var(--c-line)!important;border-radius:var(--r)!important;background:var(--c-card)!important;box-shadow:none!important}
.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;padding:0!important;border-radius:50%!important;border:1px solid transparent!important;background:transparent!important;color:var(--c-ink2)!important;box-shadow:none!important;cursor:pointer}
.icon-btn:hover{background:var(--c-bg)!important;color:var(--c-blue)!important}
.site-header .user-chip{border:1px solid var(--c-line)!important;border-radius:999px!important;background:var(--c-card)!important;box-shadow:none!important}

/* ---------- Menu row ---------- */
.site-nav{position:sticky;top:0;z-index:25;background:var(--c-card);border-bottom:1px solid var(--c-line)}
.site-nav-inner{display:flex;gap:2px;overflow-x:auto;padding:0 24px;scrollbar-width:none}
.site-nav-inner::-webkit-scrollbar{display:none}
.site-nav .nav-item{flex:none;display:flex!important;align-items:center;gap:8px;width:auto!important;min-height:48px!important;padding:0 12px!important;border:0!important;border-bottom:3px solid transparent!important;border-radius:0!important;background:transparent!important;color:var(--c-ink2)!important;font-size:14px!important;font-weight:500!important;text-decoration:none;box-shadow:none!important;white-space:nowrap}
.site-nav .nav-item:hover{color:var(--c-blue)!important;background:var(--c-blue-50)!important}
.site-nav .nav-item.active{color:var(--c-blue)!important;border-bottom-color:var(--c-blue)!important;font-weight:600!important}
.site-nav .nav-symbol{width:auto!important;height:auto!important;background:none!important;color:inherit!important;transform:none!important}
.site-nav .nav-symbol svg{width:18px;height:18px}
.site-nav .nav-count{min-width:20px;padding:0 6px;border-radius:999px;background:var(--c-bg);color:var(--c-ink2);font-size:11.5px;font-weight:600;line-height:20px;text-align:center}
.site-nav .nav-item.active .nav-count{background:var(--c-blue);color:#fff}

/* ---------- Page body ---------- */
.shell.site .content{max-width:1360px!important;margin:0 auto!important;padding:24px 32px 56px!important;background:transparent!important}
.page-head h1,.content h1{color:var(--c-ink)!important}
.eyebrow{color:var(--c-blue)!important;letter-spacing:.6px}
.panel,.stat,.chart-card,.quick-actions>*,.dash-block>.notice{background:var(--c-card)!important;border:1px solid var(--c-line)!important;border-radius:var(--r)!important;box-shadow:none!important}
.panel{border-top:1px solid var(--c-line)!important}
.panel::before,.panel::after,.stat::before,.stat::after{display:none!important}
.panel-head{border-bottom:1px solid var(--c-line)!important;background:transparent!important}
.panel-head h2{color:var(--c-ink)!important}
button.primary,.button.primary{background:var(--c-blue)!important;border-color:var(--c-blue)!important;color:#fff!important;box-shadow:none!important}
button.primary:hover,.button.primary:hover{filter:brightness(1.08)}
.link-btn{border:0!important;background:none!important;box-shadow:none!important;color:var(--c-blue)!important;font-weight:600;padding:4px 6px!important;cursor:pointer;white-space:nowrap}
.link-btn:hover{text-decoration:underline}
footer,.home-footer{border-top:1px solid var(--c-line)}

/* ---------- Key numbers: flat cards, big number, comparison line ---------- */
.shell.site .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.shell.site .stat{padding:18px 20px!important}
.shell.site .stat .stat-label{color:var(--c-ink2)!important;font-size:14px!important;font-weight:500!important}
.shell.site .stat .stat-icon{display:none!important}
.shell.site .stat .stat-value{margin:6px 0 4px;color:var(--c-ink)!important;font-size:30px!important;font-weight:700!important;line-height:1.15}
.shell.site .stats .stat:first-child .stat-value{color:var(--c-blue)!important}
.shell.site .stat small{color:var(--c-muted)!important;font-size:12.5px!important}

/* ---------- Donut + activity ---------- */
.monitor-grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,2.2fr);gap:16px}
.donut-body{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.donut-wrap{position:relative;width:170px;height:170px;flex:none}
.donut{width:100%;height:100%;transform:rotate(0deg)}
.donut-ring{fill:none;stroke:var(--chart-track,#eef1f4);stroke-width:5.5}
.donut-seg{fill:none;stroke-width:5.5}
.donut-seg.s1{stroke:var(--series-1)}.donut-seg.s3{stroke:var(--series-3)}
.donut-centre{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.donut-centre strong{font-size:30px;line-height:1;color:var(--c-ink)}
.donut-centre small{color:var(--c-muted);font-size:12px;margin-top:4px}
.donut-legend{list-style:none;margin:0;padding:0;display:grid;gap:10px;flex:1;min-width:150px}
.donut-legend li{display:grid;grid-template-columns:12px 1fr auto auto;align-items:center;gap:8px;font-size:14px}
.donut-legend strong{font-size:15px}.donut-legend small{color:var(--c-muted);min-width:38px;text-align:right}
.key.s3{background:var(--series-3)}
.seg-toggle{display:inline-flex;border:1px solid var(--c-blue);border-radius:6px;overflow:hidden;flex:none}
.seg-toggle button{border:0!important;border-radius:0!important;background:var(--c-card)!important;color:var(--c-blue)!important;box-shadow:none!important;padding:5px 12px!important;font-size:12px!important;font-weight:600!important;letter-spacing:.3px;text-transform:uppercase;min-height:0!important}
.seg-toggle button+button{border-left:1px solid var(--c-blue)!important}
.seg-toggle button.active{background:var(--c-blue)!important;color:#fff!important}
.col-chart{display:grid;grid-template-columns:auto 1fr;gap:8px;height:210px}
.col-scale{display:flex;flex-direction:column;justify-content:space-between;padding-bottom:20px;color:var(--c-muted);font-size:11px;text-align:right}
.col-plot{display:flex;align-items:stretch;gap:3px;border-bottom:1px solid var(--c-line);background:linear-gradient(var(--c-line) 1px,transparent 1px) 0 0/100% 50%;padding-top:1px;margin-bottom:20px}
.col{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.col-bar{display:block;background:var(--series-1);border-radius:3px 3px 0 0;min-height:0;transition:filter .15s}
.col:hover .col-bar{filter:brightness(1.15)}
.col i{position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);font-style:normal;font-size:11px;color:var(--c-muted);white-space:nowrap}
.col-chart.month .col-plot{gap:10px}
.col-total{margin:6px 0 0;color:var(--c-ink2);font-size:13px}

/* ---------- Initiative cards ---------- */
.plain-panel .init-grid{padding:16px}
.init-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.init-card{position:relative;overflow:hidden;display:flex!important;flex-direction:column;align-items:stretch!important;gap:6px;min-height:160px;padding:18px 20px!important;text-align:left;background:var(--c-card)!important;border:1px solid var(--c-line)!important;border-radius:var(--r)!important;box-shadow:none!important;color:var(--c-ink)!important;cursor:pointer;font:inherit;white-space:normal!important;width:100%}
.init-card:hover{border-color:#b9cde6!important;box-shadow:var(--shadow-hover)!important}
.init-title{display:flex;align-items:flex-start;gap:6px;padding-right:56px;color:var(--c-blue);font-size:15.5px;font-weight:600;line-height:1.35}
.init-title svg{flex:none;margin-top:3px}
.init-org{color:var(--c-muted);font-size:12.5px}
.init-summary{color:var(--c-ink2);font-size:13.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.init-foot{margin-top:auto;padding-top:8px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;color:var(--c-ink2)}
.init-stage{padding:2px 9px;border-radius:999px;background:var(--c-blue-50);color:var(--c-blue);font-weight:600}
.ribbon{position:absolute;top:16px;right:-34px;width:130px;transform:rotate(45deg);padding:3px 0;text-align:center;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.3px;box-shadow:0 1px 3px #0003}
.ribbon.red{background:var(--c-red)}.ribbon.amber{background:#ef8f00}.ribbon.grey{background:#78808d}

/* ---------- Tables, tabs, forms: flatter ---------- */
.shell.site table th{background:#f7f9fb!important;color:var(--c-ink2)!important}
.shell.site .tab-step{box-shadow:none!important;border-radius:var(--r)!important}
.shell.site .tabs.tab-groups{top:49px;background:var(--c-card);backdrop-filter:none;border-color:var(--c-line);box-shadow:none}
.shell.site .tabs.tab-steps .tab-step.active,.shell.site .tabs.tab-steps .tab-step.active:hover{background:var(--c-blue)!important;border-color:var(--c-blue)!important;color:#fff!important;box-shadow:none!important}
.shell.site .tabs.tab-steps .tab-step.active .tab-step-num{background:#fff;color:var(--c-blue)}
.shell.site .tabs.tab-steps .tab-step.active small{color:#dbe8f7}
.shell.site .tab-group-items button.active{color:var(--c-blue)!important;border-color:var(--c-blue)!important;background:var(--c-blue-50)!important;box-shadow:none!important}
.quick-actions>*{box-shadow:none!important}

/* ---------- Standalone pages (Library, PDF import, reports) ---------- */
.page-top{background:var(--c-card)!important;border-bottom:1px solid var(--c-line)!important;box-shadow:none!important}

/* ---------- Phones and tablets ---------- */
@media (max-width:1100px){.shell.site .stats{grid-template-columns:repeat(2,minmax(0,1fr))}.monitor-grid{grid-template-columns:1fr}}
@media (max-width:760px){
 .site-header{flex-wrap:wrap;padding:10px 16px}
 .site-name strong{font-size:14px}.site-name span{font-size:11.5px}
 .site-brand img{width:38px;height:38px}
 .site-header .identity{width:100%;justify-content:flex-start}
 .site-header .user-text{display:none}
 .site-nav-inner{padding:0 8px}
 .shell.site .content{padding:16px 16px 40px!important}
 .shell.site .stats{grid-template-columns:1fr 1fr;gap:10px}
 .shell.site .stat{padding:14px!important}.shell.site .stat .stat-value{font-size:24px!important}
 .donut-wrap{width:140px;height:140px}
 .col-chart{height:180px}.col-plot{gap:1px}
}

/* ---------- Dark mode: invert the page once, then flip pictures back ---------- */
html[data-theme="dark"]{filter:invert(.9) hue-rotate(180deg)}
html[data-theme="dark"] :is(img,video,canvas,picture,.avatar){filter:invert(1) hue-rotate(180deg)}
@media print{html[data-theme="dark"]{filter:none}}

/* Menu icons are line drawings; spacing under the chart row; quieter dashboard button. */
.site-nav .sidebar-icon{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.monitor-grid{margin-bottom:18px}
.dash-edit{border:1px solid var(--c-line)!important;background:var(--c-card)!important;color:var(--c-ink2)!important;box-shadow:none!important}
.dash-edit:hover{color:var(--c-blue)!important;border-color:var(--c-blue)!important}
@media (max-width:520px){.donut-body{flex-direction:column;align-items:stretch}.donut-wrap{margin:0 auto}}

/* Top menu, refined (2026-10-10): one icon style (line drawings in soft colour tiles), one font size. */
.site-nav .c-teal{--ic:#0d9488}.site-nav .c-blue{--ic:#2563eb}.site-nav .c-amber{--ic:#d97706}.site-nav .c-violet{--ic:#7c3aed}
.site-nav .c-pink{--ic:#db2777}.site-nav .c-cyan{--ic:#0891b2}.site-nav .c-slate{--ic:#64748b}
.site-nav-inner{gap:4px;padding:0 28px;justify-content:center}
.site-nav .nav-item{gap:9px;min-height:54px!important;padding:0 12px!important;font-size:14.5px!important;font-weight:500!important;letter-spacing:.1px;color:#3d4655!important}
.site-nav .nav-symbol{display:grid!important;place-items:center;width:30px!important;height:30px!important;border-radius:8px!important;background:color-mix(in srgb,var(--ic) 12%,#fff)!important;color:var(--ic)!important;transition:background .15s,color .15s}
.site-nav .nav-symbol svg{width:17px;height:17px}
.site-nav .sidebar-icon{stroke-width:1.9}
.site-nav .nav-item:hover{background:transparent!important;color:var(--c-ink)!important}
.site-nav .nav-item:hover .nav-symbol{background:color-mix(in srgb,var(--ic) 20%,#fff)!important}
.site-nav .nav-item.active{color:var(--c-blue)!important;font-weight:600!important}
.site-nav .nav-item.active .nav-symbol{background:var(--ic)!important;color:#fff!important}
.site-nav .nav-count{font-size:11.5px}
.site-nav .nav-item:focus-visible{outline:2px solid var(--c-blue);outline-offset:-4px}
@media (max-width:1200px){.site-nav-inner{justify-content:flex-start}}
@media (max-width:760px){.site-nav .nav-item{font-size:13.5px!important;min-height:50px!important;padding:0 9px!important}.site-nav .nav-symbol{width:26px!important;height:26px!important}}
.shell.site .tabs.tab-groups{top:55px}
@media (max-width:760px){.site-header .top-control select{width:auto!important;min-width:0;max-width:140px!important}.site-header .top-control.lang select{min-width:78px!important}}

/* Footer: one light strip, copyright left, links right (2026-10-10). */
.shell.site{display:flex!important;flex-direction:column}.shell.site .content{flex:1;width:100%;box-sizing:border-box}
.site-footer{margin:0;padding:0!important;border-radius:0!important;background:#eef2f9;border-top:1px solid var(--c-line)}
.site-footer-inner{max-width:1360px;margin:0 auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.site-footer .rd-brand{margin:0;color:var(--c-ink);font-size:14px}
.site-footer-links{display:flex;align-items:center;flex-wrap:wrap;gap:4px 0}
.site-footer-links button{border:0!important;background:none!important;box-shadow:none!important;padding:2px 14px!important;min-height:0!important;color:var(--c-blue)!important;font-size:14px!important;font-weight:500!important;letter-spacing:.3px;cursor:pointer}
.site-footer-links button:hover{text-decoration:underline}
.site-footer-sep{width:1px;height:18px;background:var(--c-ink2)}
@media (max-width:760px){.site-footer-inner{padding:18px 16px;flex-direction:column;align-items:flex-start}.site-footer-links button{padding:2px 10px!important;font-size:13px!important}.site-footer-links button:first-child{padding-left:0!important}}

/* Sign-up link on the login page */
.auth-switch{margin:14px 0 0;text-align:center;font-size:14px;color:var(--muted,#5b6472)}
.link-button{background:none;border:0;padding:0;font:inherit;font-weight:600;color:#1d4ed8;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.link-button:hover{color:#1e3a8a}
.auth-form .field small{display:block;margin-top:4px;font-size:12px;font-weight:400}

/* Login background: floating dashboards (replaces the faded emblem) */
.auth-aside{background:linear-gradient(100deg,rgba(10,26,60,.78) 0%,rgba(10,26,60,.45) 45%,rgba(10,26,60,0) 75%),url('/login-bg.svg') right bottom/cover no-repeat #0a1a3c}
.auth-aside::before{display:none}
.auth-aside h1{text-shadow:0 2px 14px rgba(2,6,23,.55)}
.auth-aside p{color:#c7d6e6}
@media(max-width:760px){.auth-aside{background:linear-gradient(180deg,rgba(10,26,60,.82),rgba(10,26,60,.6)),url('/login-bg.svg') right bottom/cover no-repeat #0a1a3c}}

/* Pop-up windows: keep the title and × close button visible while scrolling */
dialog .modal-head{position:sticky;top:0;z-index:5;background:#fff;margin:-28px -28px 20px;padding:18px 28px 14px;border-bottom:1px solid #e5e9f0;border-radius:18px 18px 0 0;align-items:center}
dialog .modal-head h2{margin:0}
@media(max-width:760px){dialog .modal-head{margin:-28px -28px 16px;padding:14px 18px 12px}}

/* Next steps guide (project overview) */
.next-steps .panel-head{align-items:center}
.next-steps .panel-head small{display:block;margin-top:2px}
.ns-bar{height:8px;border-radius:6px;background:#e8eef5;overflow:hidden;margin-bottom:14px}
.ns-bar span{display:block;height:100%;background:linear-gradient(90deg,#1d4ed8,#0ea5e9);border-radius:6px}
.ns-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ns-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #e5e9f0;border-radius:10px;background:#fff}
.ns-item.done{background:#f6fbf8;border-color:#d6eee0}
.ns-item.done .ns-text strong{color:#4b5d6e;font-weight:500}
.ns-mark{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;border:2px solid #c7d2e0;color:#fff}
.ns-item.done .ns-mark{background:#16a34a;border-color:#16a34a}
.ns-item.info .ns-mark{border-color:#93c5fd;color:#1d4ed8;font-style:italic}
.ns-text{flex:1;min-width:0;display:grid;gap:2px}
.ns-text strong{font-size:14px;font-weight:600;color:#1e293b}
.ns-text small{font-size:12.5px;color:#64748b;line-height:1.4}
.ns-item button{flex:0 0 auto;padding:6px 12px;font-size:13px;color:#1d4ed8;border-color:#bfdbfe;background:#eff6ff}
.ns-item button:hover{background:#dbeafe}
.ns-ready{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding:12px 14px;border-radius:10px;background:#ecfdf3;border:1px solid #bbf7d0;color:#166534;font-weight:600;font-size:14px}
.ns-foot{margin:12px 0 0}
@media(max-width:600px){.ns-item{flex-wrap:wrap}.ns-item button{margin-left:36px}}