:root {
  color-scheme: light;
  --navy: #102b45;
  --navy-deep: #0a2137;
  --navy-soft: #284761;
  --blue: #1677ff;
  --blue-dark: #0d62d6;
  --blue-pale: #eaf3ff;
  --green: #15966a;
  --green-pale: #e6f7ef;
  --amber: #d89012;
  --amber-pale: #fff4dc;
  --red: #c94242;
  --ink: #18324b;
  --muted: #718196;
  --line: #e7edf3;
  --canvas: #f4f7fa;
  --card: #fff;
  --shadow: 0 5px 20px rgba(17, 45, 71, .045);
  font-family: Tahoma, "Noto Sans Thai", "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font-size: 16.8px; line-height: 1.65; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(22,119,255,.28); outline-offset: 2px; }
.app-body { min-height: 100vh; }

.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; width: 254px; display: flex; flex-direction: column; padding: 27px 17px 17px; color: #e7f1fa; background: var(--navy); box-shadow: 5px 0 24px rgba(10,33,55,.08); }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 30px; }
.brand-mark, .report-mark, .login-emblem { display: grid; place-items: center; flex: 0 0 auto; color: #fff; font-weight: 800; letter-spacing: .03em; background: linear-gradient(145deg,#238cff,#1263c7); box-shadow: 0 7px 16px rgba(7,34,61,.18); }
.brand-mark { width: 43px; height: 43px; border-radius: 13px; font-size: 15.6px; }
.brand-copy { display: grid; line-height: 1.1; }
.brand-copy strong { font-size: 19.2px; letter-spacing: .02em; }
.brand-copy small { margin-top: 5px; color: #8fa8be; font-size: 12.15px; letter-spacing: .22em; }
.side-label { padding: 0 12px 9px; color: #7893aa; font-size: 13.5px; font-weight: 700; letter-spacing: .13em; }
.side-nav { display: grid; gap: 5px; }
.side-nav a { display: flex; align-items: center; gap: 11px; min-height: 43px; padding: 0 12px; border-radius: 9px; color: #c4d4e2; font-size: 15.6px; transition: background .16s,color .16s; }
.side-nav a:hover { color: #fff; background: rgba(255,255,255,.075); }
.side-nav a.active { color: #fff; background: #1d75d2; box-shadow: 0 5px 13px rgba(3,19,35,.2); }
.nav-icon { width: 19px; color: #83baff; font-size: 20.16px; text-align: center; }
.side-nav a.active .nav-icon { color: #fff; }
.sidebar-bottom { margin-top: auto; }
.sidebar-note { display: flex; align-items: center; gap: 9px; margin: 0 6px 18px; padding: 13px 10px; border: 1px solid rgba(211,231,249,.13); border-radius: 9px; color: #d4e2ee; font-size: 14.85px; line-height: 1.4; }
.sidebar-note small { color: #8ea8bd; font-size: 13.5px; }
.note-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #57c99a; box-shadow: 0 0 0 4px rgba(87,201,154,.12); }
.signed-in { display: flex; align-items: center; gap: 9px; margin: 0 5px 9px; padding: 10px 4px 4px; border-top: 1px solid rgba(218,233,246,.14); }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #dcebfa; background: #315570; font-weight: 700; }
.signed-in strong, .signed-in small { display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signed-in strong { font-size: 16.2px; }
.signed-in small { color: #95aec2; font-size: 13.5px; text-transform: uppercase; }
.side-logout { display: flex; justify-content: space-between; width: 100%; padding: 9px 9px; border: 0; border-radius: 7px; color: #b9cbda; background: transparent; font-size: 16.2px; text-align: left; }
.side-logout:hover { color: #fff; background: rgba(255,255,255,.08); }
.sidebar-close, .mobile-menu-toggle { display: none; }
.main-shell { min-height: 100vh; margin-left: 254px; padding: 34px clamp(22px, 3.2vw, 54px) 20px; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.eyebrow, .section-kicker, .stat-kicker { color: #8495a8; font-size: 13.5px; font-weight: 700; letter-spacing: .12em; }
.eyebrow { margin-bottom: 6px; color: #557590; }
h1, h2, h3, p { margin-top: 0; }
.page-header h1, .edit-page-header h1, .report-toolbar h1 { margin: 0; color: var(--navy); font-size: clamp(24.64px,2.24vw,32.48px); font-weight: 700; letter-spacing: -.025em; line-height: 1.35; }
.subtitle { margin: 7px 0 0; color: #697b8e; font-size: 15.6px; }
.subtitle-divider { margin: 0 7px; color: #c2cbd4; }
.header-meta { display: grid; gap: 1px; min-width: 148px; padding: 4px 0 2px 16px; border-left: 1px solid #dfe7ee; color: var(--ink); font-size: 16.2px; }
.header-meta strong { font-size: 16.2px; }
.updated-label { color: #8495a8; font-size: 13.5px; }
.admin-chip { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 5px; color: #2b6f54; font-size: 14.85px; }
.admin-chip span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.page-footer { display: flex; justify-content: space-between; gap: 20px; padding: 22px 2px 0; color: #91a0af; font-size: 13.5px; }

.welcome-strip { display: flex; align-items: center; gap: 13px; margin-bottom: 20px; padding: 14px 18px; border: 1px solid #dceafd; border-radius: 11px; background: #f0f6ff; }
.welcome-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: #176cce; background: #dcecff; font-size: 19.04px; }
.welcome-strip strong { color: #204563; font-size: 15.6px; }
.welcome-strip p { margin: 0; color: #6e8499; font-size: 14.85px; }
.welcome-strip .button { margin-left: auto; }
.stats-grid { display: grid; grid-template-columns: repeat(4,minmax(118px,1fr)) minmax(230px,1.6fr); gap: 13px; margin-bottom: 19px; }
.stat-card { min-height: 130px; padding: 16px 17px 14px; border: 1px solid #ebf0f4; border-radius: 12px; background: var(--card); box-shadow: var(--shadow); }
.stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; font-size: 19.2px; font-weight: 700; }
.icon-total { color: #3772af; background: #eaf3fc; }
.icon-success { color: var(--green); background: var(--green-pale); }
.icon-progress { color: var(--blue); background: var(--blue-pale); }
.icon-pending { color: var(--amber); background: var(--amber-pale); }
.stat-kicker { color: #91a0ae; font-size: 12.15px; letter-spacing: .1em; }
.stat-value { margin-top: 10px; color: var(--navy); font-size: 32.48px; font-weight: 700; line-height: 1.1; }
.stat-value small { margin-left: 4px; color: #8b9aaa; font-size: 14.85px; font-weight: 500; }
.stat-caption { margin-top: 4px; color: #8190a0; font-size: 13.5px; }
.overall-card { display: flex; align-items: center; justify-content: space-between; min-height: 130px; padding-right: 21px; }
.overall-card .stat-value { margin-top: 11px; }
.donut, .detail-donut { display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--blue) var(--progress), #e8eef4 var(--progress)); transform: rotate(-90deg); }
.donut { width: 86px; height: 86px; padding: 8px; }
.donut > div, .detail-donut > div { display: grid; place-content: center; justify-items: center; width: 100%; height: 100%; border-radius: 50%; background: white; transform: rotate(90deg); }
.donut strong { color: var(--navy); font-size: 19.2px; line-height: 1.2; }
.donut small { color: #8797a7; font-size: 12.15px; }

.attention-card, .table-card, .content-card { border: 1px solid #e9eff4; border-radius: 12px; background: var(--card); box-shadow: var(--shadow); }
.attention-card { margin-bottom: 19px; padding: 18px 21px 15px; }
.attention-heading, .table-heading, .side-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.attention-heading h2, .table-heading h2, .card-heading h2, .side-card-heading h2 { margin: 2px 0 0; color: var(--navy); font-size: 19.2px; line-height: 1.45; }
.attention-count { padding: 5px 10px; border-radius: 20px; color: #72869a; background: #f2f5f8; font-size: 13.5px; white-space: nowrap; }
.no-blockers { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px; border-radius: 8px; background: #f7fafc; }
.check-ring { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #bbebd6; border-radius: 50%; color: var(--green); background: #edf9f3; }
.no-blockers strong { color: #38556d; font-size: 14.85px; }
.no-blockers p { margin: 1px 0 0; color: #8697a6; font-size: 13.5px; }
.attention-list { margin-top: 12px; }
.attention-row { display: flex; align-items: center; gap: 12px; padding: 10px 5px; border-top: 1px solid #edf1f5; }
.attention-row:first-child { border-top: 0; }
.attention-number, .row-number { display: grid; place-items: center; flex: 0 0 auto; width: 31px; height: 31px; border-radius: 9px; color: #66819a; background: #f1f5f8; font-size: 14.85px; font-weight: 700; }
.attention-main { flex: 1; min-width: 0; }
.attention-main strong, .attention-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attention-main strong { color: #344f66; font-size: 16.2px; }
.attention-main small { color: #a05b42; font-size: 13.5px; }
.attention-owner { color: #7a8d9d; font-size: 13.5px; }
.attention-arrow { color: #88a0b4; font-size: 20.16px; }

.table-card { padding: 19px 0 0; overflow: hidden; }
.table-heading { padding: 0 21px; }
.table-heading p { margin: 3px 0 0; color: #8796a5; font-size: 14.85px; }
.table-tools { display: flex; align-items: center; gap: 8px; }
.search-box { display: flex; align-items: center; gap: 8px; min-width: 195px; height: 36px; padding: 0 10px; border: 1px solid #e1e8ee; border-radius: 7px; color: #8a9aaa; }
.search-box > span { font-size: 21.28px; line-height: 1; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 14.85px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid transparent; border-radius: 7px; font-size: 14.85px; font-weight: 700; transition: background .16s,border .16s,transform .16s; }
.button:hover { transform: translateY(-1px); }
.button-primary { border-color: var(--blue); color: #fff; background: var(--blue); box-shadow: 0 4px 10px rgba(22,119,255,.15); }
.button-primary:hover { border-color: var(--blue-dark); background: var(--blue-dark); }
.button-outline { border-color: #dfe7ed; color: #506a80; background: #fff; }
.button-outline:hover { border-color: #b6d5f7; color: #1669c3; background: #f5faff; }
.button-small { min-height: 31px; padding: 0 11px; font-size: 13.5px; }
.filter-row { display: flex; align-items: center; gap: 7px; padding: 16px 21px 12px; }
.filter-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px; border: 1px solid transparent; border-radius: 6px; color: #778899; background: transparent; font-size: 13.5px; }
.filter-chip span { color: #9aa7b3; font-size: 12.15px; }
.filter-chip.active { border-color: #dceaff; color: #1268cf; background: #eff6ff; font-weight: 700; }
.filter-chip.active span { color: #3583dc; }
.table-scroll { width: 100%; overflow-x: auto; }
.initiative-table, .users-table { width: 100%; border-collapse: collapse; text-align: left; }
.initiative-table { min-width: 1020px; }
.initiative-table thead, .users-table thead { background: #f7f9fb; }
.initiative-table th, .users-table th { height: 39px; padding: 0 10px; color: #8796a4; font-size: 12.15px; font-weight: 700; white-space: nowrap; }
.initiative-table th:first-child, .initiative-table td:first-child { padding-left: 21px; }
.initiative-table tbody tr { border-top: 1px solid #f0f3f6; transition: background .13s; }
.initiative-table tbody tr:hover { background: #f9fbfd; }
.initiative-table td { height: 66px; padding: 8px 10px; color: #667b8e; font-size: 13.5px; vertical-align: middle; }
.initiative-table .row-number { width: 28px; height: 28px; border-radius: 8px; font-size: 13.5px; }
.initiative-title-link { display: grid; gap: 2px; min-width: 170px; }
.initiative-title-link strong { color: #28455e; font-size: 14.85px; line-height: 1.4; }
.initiative-title-link small { color: #93a1ae; font-size: 12.15px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 180px; padding: 5px 8px; border-radius: 20px; font-size: 12.15px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.status-pill i, .user-state i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.status-pill.pending { color: #ad7109; background: var(--amber-pale); }
.status-pill.in-progress { color: #176bc8; background: #e9f3ff; }
.status-pill.success { color: #16815d; background: #e8f7ef; }
.status-pill.large { padding: 8px 12px; font-size: 14.85px; }
.progress-cell { display: flex; align-items: center; gap: 8px; min-width: 100px; }
.progress-line { display: block; width: 64px; height: 5px; overflow: hidden; border-radius: 6px; background: #e9eef3; }
.progress-fill { display: block; height: 100%; border-radius: inherit; }
.progress-fill.pending { background: #e2a32e; }
.progress-fill.in-progress { background: var(--blue); }
.progress-fill.success { background: var(--green); }
.progress-cell strong { color: #50677b; font-size: 13.5px; }
.latest-cell { max-width: 255px; min-width: 180px; }
.latest-cell > span { display: block; overflow: hidden; color: #61768a; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.latest-cell .muted { color: #a2aeb8; }
.latest-cell small { display: block; overflow: hidden; margin-top: 3px; color: #92a0ad; text-overflow: ellipsis; white-space: nowrap; }
.latest-cell small b { color: #71879a; }
.date-cell { min-width: 100px; white-space: nowrap; }
.row-action { min-width: 47px; padding-right: 15px !important; text-align: right; white-space: nowrap; }
.row-action > a:first-child { color: #9cadba; font-size: 25.76px; line-height: 1; }
.row-action .edit-row { display: block; color: #1471da; font-size: 12.15px; }
.empty-search td { height: 70px; color: #8192a2; text-align: center; }
.table-foot { display: flex; justify-content: space-between; gap: 12px; padding: 12px 21px; border-top: 1px solid #edf1f5; color: #95a2ae; font-size: 12.15px; }
.legend-dot { display: inline-block; width: 6px; height: 6px; margin: 0 4px 0 9px; border-radius: 50%; }
.legend-dot.amber { background: #dfa431; }.legend-dot.blue { background: var(--blue); }.legend-dot.green { background: var(--green); }

.breadcrumb { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; color: #8c9aaa; font-size: 14.85px; }
.breadcrumb a { color: #3178bb; }
.breadcrumb-action { margin-left: auto; }
.detail-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 21px; padding: 21px 23px; border: 1px solid #e3edf5; border-radius: 12px; background: linear-gradient(100deg,#fff 45%,#f0f7ff 100%); box-shadow: var(--shadow); }
.detail-number { color: #6a91b5; font-size: 12.15px; font-weight: 700; letter-spacing: .12em; }
.detail-title-area h1 { max-width: 820px; margin: 3px 0 1px; color: var(--navy); font-size: clamp(22.4px,2.35vw,31.36px); line-height: 1.4; }
.detail-title-area p { margin: 0; color: #91a0ad; font-size: 14.85px; }
.detail-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(275px,.85fr); align-items: start; gap: 16px; }
.detail-main, .detail-aside { display: grid; gap: 14px; min-width: 0; }
.content-card { padding: 18px 20px; }
.card-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.heading-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px; font-size: 18px; font-weight: 700; }
.blue-soft { color: #3176be; background: #eaf3fc; }.green-soft { color: #238a66; background: #e8f7ef; }.amber-soft { color: #b27612; background: #fff4dc; }.purple-soft { color: #7660ad; background: #f1edfb; }.gray-soft { color: #607c93; background: #edf2f6; }
.card-heading .section-kicker { display: block; font-size: 12.15px; }
.card-heading h2 { margin-top: 1px; font-size: 16.8px; }
.objective-text, .body-copy { margin: 0; color: #4c6478; font-size: 16.2px; line-height: 1.9; }
.detail-description { margin-top: 13px; padding: 12px 14px; border-radius: 8px; color: #60768a; background: #f7f9fb; font-size: 14.85px; line-height: 1.85; white-space: pre-line; }
.preserve-lines { white-space: pre-line; }
.empty-copy { margin: 0; color: #9aa7b3; font-size: 14.85px; }
.next-block-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.next-block-grid > div + div { padding-left: 17px; border-left: 1px solid var(--line); }
.blocker-box .body-copy { color: #796447; }
.public-checklist { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.public-checklist li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #f0f3f6; color: #536d82; font-size: 14.85px; }
.public-checklist li:first-child { border-top: 0; }
.public-checklist li > span:nth-child(2) { flex: 1; }
.public-checklist small { color: #93a1ad; font-size: 12.15px; }
.check-mark { display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid #cad6df; border-radius: 5px; color: white; }
.check-mark.done { border-color: var(--green); background: var(--green); }
.completed-text { color: #91a0ac; text-decoration: line-through; }
.attachment-list { display: grid; }
.attachment-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 0; border-top: 1px solid #eff2f5; }
.attachment-row:first-child { border-top: 0; }
.file-icon { display: grid; place-items: center; width: 34px; height: 37px; flex: 0 0 auto; border-radius: 7px; color: #3980c2; background: #edf5fc; font-size: 10.8px; font-weight: 800; }
.attachment-info { flex: 1; min-width: 0; }
.attachment-info strong, .attachment-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-info strong { color: #405e77; font-size: 13.5px; }
.attachment-info small { color: #92a0ac; font-size: 12.15px; }
.download-link { flex: 0 0 auto; color: #1b75d1; font-size: 13.5px; font-weight: 700; }
.progress-summary { display: grid; justify-items: center; padding-top: 17px; }
.progress-summary > .section-kicker { justify-self: start; }
.detail-donut { width: 144px; height: 144px; margin: 18px 0 13px; padding: 10px; }
.detail-donut strong { color: var(--navy); font-size: 34.72px; line-height: 1.15; }
.detail-donut strong small { font-size: 19.2px; }
.detail-donut span { color: #8d9ba8; font-size: 13.5px; }
.summary-meta { display: grid; width: 100%; gap: 0; margin-top: 16px; border-top: 1px solid #edf1f4; }
.summary-meta > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #f1f3f6; font-size: 13.5px; }
.summary-meta > div:last-child { border-bottom: 0; }
.summary-meta span { color: #8a9aa8; }
.summary-meta strong { color: #4e687e; font-weight: 600; text-align: right; }
.history-card .card-heading { margin-bottom: 13px; }
.timeline { position: relative; display: grid; gap: 0; margin: 0; padding: 0 0 0 15px; list-style: none; }
.timeline:before { position: absolute; top: 3px; bottom: 7px; left: 4px; width: 1px; background: #e4ebf1; content: ""; }
.timeline li { position: relative; padding: 0 0 17px 4px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline-dot { position: absolute; top: 4px; left: -15px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #418cda; box-shadow: 0 0 0 1px #95c1ed; }
.timeline-date { color: #95a2ae; font-size: 12.15px; }
.timeline-change { margin-top: 3px; color: #526a7e; font-size: 14.85px; }.timeline-change span, .timeline-status > span:nth-child(2) { color: #aab5bf; }.timeline-change strong { color: var(--navy); }
.timeline-status { display: flex; align-items: center; gap: 4px; margin-top: 3px; }
.mini-status { font-size: 10.8px; font-weight: 700; }.mini-status.pending { color: #b27a18; }.mini-status.in-progress { color: #2675c6; }.mini-status.success { color: #16815d; }
.timeline-by { margin-top: 2px; color: #8c9ba8; font-size: 12.15px; }
.timeline li p { margin: 4px 0 0; color: #6f8294; font-size: 13.5px; }

.report-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
.report-toolbar p { margin: 5px 0 0; color: #7d8e9e; font-size: 14.85px; }
.report-cover { display: flex; align-items: center; gap: 15px; padding: 20px 22px; border-radius: 11px; color: #fff; background: linear-gradient(110deg,#102b45,#1a4b72); box-shadow: var(--shadow); }
.report-mark { width: 47px; height: 47px; border-radius: 13px; background: rgba(255,255,255,.17); box-shadow: none; font-size: 15.6px; }
.report-cover .section-kicker { color: #9dc8ee; }.report-cover h2 { margin: 3px 0 2px; color: white; font-size: 19.04px; }.report-cover p { margin: 0; color: #bdd1e1; font-size: 13.5px; }
.report-date { display: grid; gap: 1px; margin-left: auto; color: #b6c9d8; font-size: 12.15px; text-align: right; }.report-date strong { color: white; font-size: 15.6px; }
.report-stats { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin: 13px 0 16px; }
.report-stats > div { display: grid; gap: 1px; padding: 12px 14px; border: 1px solid #e8eef3; border-radius: 9px; background: #fff; }.report-stats span { color: #8595a4; font-size: 12.15px; }.report-stats strong { color: var(--navy); font-size: 22.4px; }.text-success { color: var(--green) !important; }.text-blue { color: var(--blue) !important; }.text-amber { color: var(--amber) !important; }
.report-list { display: grid; gap: 9px; }
.report-item { padding: 14px 17px; border: 1px solid #e8eef3; border-radius: 9px; background: #fff; box-shadow: var(--shadow); }
.report-item-top { display: flex; align-items: center; gap: 10px; }.report-item-top h3 { flex: 1; margin: 0; color: #2c4961; font-size: 16.2px; }.report-item-top .row-number { width: 26px; height: 26px; }
.report-item-progress { display: flex; align-items: center; gap: 8px; margin: 10px 0 7px; }.report-item-progress .progress-line { width: 140px; }.report-item-progress strong { color: #526d82; font-size: 13.5px; }.report-item-progress > span:last-child { margin-left: auto; color: #8494a3; font-size: 12.15px; }
.report-item-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; padding-top: 7px; border-top: 1px solid #f0f3f6; }.report-item-copy p { margin: 0; color: #718496; font-size: 12.15px; line-height: 1.6; }.report-item-copy b { color: #4d6579; }.report-blocker { grid-column: 1 / -1; color: #a26248 !important; }
.report-signoff { display: flex; justify-content: space-between; padding: 18px 2px 0; color: #91a0ad; font-size: 12.15px; }

.login-wrap { display: grid; grid-template-columns: minmax(220px,.85fr) minmax(340px,1fr); align-items: center; gap: clamp(28px,7vw,100px); max-width: 890px; min-height: calc(100vh - 110px); margin: auto; padding: 25px 7%; }
.login-intro { max-width: 350px; }.login-emblem { width: 53px; height: 53px; margin-bottom: 26px; border-radius: 16px; font-size: 16.8px; }.login-intro .eyebrow { color: #3980bf; }.login-intro h1 { margin: 4px 0 10px; color: var(--navy); font-size: 29.12px; }.login-intro p { color: #708498; font-size: 16.2px; line-height: 1.9; }.login-safe { display: flex; align-items: center; gap: 8px; margin-top: 25px; color: #7d8d9b; font-size: 13.5px; }.login-safe span { color: #367dbc; font-size: 19.2px; }
.login-card { padding: 27px; border: 1px solid #e8eef3; border-radius: 13px; background: #fff; box-shadow: 0 12px 36px rgba(20,52,78,.08); }.login-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 21px; }.login-lock { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #2378cb; background: #eaf4ff; font-size: 24.64px; }.login-card h2 { margin: 0; color: var(--navy); font-size: 19.04px; }.login-card-head p { margin: 2px 0 0; color: #8a99a7; font-size: 13.5px; }.login-card .field { margin-bottom: 14px; }.login-submit { width: 100%; margin-top: 7px; }.login-back { display: block; margin-top: 17px; color: #6f88a0; font-size: 13.5px; text-align: center; }.login-back:hover { color: var(--blue); }
.form-alert { margin-bottom: 14px; padding: 10px 12px; border: 1px solid #f0d4d1; border-radius: 7px; color: #a5463d; background: #fff4f2; font-size: 14.85px; }

.edit-page-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 17px; }.edit-page-header h1 { font-size: 26.88px; }.edit-page-header p { margin: 3px 0 0; color: #7d8e9d; font-size: 14.85px; }.success-alert { margin: 0 0 14px; padding: 11px 14px; border: 1px solid #cdebdc; border-radius: 8px; color: #247550; background: #eff9f3; font-size: 14.85px; }
.edit-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(300px,.78fr); align-items: start; gap: 15px; }.edit-main-column, .edit-side-column { display: grid; gap: 14px; min-width: 0; }.edit-form { padding: 21px; }
.form-section-head { display: flex; align-items: center; gap: 11px; padding-bottom: 13px; border-bottom: 1px solid #edf1f4; }.form-section-number { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; color: #2577c7; background: #eaf4fe; font-size: 13.5px; font-weight: 800; }.form-section-head h2 { margin: 0; color: var(--navy); font-size: 18px; }.form-section-head p { margin: 1px 0 0; color: #8a99a6; font-size: 13.5px; }.section-spaced { margin-top: 24px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; padding-top: 15px; }.field { display: grid; align-content: start; gap: 6px; color: #4f687e; font-size: 13.5px; font-weight: 700; }.field > span { line-height: 1.4; }.field input, .field select, .field textarea, .user-actions select, .reset-details input { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #dfe7ed; border-radius: 7px; outline: 0; color: #29465e; background: #fff; font-size: 14.85px; font-weight: 400; }.field textarea { min-height: 75px; resize: vertical; line-height: 1.7; }.field input::placeholder, .field textarea::placeholder { color: #a8b3bd; }.field small { color: #8b99a6; font-size: 12.15px; font-weight: 400; }.span-2 { grid-column: 1 / -1; }.input-suffix { position: relative; }.input-suffix input { padding-right: 32px; }.input-suffix span { position: absolute; top: 9px; right: 11px; color: #8d9ba8; font-size: 14.85px; font-weight: 500; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 15px; border-top: 1px solid #edf1f4; }.form-actions > span { color: #95a1ac; font-size: 12.15px; }
.side-card-heading { margin-bottom: 13px; }.side-card-heading h2 { font-size: 16.8px; }.side-card-heading > a { color: #4984b8; font-size: 19.2px; }.mini-count { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 12px; color: #5e7990; background: #eef3f7; font-size: 12.15px; }
.edit-summary-card { padding: 16px 17px; }.edit-donut { width: 108px; height: 108px; margin: 13px auto 10px; padding: 8px; }.edit-donut strong { font-size: 28px; }.edit-donut strong small { font-size: 15.6px; }.edit-donut span { font-size: 12.15px; }.summary-status { text-align: center; }.edit-summary-card .summary-meta { margin-top: 13px; }
.checklist-admin-list { display: grid; }.checklist-admin-item { display: grid; grid-template-columns: 18px minmax(0,1fr) 27px 27px; align-items: center; gap: 7px; padding: 8px 0; border-top: 1px solid #eff2f5; }.checkbox-title { position: relative; display: grid; place-items: center; width: 17px; height: 17px; }.checkbox-title input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }.checkbox-title span { width: 16px; height: 16px; border: 1px solid #cbd7e0; border-radius: 5px; background: white; }.checkbox-title input:checked + span { border-color: var(--green); background: var(--green); }.checkbox-title input:checked + span:after { display: block; color: #fff; content: "✓"; font-size: 14.85px; line-height: 14px; text-align: center; }.checkbox-title input:focus-visible + span { outline: 3px solid rgba(22,119,255,.28); outline-offset: 2px; }.check-item-fields { display: grid; min-width: 0; gap: 4px; }.check-item-fields input { min-width: 0; padding: 5px 7px; border: 1px solid #e1e8ed; border-radius: 5px; color: #4a657b; background: #fff; font-size: 12.15px; }.check-item-fields input[type=date] { color: #8192a1; }.icon-submit { display: grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 1px solid #dfe9e5; border-radius: 6px; color: var(--green); background: #f1faf5; font-size: 15.6px; font-weight: 700; }.icon-submit:hover { border-color: #b9e2cd; background: #e7f6ee; }.delete-icon { border-color: #f0dede; color: #bd6660; background: #fff8f7; }.delete-icon:hover { border-color: #ecc5c2; background: #fff0ef; }.compact-empty { padding: 2px 0 10px; }
.add-checklist-form { display: grid; gap: 9px; margin-top: 9px; padding-top: 13px; border-top: 1px solid #e9eef2; }.add-checklist-form .field { gap: 4px; }.add-checklist-form .field span { color: #8192a0; font-size: 12.15px; }.add-checklist-form .button { justify-self: start; }
.upload-box { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; border: 1px dashed #cbd9e5; border-radius: 8px; background: #f9fbfd; }.upload-label { display: grid; grid-template-columns: 27px 1fr; align-items: center; column-gap: 8px; min-width: 0; color: #4d6980; cursor: pointer; }.upload-symbol { display: grid; grid-row: span 2; place-items: center; width: 27px; height: 27px; border-radius: 7px; color: #2275c4; background: #e8f3ff; font-size: 18px; }.upload-label strong { overflow: hidden; font-size: 12.15px; text-overflow: ellipsis; white-space: nowrap; }.upload-label small { color: #8d9ca8; font-size: 10.8px; }.upload-label input { grid-column: 1 / -1; width: 100%; margin-top: 6px; color: #728598; font-size: 10.8px; }.admin-attachment-list { margin-top: 10px; }.admin-attachment-list .attachment-row { gap: 7px; }.admin-attachment-list .file-icon { width: 28px; height: 30px; font-size: 9.45px; }.admin-attachment-list .attachment-info strong { font-size: 12.15px; }.admin-attachment-list .attachment-info small { font-size: 10.8px; }.admin-attachment-list .download-link { padding: 2px; }.admin-attachment-list .attachment-row > form { flex: 0 0 auto; }

.compact-header { align-items: center; margin-bottom: 20px; }.manage-list { overflow: hidden; border: 1px solid #e8eef3; border-radius: 11px; background: white; box-shadow: var(--shadow); }.manage-row { display: grid; grid-template-columns: 34px minmax(180px,1fr) 160px 100px minmax(145px,.65fr) 22px; align-items: center; gap: 13px; min-height: 69px; padding: 10px 17px; border-top: 1px solid #edf1f4; transition: background .14s; }.manage-row:first-child { border-top: 0; }.manage-row:hover { background: #f8fbfe; }.manage-row .row-number { width: 30px; height: 30px; }.manage-title { display: grid; min-width: 0; }.manage-title strong, .manage-title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.manage-title strong { color: #34536d; font-size: 14.85px; }.manage-title small { color: #93a0ad; font-size: 12.15px; }.manage-progress { display: flex; align-items: center; gap: 7px; }.manage-progress strong { color: #5d7184; font-size: 13.5px; }.manage-progress .progress-line { width: 58px; }.manage-owner { overflow: hidden; color: #8796a4; font-size: 12.15px; text-overflow: ellipsis; white-space: nowrap; }.manage-arrow { color: #9aacbb; font-size: 20.16px; }

.create-user-card { margin-bottom: 15px; }.user-create-form { display: grid; grid-template-columns: 1fr 1.2fr .75fr 1.5fr auto; align-items: end; gap: 10px; }.user-create-form .button { margin-bottom: 1px; }.users-card { padding: 18px 0 0; }.simple-heading { margin-bottom: 12px; }.users-table { min-width: 850px; }.users-table th:first-child, .users-table td:first-child { padding-left: 20px; }.users-table tbody tr { border-top: 1px solid #edf1f4; }.users-table td { padding: 11px 10px; color: #687e91; font-size: 13.5px; vertical-align: top; }.users-table td > strong { color: #39566f; font-size: 14.85px; }.table-subline { display: block; color: #98a5b0; font-size: 12.15px; }.role-pill { display: inline-block; padding: 4px 8px; border-radius: 12px; color: #3978b5; background: #edf5fd; font-size: 12.15px; font-weight: 700; text-transform: uppercase; }.role-pill.admin { color: #7559a9; background: #f2edfb; }.user-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.15px; }.user-state.active { color: #19815f; }.user-state.inactive { color: #a67c2a; }.user-actions { display: flex; align-items: center; gap: 8px; }.user-actions select { width: auto; padding: 5px 6px; font-size: 12.15px; }.text-button { padding: 4px; border: 0; color: #b0645c; background: transparent; font-size: 12.15px; }.text-button:hover { color: #8e3630; text-decoration: underline; }.reset-details { margin-top: 7px; color: #4b81b5; font-size: 12.15px; }.reset-details summary { cursor: pointer; }.reset-details form { display: flex; gap: 5px; margin-top: 6px; }.reset-details input { min-width: 145px; padding: 5px 7px; font-size: 12.15px; }
.password-card { max-width: 650px; }.password-card .card-heading p { margin: 3px 0 0; color: #8d9ba8; font-size: 13.5px; }.password-form { display: grid; gap: 15px; max-width: 400px; }.password-form .button { justify-self: start; }

@media (max-width: 1250px) {
  .main-shell { padding-right: 25px; padding-left: 25px; }
  .stats-grid { grid-template-columns: repeat(4,minmax(105px,1fr)); }
  .overall-card { grid-column: span 4; min-height: 105px; }
  .overall-card .donut { width: 75px; height: 75px; }
  .user-create-form { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 980px) {
  .sidebar { width: 216px; padding-right: 12px; padding-left: 12px; }
  .main-shell { margin-left: 216px; padding: 27px 21px 18px; }
  .page-header { align-items: flex-start; }
  .header-meta { min-width: 125px; }
  .detail-grid, .edit-layout { grid-template-columns: minmax(0,1.2fr) minmax(265px,.8fr); }
  .manage-row { grid-template-columns: 32px minmax(160px,1fr) 140px 85px 22px; }.manage-owner { display: none; }
  .initiative-table { min-width: 995px; }
}
@media (max-width: 760px) {
  .sidebar { width: 270px; transform: translateX(-105%); transition: transform .22s ease; }
  .app-body.sidebar-open:before { position: fixed; z-index: 25; inset: 0; background: rgba(9,29,48,.45); content: ""; }
  .app-body.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-close { position: absolute; top: 14px; right: 13px; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.2); border-radius: 7px; color: white; background: transparent; font-size: 22.4px; }
  .main-shell { margin-left: 0; padding: 58px 17px 18px; }
  .mobile-menu-toggle { position: absolute; top: 14px; left: 17px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid #dfe7ee; border-radius: 7px; color: #42647f; background: white; font-size: 14.85px; }
  .page-header { display: grid; gap: 11px; margin-bottom: 18px; }.page-header h1 { font-size: 23.52px; }.header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; padding: 0; border: 0; }.header-meta strong { font-size: 13.5px; }.updated-label { width: 100%; }
  .welcome-strip { align-items: flex-start; flex-wrap: wrap; padding: 12px; }.welcome-strip .button { width: 100%; margin: 0; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.stat-card { min-height: 112px; padding: 12px; }.stat-value { font-size: 28px; }.overall-card { grid-column: span 2; min-height: 100px; }.donut { width: 72px; height: 72px; }
  .attention-card { padding: 15px; }.attention-heading { align-items: flex-start; }.attention-heading h2, .table-heading h2 { font-size: 16.8px; }.attention-owner { display: none; }
  .table-card { padding-top: 15px; }.table-heading { display: grid; padding: 0 14px; }.table-tools { width: 100%; }.search-box { flex: 1; min-width: 0; }.table-tools .button { flex: 0 0 auto; }.filter-row { gap: 2px; overflow-x: auto; padding: 12px 13px 10px; }.filter-chip { flex: 0 0 auto; padding: 0 7px; font-size: 12.15px; }.initiative-table { min-width: 940px; }.table-foot { align-items: flex-start; flex-direction: column; padding: 10px 14px; }
  .page-footer { flex-direction: column; gap: 2px; padding-top: 17px; font-size: 12.15px; }
  .detail-hero { align-items: flex-start; flex-direction: column; padding: 17px; }.detail-grid, .edit-layout { grid-template-columns: 1fr; }.detail-aside { grid-row: 1; }.progress-summary { grid-template-columns: 1fr auto; justify-items: start; }.progress-summary > .section-kicker { grid-column: 1 / -1; }.progress-summary .detail-donut { grid-column: 1; grid-row: 2 / span 2; margin: 13px 13px 13px 0; }.progress-summary > .status-pill { grid-column: 2; grid-row: 2; align-self: end; }.progress-summary .summary-meta { grid-column: 2; grid-row: 3; margin-top: 5px; }.progress-summary .summary-meta > div { gap: 7px; padding: 5px 0; font-size: 12.15px; }
  .next-block-grid { grid-template-columns: 1fr; }.next-block-grid > div + div { padding: 14px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .report-toolbar { align-items: flex-start; flex-direction: column; }.report-toolbar h1 { font-size: 22.4px; }.report-cover { align-items: flex-start; flex-wrap: wrap; padding: 15px; }.report-cover h2 { font-size: 16.8px; }.report-date { width: 100%; margin: 2px 0 0 61px; text-align: left; }.report-stats { grid-template-columns: repeat(2,1fr); }.report-stats > div:last-child { grid-column: span 2; }.report-item { padding: 12px; }.report-item-top { align-items: flex-start; }.report-item-top h3 { padding-top: 3px; }.report-item-top .status-pill { max-width: 115px; white-space: normal; }.report-item-copy { grid-template-columns: 1fr; }.report-blocker { grid-column: auto; }.report-signoff { flex-direction: column; gap: 3px; }
  .login-wrap { grid-template-columns: 1fr; align-content: center; gap: 24px; min-height: calc(100vh - 100px); padding: 14px 1%; }.login-intro { max-width: 100%; }.login-emblem { width: 44px; height: 44px; margin-bottom: 13px; }.login-intro h1 { font-size: 24.64px; }.login-intro p { max-width: 420px; margin-bottom: 0; }.login-safe { margin-top: 9px; }.login-card { padding: 21px; }
  .edit-page-header { align-items: flex-start; flex-direction: column; }.edit-page-header h1 { font-size: 23.52px; }.edit-form { padding: 16px; }.field-grid { grid-template-columns: 1fr; }.span-2 { grid-column: auto; }.form-actions { align-items: flex-start; flex-direction: column; }.form-actions .button { width: 100%; }
  .manage-row { grid-template-columns: 31px minmax(0,1fr) 21px; gap: 8px; padding: 10px 11px; }.manage-row > .status-pill, .manage-progress, .manage-owner { display: none; }
  .user-create-form { grid-template-columns: 1fr; }.users-card { padding-top: 14px; }
}
@media print {
  :root { --canvas: #fff; }
  body { background: #fff !important; font-size: 10px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sidebar, .mobile-menu-toggle, .page-footer, .report-toolbar .button { display: none !important; }
  .main-shell { margin: 0; padding: 0; }
  .report-toolbar { margin: 0 0 12px; }.report-toolbar h1 { font-size: 19px; }
  .report-cover, .report-stats > div, .report-item { break-inside: avoid; box-shadow: none; }
  .report-list { gap: 6px; }.report-item { padding: 9px 12px; }.report-item-copy { grid-template-columns: 1fr 1fr; }
  .report-signoff { padding-top: 10px; }
  @page { size: A4; margin: 13mm; }
}