:root {
  --ink: #171717;
  --ink-soft: #4c4a47;
  --muted: #76716b;
  --paper: #f2f0eb;
  --surface: #fbfaf7;
  --white: #ffffff;
  --line: #d9d5ce;
  --line-dark: #bdb7ae;
  --accent: #8f1d4e;
  --accent-soft: #f3e4ea;
  --warning: #b56d0b;
  --warning-soft: #fbf0d8;
  --critical: #a23d22;
  --critical-soft: #f7e6df;
  --danger: #8f2f2f;
  --danger-soft: #f7e3e3;
  --success: #356149;
  --success-soft: #e4eee8;
  --info: #355c7d;
  --sidebar: #191918;
  --sidebar-line: #33322f;
  --sidebar-text: #dedbd4;
  --radius: 8px;
  --radius-small: 5px;
  --sidebar-width: 258px;
  --content-max: 1540px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", "Leelawadee UI", Tahoma, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-size: 14px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:disabled { cursor: wait; opacity: .62; }
img { max-width: 100%; }
code { font-family: "SFMono-Regular", Consolas, monospace; font-size: .84em; background: #ebe8e2; padding: 2px 5px; border-radius: 3px; }
.eyebrow { margin: 0 0 7px; font-size: 10px; line-height: 1.2; font-weight: 800; letter-spacing: .16em; color: var(--muted); }
.brand-mark { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 1px solid currentColor; font-size: 13px; font-weight: 900; letter-spacing: -.04em; }
.brand-mark.large { width: 58px; height: 58px; font-size: 18px; }
.avatar { width: 36px; height: 36px; flex: 0 0 36px; display: inline-grid; place-items: center; border: 1px solid var(--line-dark); border-radius: 50%; background: var(--surface); font-weight: 800; }
.avatar.giant { width: 86px; height: 86px; font-size: 30px; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; z-index: 30; height: 100vh; display: flex; flex-direction: column; background: var(--sidebar); color: var(--sidebar-text); border-right: 1px solid #0e0e0e; }
.sidebar-head { min-height: 92px; display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--sidebar-line); }
.brand { min-width: 0; display: flex; gap: 12px; align-items: center; }
.brand span:last-child { min-width: 0; display: grid; }
.brand strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f7f6f2; font-size: 13px; }
.brand small { margin-top: 3px; font-size: 9px; letter-spacing: .18em; color: #8d8981; }
.sidebar-close { display: none; color: #fff; background: transparent; border: 0; font-size: 24px; }
.main-nav { flex: 1; overflow-y: auto; padding: 18px 12px; }
.nav-link { min-height: 45px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 12px; margin-bottom: 3px; border-left: 2px solid transparent; color: #aaa69f; transition: background .16s, color .16s, border-color .16s; }
.nav-link b { font-size: 9px; letter-spacing: .12em; color: #68655f; }
.nav-link span { font-weight: 650; }
.nav-link em { min-width: 22px; height: 20px; display: grid; place-items: center; padding: 0 5px; border-radius: 10px; background: var(--accent); color: #fff; font-style: normal; font-size: 10px; }
.nav-link:hover { background: #242422; color: #f2f0ea; }
.nav-link.active { border-left-color: #c54c7d; background: #252423; color: #fff; }
.nav-group { margin-top: 4px; }
.nav-group summary { min-height: 45px; display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; color: #aaa69f; list-style: none; cursor: pointer; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary span { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; font-weight: 650; }
.nav-group summary b { font-size: 9px; color: #68655f; }
.nav-group summary i { font-style: normal; }
.nav-group[open] summary { color: #fff; }
.nav-sub { padding-left: 23px; }
.nav-sub .nav-link { grid-template-columns: minmax(0, 1fr) auto; min-height: 38px; padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.sidebar-foot { padding: 17px 20px 20px; border-top: 1px solid var(--sidebar-line); }
.user-mini { display: flex; align-items: center; gap: 10px; }
.user-mini .avatar { color: var(--ink); }
.user-mini span:last-child { min-width: 0; display: grid; }
.user-mini strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f7f6f2; font-size: 12px; }
.user-mini small { color: #8d8981; font-size: 10px; }
.signout { display: inline-block; margin-top: 14px; color: #9d9992; font-size: 11px; }
.signout:hover { color: #fff; }
.sidebar-overlay { display: none; }
.workspace { min-width: 0; }
.topbar { min-height: 92px; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 17px clamp(18px, 3vw, 44px); border-bottom: 1px solid var(--line); background: var(--canvas); }
.topbar > div:first-of-type { min-width: 0; }
.topbar h1 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-ui); font-size: clamp(23px, 2.3vw, 34px); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.menu-button { display: none; width: 38px; height: 38px; border: 1px solid var(--line-dark); background: var(--surface); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.notification-button { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-dark); background: var(--surface); font-size: 19px; }
.notification-button span { position: absolute; right: -6px; top: -6px; min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 4px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 9px; font-weight: 800; }
.language-switch { display: flex; align-items: center; border: 1px solid var(--line-dark); background: var(--surface); }
.language-switch a { width: 36px; height: 36px; display: grid; place-items: center; opacity: .44; filter: saturate(.7); }
.language-switch a.active { opacity: 1; background: #e7e4de; filter: none; }
.profile-chip { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--line-dark); background: var(--surface); }
.profile-chip span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; }
.profile-chip b { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.content { width: min(100%, var(--content-max)); margin: 0 auto; padding: 28px clamp(18px, 3vw, 44px) 70px; }
.page-toolbar { min-height: 58px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.page-toolbar p { max-width: 760px; margin: 0; color: var(--ink-soft); }
.inline-filter { display: flex; align-items: end; gap: 8px; }
.inline-filter label { min-width: 150px; }
.button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 15px; border: 1px solid transparent; border-radius: var(--radius-small); font-weight: 750; line-height: 1.2; transition: background .15s, border-color .15s, color .15s; }
.button.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.button.primary:hover { background: var(--accent); border-color: var(--accent); }
.button.secondary { background: var(--surface); border-color: var(--line-dark); color: var(--ink); }
.button.secondary:hover { border-color: var(--ink); }
.button.text { background: transparent; border-color: transparent; color: var(--ink-soft); padding-left: 8px; padding-right: 8px; }
.button.danger-text { background: transparent; border-color: transparent; color: var(--danger); }
.button.small { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.button.wide { width: 100%; }
.inline-form { display: inline; }
.alert { margin: 0 0 16px; padding: 11px 14px; border: 1px solid; border-radius: var(--radius-small); }
.alert.success { color: var(--success); background: var(--success-soft); border-color: #bfd4c7; }
.alert.warning { color: #7b4a06; background: var(--warning-soft); border-color: #e3c68e; }
.alert.danger { color: var(--danger); background: var(--danger-soft); border-color: #dbb6b6; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.section-heading h2 { margin: 0; font-family: var(--font-ui); font-size: 22px; font-weight: 500; line-height: 1.25; }
.section-heading p:not(.eyebrow) { margin: 5px 0 0; color: var(--muted); }
.section-heading > span { color: var(--muted); font-size: 12px; }
.empty-state { min-height: 180px; display: grid; place-items: center; align-content: center; gap: 8px; border: 1px dashed var(--line-dark); color: var(--muted); }
.empty-state span { font-family: var(--font-ui); font-size: 42px; line-height: 1; }
.empty-state p { margin: 0; }
label { display: grid; gap: 6px; color: var(--ink-soft); font-size: 12px; font-weight: 700; }
label small { color: var(--muted); font-weight: 400; }
input, select, textarea { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid var(--line-dark); border-radius: 4px; outline: none; color: var(--ink); background: #fff; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(23,23,23,.08); }
input[type="color"] { padding: 4px; }
input[type="checkbox"] { width: 17px; min-height: 17px; }
.checkbox-row { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.form-grid { display: grid; gap: 16px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.editor-form { display: grid; gap: 16px; }
.form-section { display: grid; grid-template-columns: minmax(210px, .65fr) minmax(0, 2fr); gap: 28px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.form-section-title { display: flex; gap: 14px; }
.form-section-title > span { font-family: var(--font-ui); font-size: 28px; color: var(--line-dark); }
.form-section-title h2 { margin: 0; font-family: var(--font-ui); font-size: 20px; font-weight: 500; }
.form-section-title p { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.filter-bar { display: grid; grid-template-columns: 150px 190px 190px minmax(220px, 1fr) auto auto; gap: 10px; align-items: end; margin-bottom: 18px; padding: 16px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); background: #ece9e3; }
.filter-bar.compact { grid-template-columns: minmax(260px, 1fr) 220px auto; }
.filter-search { min-width: 0; }
.list-summary { display: flex; justify-content: flex-end; margin-bottom: 12px; color: var(--muted); }
.list-summary p { margin: 0; }
.metrics-band { display: grid; grid-template-columns: 1.15fr 1.3fr repeat(3, minmax(120px, .85fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); margin-bottom: 24px; background: var(--surface); }
.metrics-band article { min-height: 145px; position: relative; padding: 18px 18px 16px; border-right: 1px solid var(--line); }
.metrics-band article:last-child { border-right: 0; }
.metrics-band article > span { position: absolute; right: 14px; top: 12px; color: var(--line-dark); font-family: var(--font-ui); font-size: 18px; }
.metrics-band p { margin: 0 0 14px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.metrics-band strong { display: block; font-family: var(--font-ui); font-size: 42px; font-weight: 500; line-height: 1; }
.metrics-band small { display: block; margin-top: 10px; color: var(--muted); }
.metrics-band .metric-warning { background: #faf6ed; }
.metrics-band .metric-critical { background: #f8eee9; }
.metrics-band .metric-overdue { color: var(--danger); background: #f6e8e8; }
.micro-progress { height: 3px; margin-top: 16px; background: var(--line); }
.micro-progress i { display: block; height: 100%; background: var(--accent); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .7fr); gap: 18px; margin-bottom: 18px; }
.priority-panel, .portfolio-panel, .project-overview, .activity-panel { padding: 22px; }
.priority-list { border-top: 1px solid var(--line); }
.priority-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.priority-row:hover .priority-copy strong { color: var(--accent); }
.priority-date { width: 48px; min-height: 48px; display: grid; place-items: center; align-content: center; border: 1px solid var(--line-dark); }
.priority-date b { font-family: var(--font-ui); font-size: 21px; line-height: 1; }
.priority-date small { color: var(--muted); text-transform: uppercase; }
.priority-copy { min-width: 0; display: grid; }
.priority-copy small, .priority-copy em { color: var(--muted); font-size: 10px; font-style: normal; }
.priority-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.urgency-label { padding: 4px 7px; border: 1px solid var(--line-dark); font-size: 10px; font-weight: 800; white-space: nowrap; }
.urgency-warning .urgency-label { color: #7a4b07; border-color: #d2ae68; background: var(--warning-soft); }
.urgency-critical .urgency-label { color: var(--critical); border-color: #d6a28f; background: var(--critical-soft); }
.urgency-overdue .urgency-label { color: var(--danger); border-color: #d9a4a4; background: var(--danger-soft); }
.type-list > div { display: grid; grid-template-columns: 12px minmax(0, 1fr) 80px; align-items: center; gap: 9px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.type-dot { width: 7px; height: 22px; background: var(--accent); }
.type-list p { display: grid; margin: 0; }
.type-list p strong { font-size: 12px; }
.type-list p small { color: var(--muted); font-size: 10px; }
.type-list > div > div { display: grid; text-align: right; }
.type-list > div > div b { font-family: var(--font-ui); font-size: 16px; }
.type-list > div > div i { height: 2px; background: var(--line); }
.type-list > div > div em { display: block; height: 100%; background: var(--accent); }
.project-overview { margin-bottom: 18px; }
.project-lines { border-top: 1px solid var(--line); }
.project-lines > a { display: grid; grid-template-columns: 42px minmax(0, 1fr) 160px 150px; align-items: center; gap: 14px; min-height: 76px; border-bottom: 1px solid var(--line); }
.project-lines > a:hover { background: #f4f1ec; }
.project-index { font-family: var(--font-ui); color: var(--line-dark); font-size: 18px; }
.project-main { min-width: 0; display: grid; }
.project-main small { width: max-content; padding-left: 8px; border-left: 3px solid var(--accent); color: var(--muted); font-size: 10px; }
.project-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-main em { color: var(--muted); font-size: 10px; font-style: normal; }
.project-progress { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 8px; }
.project-progress b { font-family: var(--font-ui); }
.project-progress i { height: 3px; background: var(--line); }
.project-progress em { display: block; height: 100%; background: var(--accent); }
.activity-stream > div { display: grid; grid-template-columns: 132px 10px 1fr; gap: 12px; min-height: 46px; }
.activity-stream time { color: var(--muted); font-size: 10px; }
.activity-stream > div > span { position: relative; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--accent); }
.activity-stream > div > span::after { content: ""; position: absolute; left: 3px; top: 7px; width: 1px; height: 38px; background: var(--line); }
.activity-stream > div:last-child > span::after { display: none; }
.activity-stream p { display: grid; margin: 0; color: var(--ink-soft); font-size: 11px; }
.activity-stream strong { color: var(--ink); }
.work-list { display: grid; gap: 10px; }
.work-card { border: 1px solid var(--line); background: var(--surface); }
.work-card-link { display: grid; grid-template-columns: 54px minmax(0, 1fr) 120px; gap: 18px; min-height: 150px; padding: 20px; }
.work-card:hover { border-color: var(--ink); }
.work-seq { font-family: var(--font-ui); font-size: 24px; color: var(--line-dark); }
.work-copy { min-width: 0; }
.work-meta { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.work-meta span { padding-left: 8px; border-left: 3px solid var(--accent); color: var(--muted); font-size: 10px; font-weight: 800; }
.work-meta b, .work-meta em { padding: 2px 6px; border: 1px solid var(--line-dark); font-size: 9px; font-style: normal; }
.work-meta em { color: var(--danger); border-color: #d6aaaa; background: var(--danger-soft); }
.work-copy h2 { margin: 12px 0 5px; font-family: var(--font-ui); font-size: 21px; font-weight: 500; }
.work-copy > p { min-height: 20px; margin: 0 0 12px; color: var(--muted); }
.work-copy dl { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; }
.work-copy dl div { display: grid; }
.work-copy dt { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.work-copy dd { margin: 0; font-size: 11px; }
.work-progress { display: grid; place-items: center; align-content: center; }
.work-progress > strong { font-family: var(--font-ui); font-size: 26px; }
.work-progress > small { color: var(--muted); }
.progress-ring { width: 60px; height: 60px; display: grid; place-items: center; margin: 6px 0; border: 6px solid var(--line); border-top-color: var(--accent); border-radius: 50%; transform: rotate(calc(var(--value) * 1.8deg)); }
.progress-ring span { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); }
.status { width: max-content; display: inline-flex; align-items: center; padding: 4px 7px; border: 1px solid var(--line-dark); border-radius: 3px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.status-not_started { color: #625d55; background: #efede8; }
.status-in_progress { color: #33556e; border-color: #a7becd; background: #e7eff4; }
.status-waiting { color: #74520b; border-color: #d1b76d; background: #f7efd6; }
.status-completed { color: var(--success); border-color: #a9c7b5; background: var(--success-soft); }
.status-cancelled { color: #777; background: #eee; }
.status-overdue { color: var(--danger); border-color: #d4a0a0; background: var(--danger-soft); }
.pagination { display: flex; justify-content: center; gap: 5px; margin-top: 24px; }
.pagination a { min-width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line-dark); background: var(--surface); }
.pagination a.active { color: #fff; background: var(--ink); border-color: var(--ink); }
.project-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .55fr); min-height: 270px; margin: -28px calc(clamp(18px, 3vw, 44px) * -1) 0; border-bottom: 1px solid var(--ink); background: var(--surface); }
.project-title { padding: 46px clamp(24px, 4vw, 66px); border-right: 1px solid var(--line); }
.project-kicker { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.project-kicker span { padding-left: 9px; border-left: 4px solid var(--accent); font-size: 11px; font-weight: 800; }
.project-kicker b, .project-kicker em { padding: 2px 6px; border: 1px solid var(--line-dark); font-size: 9px; font-style: normal; }
.project-title h2 { max-width: 900px; margin: 22px 0 10px; font-family: var(--font-ui); font-size: clamp(30px, 4vw, 52px); font-weight: 500; line-height: 1.15; letter-spacing: -.025em; }
.project-title > p { max-width: 760px; margin: 0; color: var(--ink-soft); }
.project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.project-tags > span:not(.status) { padding: 4px 7px; border: 1px solid var(--line-dark); font-size: 10px; }
.project-score { display: grid; align-content: center; padding: 32px; }
.project-score > small { color: var(--muted); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.project-score > strong { margin: 8px 0 15px; font-family: var(--font-ui); font-size: 64px; font-weight: 400; line-height: 1; }
.project-score sup { font-size: 22px; }
.project-score > div { height: 5px; background: var(--line); }
.project-score > div i { display: block; height: 100%; background: var(--accent); }
.project-score dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 0; }
.project-score dl div { display: grid; }
.project-score dt { color: var(--muted); font-size: 9px; }
.project-score dd { margin: 0; font-weight: 800; }
.project-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 calc(clamp(18px, 3vw, 44px) * -1) 24px; padding: 11px clamp(18px, 3vw, 44px); border-bottom: 1px solid var(--line); background: #e9e6df; }
.anchor-nav { display: flex; flex-wrap: wrap; gap: 18px; }
.anchor-nav a { color: var(--ink-soft); font-size: 11px; font-weight: 800; }
.timeline-panel { margin-bottom: 18px; padding: 22px; }
.phase-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); overflow-x: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.phase { min-height: 125px; position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 18px 15px 22px; border-right: 1px solid var(--line); }
.phase > span { font-family: var(--font-ui); color: var(--line-dark); font-size: 18px; }
.phase div { display: grid; align-content: start; }
.phase strong { font-size: 12px; line-height: 1.45; }
.phase small { margin-top: 7px; color: var(--muted); font-size: 9px; }
.phase > i { position: absolute; left: 0; bottom: 0; width: var(--phase-progress); height: 4px; background: var(--accent); }
.phase.completed { background: #f2f7f4; }
.phase.overdue { background: var(--danger-soft); }
.project-content-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .6fr); gap: 18px; align-items: start; }
.task-panel { min-width: 0; padding: 22px; }
.task-tree { border-top: 1px solid var(--line); }
.task-row { border-bottom: 1px solid var(--line); }
.task-row.level-2 { margin-left: 22px; }
.task-row.level-3 { margin-left: 48px; }
.task-row.heading { background: #f1eee8; }
.task-line { min-height: 66px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 105px auto 32px; align-items: center; gap: 10px; padding: 10px 5px; }
.task-code { font-family: var(--font-ui); color: var(--muted); }
.task-name { min-width: 0; display: grid; }
.task-name strong { line-height: 1.4; }
.task-name small { color: var(--muted); font-size: 10px; }
.task-name small em { color: var(--danger); font-style: normal; font-weight: 800; }
.weight-label { padding: 3px 6px; border: 1px solid var(--line-dark); font-size: 9px; font-weight: 800; }
.task-mini-progress { display: grid; grid-template-columns: 34px 1fr; gap: 5px; align-items: center; }
.task-mini-progress b { font-size: 10px; }
.task-mini-progress i { height: 3px; background: var(--line); }
.task-mini-progress em { display: block; height: 100%; background: var(--ink); }
.task-expand { width: 30px; height: 30px; border: 0; background: transparent; transition: transform .16s; }
.task-expand.open { transform: rotate(180deg); }
.task-detail { display: none; padding: 0 8px 18px 62px; }
.task-detail.open { display: block; }
.task-detail-grid { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.5fr); gap: 20px; padding: 18px; border-left: 2px solid var(--ink); background: #ebe8e2; }
.task-detail dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.task-detail dt { color: var(--muted); font-size: 9px; }
.task-detail dd { margin: 0; font-size: 11px; font-weight: 700; }
.task-note { padding: 10px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); font-size: 11px; }
.task-update-form { padding-bottom: 15px; border-bottom: 1px solid var(--line-dark); }
.task-actions { display: flex; gap: 6px; margin-top: 12px; }
.document-quick-upload { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr) minmax(140px, .8fr) auto; gap: 8px; align-items: end; margin-top: 14px; }
.project-side { display: grid; gap: 18px; }
.documents-panel, .members-panel { padding: 20px; }
.document-list > div { display: grid; grid-template-columns: 42px minmax(0, 1fr) 28px 32px; align-items: center; gap: 9px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.file-ext { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-dark); font-size: 8px; font-weight: 900; }
.document-list p { min-width: 0; display: grid; margin: 0; }
.document-list p strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.document-list p small, .document-list p em { color: var(--muted); font-size: 9px; font-style: normal; }
.document-list > div > a, .version-button { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line-dark); background: transparent; font-size: 10px; }
.member-list > div { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.member-list p { display: grid; margin: 0; }
.member-list p strong { font-size: 11px; }
.member-list p small { color: var(--muted); font-size: 9px; }
.member-list form button { border: 0; background: transparent; color: var(--danger); }
.member-add-form { display: grid; grid-template-columns: 1fr 90px 38px; gap: 6px; align-items: end; margin-top: 12px; }
.app-dialog { width: min(680px, calc(100vw - 30px)); max-height: calc(100vh - 34px); overflow: auto; padding: 0; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--surface); }
.app-dialog::backdrop { background: rgba(15,15,14,.58); }
.app-dialog form { padding: 22px; }
.dialog-head { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin: 0; font-family: var(--font-ui); font-weight: 500; }
.dialog-head > button { width: 32px; height: 32px; border: 1px solid var(--line-dark); background: transparent; }
.calendar-panel { padding: 20px; overflow: hidden; }
.calendar-head { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; text-align: center; margin-bottom: 14px; }
.calendar-head > a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-dark); }
.calendar-head h2 { margin: 0; font-family: var(--font-ui); font-size: 27px; font-weight: 500; }
.calendar-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; margin-bottom: 10px; color: var(--muted); font-size: 10px; }
.calendar-legend span { display: flex; align-items: center; gap: 5px; }
.calendar-legend i { width: 9px; height: 9px; display: inline-block; border: 1px solid var(--line-dark); }
.calendar-legend i.start { background: #e8eee7; }
.calendar-legend i.due { background: #e7edf2; }
.calendar-legend i.overdue { background: var(--danger-soft); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); min-width: 790px; border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }
.calendar-weekday { padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #e9e6df; color: var(--muted); font-size: 10px; font-weight: 800; text-align: center; }
.calendar-day { min-height: 142px; padding: 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.calendar-day.outside { background: #efede8; color: #aaa49c; }
.calendar-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.calendar-day header { display: flex; justify-content: space-between; margin-bottom: 5px; }
.calendar-day header span { font-family: var(--font-ui); }
.calendar-day header b { min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 9px; background: var(--ink); color: #fff; font-size: 8px; }
.calendar-events { display: grid; gap: 4px; }
.event { display: grid; padding: 5px 6px; border-left: 3px solid var(--accent); background: #f3f1ed; }
.event.start { background: #eef2ed; }
.event.due { background: #edf1f4; }
.event.overdue { background: var(--danger-soft); border-left-color: var(--danger); }
.event small { color: var(--muted); font-size: 7px; font-weight: 900; }
.event strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.event em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 8px; font-style: normal; }
.more-events { color: var(--muted); font-size: 9px; }
.segmented { display: flex; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 1px solid var(--ink); }
.segmented a { padding: 9px 14px; border: 1px solid transparent; border-bottom: 0; color: var(--muted); font-weight: 700; }
.segmented a.active { border-color: var(--ink); background: var(--surface); color: var(--ink); }
.notification-list { display: grid; gap: 8px; }
.notification-item { display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 105px; padding: 18px; border: 1px solid var(--line); background: var(--surface); }
.notification-item.read { opacity: .72; }
.notification-signal { align-self: stretch; background: var(--line-dark); }
.type-warning .notification-signal { background: var(--warning); }
.type-critical .notification-signal { background: var(--critical); }
.type-overdue .notification-signal { background: var(--danger); }
.notification-item small { color: var(--muted); font-size: 9px; }
.notification-item h2 { margin: 3px 0; font-family: var(--font-ui); font-size: 18px; font-weight: 500; }
.notification-item p { margin: 0; color: var(--ink-soft); }
.notification-item > div:last-child { display: flex; align-items: center; gap: 4px; }
.notification-item form { margin: 0; }
.settings-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .6fr); gap: 18px; align-items: start; }
.settings-split > .panel { padding: 20px; }
.master-list > a { display: grid; grid-template-columns: 8px minmax(0, 1fr) 48px 72px; align-items: center; gap: 10px; min-height: 62px; border-top: 1px solid var(--line); }
.master-list > a:hover { background: #f1eee8; }
.master-list i { width: 6px; height: 26px; background: var(--accent); }
.master-list div { display: grid; }
.master-list strong { font-size: 12px; }
.master-list small { color: var(--muted); font-size: 9px; }
.master-list > a > span { font-family: var(--font-ui); font-size: 19px; text-align: right; }
.master-list > a > em { color: var(--muted); font-size: 9px; font-style: normal; text-align: right; }
.editor-side form { display: grid; gap: 13px; }
.workflow-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; }
.workflow-nav { display: grid; gap: 6px; }
.workflow-nav a { display: grid; padding: 13px 14px; border: 1px solid var(--line); background: var(--surface); }
.workflow-nav a.active { border-color: var(--ink); border-left: 5px solid var(--accent); }
.workflow-nav small, .workflow-nav span { color: var(--muted); font-size: 9px; }
.workflow-editor { padding: 22px; }
.weight-audit { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--line-dark); }
.weight-audit strong { grid-row: span 2; font-family: var(--font-ui); font-size: 27px; }
.weight-audit p { margin: 0; color: var(--muted); font-size: 10px; }
.weight-audit.valid { border-left: 4px solid var(--success); background: var(--success-soft); }
.weight-audit.warning { border-left: 4px solid var(--warning); background: var(--warning-soft); }
.template-task-list { border-top: 1px solid var(--line); }
.template-task-list > div { display: grid; grid-template-columns: 55px minmax(0, 1fr) 70px 28px; align-items: center; gap: 9px; min-height: 54px; border-bottom: 1px solid var(--line); }
.template-task-list > div.level-2 { margin-left: 22px; }
.template-task-list > div.level-3 { margin-left: 45px; }
.template-task-list p { display: grid; margin: 0; }
.template-task-list small { color: var(--muted); font-size: 9px; }
.template-task-list > div > b { text-align: right; }
.template-task-list button { border: 0; background: transparent; color: var(--danger); }
.template-task-add { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--ink); }
.users-layout { grid-template-columns: minmax(0, 1.6fr) minmax(310px, .6fr); }
.user-table article { display: grid; grid-template-columns: 38px minmax(0, 1fr) 80px 140px 42px 82px; align-items: center; gap: 9px; min-height: 66px; border-top: 1px solid var(--line); }
.user-table article.inactive { opacity: .55; }
.user-table article > div { display: grid; }
.user-table article small { color: var(--muted); font-size: 9px; }
.user-table article > b { font-size: 10px; }
.user-table article > p { display: flex; gap: 8px; margin: 0; color: var(--muted); font-size: 9px; }
.user-table article > a { font-size: 10px; text-decoration: underline; }
.user-table article form button { width: 78px; padding: 4px; border: 1px solid var(--line-dark); background: transparent; font-size: 9px; }
.user-table article form button.deactivate { color: var(--danger); }
.user-table article form button.activate { color: var(--success); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 10px 12px; border-bottom: 1px solid var(--ink); background: #e9e6df; color: var(--muted); font-size: 9px; text-align: left; text-transform: uppercase; }
.data-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data-table td strong, .data-table td small { display: block; }
.data-table td small { color: var(--muted); font-size: 9px; }
.profile-layout { display: grid; grid-template-columns: minmax(260px, .55fr) minmax(0, 1.3fr); gap: 18px; }
.profile-intro { min-height: 480px; padding: 35px; border-top: 1px solid var(--ink); background: #e5e1da; }
.profile-intro h2 { margin: 18px 0 4px; font-family: var(--font-ui); font-size: 32px; font-weight: 500; }
.profile-intro > p:not(.eyebrow) { margin: 0; color: var(--muted); }
.profile-intro dl { margin: 35px 0 0; border-top: 1px solid var(--line-dark); }
.profile-intro dl div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-dark); }
.profile-intro dt { color: var(--muted); font-size: 10px; }
.profile-intro dd { margin: 0; font-size: 11px; font-weight: 700; }
.profile-form { display: grid; gap: 14px; padding: 28px; }
.profile-form hr { width: 100%; border: 0; border-top: 1px solid var(--line); }
.profile-form h3 { margin: 6px 0 0; font-family: var(--font-ui); font-size: 20px; font-weight: 500; }
.profile-form > p { margin: -8px 0 4px; color: var(--muted); }
.system-check { padding: 24px; }
.system-check .section-heading > strong { font-family: var(--font-ui); font-size: 32px; }
.check-list { border-top: 1px solid var(--line); }
.check-list > div { display: grid; grid-template-columns: 34px minmax(0, 1fr) 80px; align-items: center; gap: 10px; min-height: 58px; border-bottom: 1px solid var(--line); }
.check-list > div > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid; border-radius: 50%; font-weight: 900; }
.check-list span.ok { color: var(--success); }
.check-list span.bad { color: var(--danger); }
.check-list p { display: grid; margin: 0; }
.check-list small { color: var(--muted); font-size: 9px; }
.check-list > div > b { font-size: 10px; text-align: right; }
.security-note { margin-top: 22px; padding: 18px; border-left: 4px solid var(--accent); background: #ebe8e2; }
.security-note h3 { margin: 0 0 5px; font-family: var(--font-ui); font-weight: 500; }
.security-note p { margin: 0; color: var(--ink-soft); }
.login-body, .install-body { min-height: 100vh; background: #e9e6df; }
.login-shell, .install-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(410px, .75fr); }
.login-editorial, .install-intro { position: relative; display: grid; align-content: center; padding: clamp(38px, 7vw, 110px); border-right: 1px solid var(--ink); background: var(--paper); }
.login-editorial::before, .install-intro::before { content: ""; position: absolute; left: clamp(38px, 7vw, 110px); top: 0; width: 1px; height: 25%; background: var(--ink); }
.login-editorial h1, .install-intro h1 { max-width: 760px; margin: 24px 0 15px; font-family: var(--font-ui); font-size: clamp(44px, 6vw, 82px); font-weight: 400; line-height: 1.02; letter-spacing: -.045em; }
.login-lead, .install-intro > p { max-width: 680px; color: var(--ink-soft); font-size: clamp(15px, 1.5vw, 18px); }
.login-rule { width: 120px; height: 5px; margin: 32px 0; background: var(--accent); }
.login-editorial dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 800px; margin: 0; }
.login-editorial dl div { padding-top: 12px; border-top: 1px solid var(--line-dark); }
.login-editorial dt { font-family: var(--font-ui); color: var(--muted); }
.login-editorial dd { margin: 7px 0 0; font-weight: 700; }
.login-panel, .install-panel { display: grid; align-content: center; padding: clamp(28px, 5vw, 74px); background: #fff; }
.login-language { position: absolute; right: 26px; top: 22px; display: flex; border: 1px solid var(--line-dark); }
.login-language a { padding: 7px 10px; opacity: .45; font-size: 11px; }
.login-language a.active { opacity: 1; background: #e9e6df; }
.login-form-wrap { width: min(100%, 420px); margin: auto; }
.login-form-wrap h2, .install-panel h2, .success-panel h2 { margin: 0; font-family: var(--font-ui); font-size: 35px; font-weight: 500; }
.login-form-wrap > p { margin: 5px 0 22px; color: var(--muted); }
.login-form-wrap form { display: grid; gap: 15px; }
.password-field { position: relative; }
.password-field button { position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; border: 0; background: transparent; }
.login-panel footer { width: min(100%, 420px); margin: 45px auto 0; color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.requirement-list { max-width: 620px; margin-top: 28px; border-top: 1px solid var(--line-dark); }
.requirement-list div { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); }
.requirement-list strong { font-size: 10px; }
.requirement-list .ok { color: var(--success); }
.requirement-list .bad { color: var(--danger); }
.install-note { padding-left: 14px; border-left: 4px solid var(--accent); font-size: 12px !important; }
.install-panel { align-content: start; overflow-y: auto; }
.install-panel > h2 { margin-bottom: 18px; }
.install-panel form { display: grid; gap: 18px; }
.install-panel fieldset { margin: 0; padding: 17px; border: 1px solid var(--line); }
.install-panel legend { padding: 0 7px; font-weight: 800; }
.success-panel { align-self: center; }
.success-panel p { color: var(--muted); }
.is-loading::after { content: "…"; margin-left: 5px; }
@media (max-width: 1180px) {
  :root { --sidebar-width: 226px; }
  .metrics-band { grid-template-columns: repeat(5, minmax(120px, 1fr)); overflow-x: auto; }
  .metrics-band article { min-width: 150px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .project-content-grid { grid-template-columns: 1fr; }
  .project-side { grid-template-columns: 1fr 1fr; }
  .task-line { grid-template-columns: 46px minmax(0, 1fr) auto 90px 32px; }
  .task-line .status { display: none; }
  .filter-bar { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .filter-search { grid-column: span 2; }
  .workflow-layout { grid-template-columns: 240px 1fr; }
  .user-table article { grid-template-columns: 38px minmax(0, 1fr) 70px 100px 40px 78px; }
}
@media (max-width: 900px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; transform: translateX(-105%); width: min(320px, 88vw); transition: transform .2s; }
  .sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-overlay { position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,.5); }
  .sidebar-open .sidebar-overlay { display: block; }
  .sidebar-close, .menu-button { display: grid; place-items: center; }
  .topbar { min-height: 76px; padding-top: 12px; padding-bottom: 12px; }
  .topbar > div:first-of-type { flex: 1; }
  .topbar h1 { font-size: 24px; }
  .profile-chip b { display: none; }
  .content { padding-top: 22px; }
  .project-hero { margin-top: -22px; }
  .project-lines > a { grid-template-columns: 36px minmax(0, 1fr) 130px; }
  .project-lines > a > .status { display: none; }
  .project-hero { grid-template-columns: 1fr; }
  .project-title { border-right: 0; border-bottom: 1px solid var(--line); }
  .project-score { grid-template-columns: 1fr auto; align-items: center; }
  .project-score > div, .project-score dl { grid-column: 1 / -1; }
  .project-score > strong { font-size: 48px; }
  .form-section { grid-template-columns: 1fr; }
  .settings-split, .workflow-layout, .users-layout, .profile-layout { grid-template-columns: 1fr; }
  .workflow-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login-shell, .install-shell { grid-template-columns: 1fr; }
  .login-editorial, .install-intro { min-height: 58vh; border-right: 0; border-bottom: 1px solid var(--ink); }
  .login-panel, .install-panel { min-height: 500px; }
  .login-editorial dl { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  body { font-size: 13px; }
  .topbar { gap: 10px; }
  .topbar .eyebrow, .profile-chip { display: none; }
  .top-actions { gap: 5px; }
  .language-switch a { width: 31px; height: 34px; }
  .notification-button { width: 35px; height: 35px; }
  .content { padding-left: 12px; padding-right: 12px; }
  .page-toolbar { flex-direction: column; align-items: stretch; }
  .page-toolbar > .button { align-self: flex-start; }
  .metrics-band { margin-left: -12px; margin-right: -12px; }
  .priority-panel, .portfolio-panel, .project-overview, .activity-panel, .task-panel, .timeline-panel { padding: 15px; }
  .priority-row { grid-template-columns: 45px minmax(0, 1fr); }
  .priority-date { width: 42px; }
  .urgency-label { grid-column: 2; width: max-content; }
  .project-lines > a { grid-template-columns: 27px minmax(0, 1fr); padding: 10px 0; }
  .project-progress { grid-column: 2; width: 140px; }
  .work-card-link { grid-template-columns: 35px minmax(0, 1fr); padding: 14px; }
  .work-progress { grid-column: 2; justify-items: start; grid-template-columns: auto auto auto; gap: 8px; }
  .progress-ring { width: 36px; height: 36px; border-width: 4px; }
  .progress-ring span { width: 22px; height: 22px; }
  .filter-bar, .filter-bar.compact { grid-template-columns: 1fr; margin-left: -12px; margin-right: -12px; }
  .filter-search { grid-column: auto; }
  .form-grid.two, .form-grid.three { grid-template-columns: 1fr; }
  .span-2, .span-3 { grid-column: auto; }
  .form-section { padding: 18px 15px; }
  .project-hero, .project-toolbar { margin-left: -12px; margin-right: -12px; }
  .project-title { padding: 30px 18px; }
  .project-title h2 { font-size: 31px; }
  .project-score { padding: 22px 18px; }
  .project-toolbar { align-items: flex-start; flex-direction: column; }
  .anchor-nav { gap: 11px; }
  .task-row.level-2 { margin-left: 10px; }
  .task-row.level-3 { margin-left: 20px; }
  .task-line { grid-template-columns: 42px minmax(0, 1fr) auto 30px; gap: 5px; }
  .task-line .weight-label, .task-mini-progress { display: none; }
  .task-detail { padding-left: 18px; }
  .task-detail-grid { grid-template-columns: 1fr; padding: 12px; }
  .document-quick-upload { grid-template-columns: 1fr; }
  .project-side { grid-template-columns: 1fr; }
  .calendar-panel { overflow-x: auto; }
  .notification-item { grid-template-columns: 5px minmax(0, 1fr); }
  .notification-item > div:last-child { grid-column: 2; }
  .master-list > a { grid-template-columns: 8px minmax(0, 1fr) 42px; }
  .master-list > a > em { display: none; }
  .workflow-nav { grid-template-columns: 1fr; }
  .template-task-list > div { grid-template-columns: 42px minmax(0, 1fr) 50px 24px; }
  .user-table article { grid-template-columns: 38px minmax(0, 1fr) auto; padding: 10px 0; }
  .user-table article > p { grid-column: 2 / -1; }
  .user-table article > a { grid-column: 2; }
  .user-table article form { grid-column: 3; }
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr { padding: 10px; border-bottom: 1px solid var(--line-dark); }
  .data-table td { display: grid; grid-template-columns: 100px 1fr; gap: 10px; border: 0; padding: 4px; }
  .data-table td::before { content: attr(data-label); color: var(--muted); font-size: 9px; font-weight: 800; }
  .login-editorial, .install-intro { padding: 54px 22px 40px; }
  .login-editorial::before, .install-intro::before { left: 22px; }
  .login-editorial h1, .install-intro h1 { font-size: 43px; }
  .login-panel, .install-panel { padding: 55px 22px 35px; }
  .login-language { right: 12px; top: 12px; }
}
.toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.backup-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.backup-options > .panel { min-height: 250px; padding: 26px; }
.backup-options h2 { margin: 0 0 10px; font-family: var(--font-ui); font-size: 25px; font-weight: 500; }
.backup-options p:not(.eyebrow) { color: var(--ink-soft); }
.backup-options form { margin-top: 25px; }
.disabled-option { opacity: .68; }
.deleted-list { display: grid; gap: 8px; }
.deleted-list article { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px; padding: 18px; border: 1px solid var(--line); background: var(--surface); }
.deleted-list h2 { margin: 4px 0; font-family: var(--font-ui); font-size: 19px; font-weight: 500; }
.deleted-list small, .deleted-list p { margin: 0; color: var(--muted); font-size: 10px; }
@media (max-width: 680px) { .backup-options { grid-template-columns: 1fr; } .deleted-list article { grid-template-columns: 1fr; } .toolbar-actions { width: 100%; } }

/* ========================================================================== 
   UI refinement v1.0.2
   - Solid sticky header (fixes transparent content while scrolling)
   - Reliable SVG notification and language icons
   - Readable system typography
   - Google-inspired neutral surfaces and spacing
   - Dashboard hierarchy: Active Work first, Portfolio Mix below
   ========================================================================== */
:root {
  --ink: #1f1f1f;
  --ink-soft: #3c4043;
  --muted: #5f6368;
  --paper: #f6f8fc;
  --canvas: #ffffff;
  --surface: #ffffff;
  --white: #ffffff;
  --line: #e0e3e7;
  --line-dark: #c7cdd4;
  --accent: #0b57d0;
  --accent-soft: #e8f0fe;
  --warning: #9a5b00;
  --warning-soft: #fff4d8;
  --critical: #b06000;
  --critical-soft: #fce8d5;
  --danger: #b3261e;
  --danger-soft: #f9dedc;
  --success: #146c43;
  --success-soft: #dff3e7;
  --info: #0b57d0;
  --sidebar: #f8fafd;
  --sidebar-line: #e0e3e7;
  --sidebar-text: #3c4043;
  --radius: 12px;
  --radius-small: 8px;
  --sidebar-width: 252px;
  --content-max: 1600px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", "Leelawadee UI", Tahoma, Arial, sans-serif;
}

html { background: var(--paper); }
body {
  color: var(--ink);
  background: var(--paper);
  font-size: clamp(14px, .18vw + 13.4px, 15.5px);
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font-family: inherit; }

h1, h2, h3, h4, h5, h6,
.topbar h1,
.section-heading h2,
.form-section-title h2,
.metrics-band article > span,
.metrics-band strong,
.priority-date b,
.type-list > div > div b,
.project-index,
.project-progress b,
.work-seq,
.work-copy h2,
.work-progress > strong,
.project-title h2,
.project-score > strong,
.phase > span,
.task-code,
.dialog-head h2,
.calendar-head h2,
.calendar-day header span,
.notification-item h2,
.master-list > a > span,
.weight-audit strong,
.profile-intro h2,
.profile-form h3,
.system-check .section-heading > strong,
.security-note h3,
.login-editorial h1,
.install-intro h1,
.login-form-wrap h2,
.install-panel h2,
.success-panel h2,
.backup-options h2,
.deleted-list h2 {
  font-family: inherit;
}

.ui-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex: 0 0 auto;
}

.icon-button {
  align-items: center;
  justify-content: center;
  padding: 0;
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app-shell { background: var(--paper); }
.workspace { min-width: 0; background: var(--paper); }

.sidebar {
  color: var(--sidebar-text);
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-line);
}
.sidebar-head {
  min-height: 82px;
  padding: 16px 20px;
  border-bottom-color: var(--sidebar-line);
}
.brand-mark {
  width: 38px;
  height: 38px;
  border-color: #9aa0a6;
  border-radius: 8px;
  color: #0b57d0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .12);
}
.brand strong { color: #202124; font-size: 13px; font-weight: 700; }
.brand small { color: #777c83; }
.main-nav { padding: 16px 12px; }
.nav-link {
  min-height: 44px;
  margin-bottom: 4px;
  padding: 9px 12px;
  border-left: 0;
  border-radius: 22px;
  color: #4b5056;
  transition: background .16s ease, color .16s ease;
}
.nav-link b { color: #8a9097; }
.nav-link:hover { color: #202124; background: #edf2f7; }
.nav-link.active {
  color: #0b57d0;
  background: #dbe8fb;
  border-left-color: transparent;
}
.nav-link.active b { color: #0b57d0; }
.nav-link em { background: #b3261e; }
.nav-group summary {
  min-height: 44px;
  border-radius: 22px;
  color: #4b5056;
}
.nav-group summary:hover { background: #edf2f7; }
.nav-group[open] summary { color: #202124; background: #edf2f7; }
.nav-group summary i { display: grid; place-items: center; transition: transform .16s ease; }
.nav-group summary i .ui-icon { width: 17px; height: 17px; }
.nav-group[open] summary i { transform: rotate(180deg); }
.nav-sub { padding: 5px 0 3px 23px; }
.nav-sub .nav-link { border-radius: 18px; }
.sidebar-foot { border-top-color: var(--sidebar-line); }
.user-mini strong { color: #202124; }
.user-mini small, .signout { color: #666b72; }
.signout { display: inline-flex; align-items: center; gap: 5px; }
.signout .ui-icon { width: 14px; height: 14px; }
.signout:hover { color: #0b57d0; }

.topbar {
  min-height: 82px;
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 14px clamp(18px, 2.7vw, 42px);
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .08);
  isolation: isolate;
}
.topbar-title { min-width: 0; flex: 1; }
.topbar h1 {
  font-size: clamp(23px, 1.45vw + 9px, 32px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.topbar .eyebrow { margin-bottom: 4px; color: #747a80; }
.menu-button,
.sidebar-close {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
}
.top-actions { gap: 9px; }
.notification-button {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #3c4043;
  background: #fff;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.notification-button:hover {
  color: #0b57d0;
  border-color: #b8c9e6;
  background: #edf4ff;
}
.notification-button .ui-icon { width: 20px; height: 20px; }
.notification-button span {
  right: -4px;
  top: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 11px;
  background: #b3261e;
  font-size: 9px;
}
.language-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafd;
}
.language-switch a {
  width: 42px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  opacity: .58;
  filter: none;
  transition: opacity .15s ease, background .15s ease, box-shadow .15s ease;
}
.language-switch a:hover { opacity: 1; background: #eef3f8; }
.language-switch a.active {
  opacity: 1;
  background: #fff;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .22);
}
.flag-svg {
  width: 25px;
  height: 17px;
  display: block;
  border-radius: 2px;
  overflow: hidden;
}
.profile-chip {
  min-height: 42px;
  padding: 4px 11px 4px 4px;
  border-color: var(--line);
  border-radius: 22px;
  background: #fff;
}
.profile-chip span { background: #202124; }
.profile-chip b { font-size: 12px; }

.content {
  width: min(100%, var(--content-max));
  padding: 28px clamp(18px, 2.7vw, 42px) 72px;
}
.page-toolbar { margin-bottom: 20px; }
.page-toolbar p { font-size: 14px; color: var(--ink-soft); }
.inline-filter label { font-size: 12px; }
input, select, textarea {
  min-height: 42px;
  border-color: var(--line-dark);
  border-radius: 8px;
  color: #202124;
  background: #fff;
}
input:focus, select:focus, textarea:focus {
  border-color: #0b57d0;
  box-shadow: 0 0 0 3px rgba(11, 87, 208, .12);
}

.panel {
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(60, 64, 67, .08), 0 1px 3px 1px rgba(60, 64, 67, .04);
}
.section-heading { margin-bottom: 18px; }
.section-heading h2 {
  font-size: clamp(20px, .65vw + 15px, 25px);
  font-weight: 650;
  letter-spacing: -.018em;
}
.section-heading p:not(.eyebrow) { font-size: 13px; }
.eyebrow { font-size: 10px; letter-spacing: .13em; }
.button { border-radius: 8px; }
.button.primary { background: #0b57d0; border-color: #0b57d0; }
.button.primary:hover { background: #0842a0; border-color: #0842a0; }
.button.secondary { border-color: var(--line); }
.button.text { color: #0b57d0; }

.metrics-band {
  grid-template-columns: 1.05fr 1.25fr repeat(3, minmax(130px, .86fr));
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .08), 0 1px 3px 1px rgba(60, 64, 67, .04);
}
.metrics-band article {
  min-height: 132px;
  padding: 18px 18px 15px;
  border-right-color: var(--line);
}
.metrics-band article > span { color: #a4a8ad; font-size: 15px; font-weight: 600; }
.metrics-band p { margin-bottom: 12px; color: #62676d; font-size: 10px; }
.metrics-band strong { font-size: clamp(33px, 2.3vw, 42px); font-weight: 650; letter-spacing: -.035em; }
.metrics-band small { margin-top: 9px; font-size: 11px; }
.metrics-band .metric-warning { background: #fffaf0; }
.metrics-band .metric-critical { background: #fff5ed; }
.metrics-band .metric-overdue { color: #a52a24; background: #fff1f0; }
.micro-progress { height: 4px; border-radius: 2px; background: #e5e8ec; overflow: hidden; }
.micro-progress i { border-radius: inherit; background: #0b57d0; }

.dashboard-primary {
  margin-bottom: 20px;
  padding: 24px;
  border-top: 3px solid #0b57d0;
}
.dashboard-section-heading { align-items: center; }
.overview-heading-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.overview-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafd;
}
.overview-sort .sort-icon { color: #5f6368; }
.overview-sort .sort-icon .ui-icon { width: 18px; height: 18px; }
.overview-sort label { min-width: 210px; gap: 1px; color: #5f6368; font-size: 10px; font-weight: 650; }
.overview-sort select {
  min-height: 27px;
  padding: 0 28px 0 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  color: #202124;
  font-size: 12px;
  font-weight: 650;
}
.overview-sort select:focus { box-shadow: none; }

.project-lines { border-top-color: var(--line); }
.project-lines > a {
  grid-template-columns: 44px minmax(0, 1fr) minmax(155px, 190px) minmax(128px, 150px);
  min-height: 78px;
  padding: 4px 8px;
  border-bottom-color: var(--line);
  border-radius: 8px;
  transition: background .14s ease, transform .14s ease;
}
.project-lines > a:hover { background: #f5f8fc; transform: translateX(2px); }
.project-index { color: #9aa0a6; font-size: 16px; font-weight: 650; }
.project-main small { font-size: 10px; }
.project-main strong { font-size: 14px; font-weight: 700; }
.project-main em { font-size: 11px; }
.project-progress { grid-template-columns: 45px 1fr; }
.project-progress b { font-size: 13px; font-weight: 700; }
.project-progress i { height: 5px; border-radius: 3px; overflow: hidden; background: #e4e8ed; }
.project-progress em { border-radius: inherit; background: var(--accent); }
.status { border-radius: 999px; padding: 4px 9px; font-size: 10px; }

.dashboard-secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 20px;
}
.priority-panel, .portfolio-panel, .activity-panel { padding: 24px; }
.priority-row {
  min-height: 70px;
  padding: 10px 4px;
  border-bottom-color: var(--line);
  border-radius: 8px;
}
.priority-row:hover { background: #f6f9fc; }
.priority-date {
  width: 48px;
  min-height: 48px;
  border-color: var(--line-dark);
  border-radius: 8px;
  background: #fff;
}
.priority-date b { font-size: 19px; font-weight: 700; }
.priority-copy strong { font-size: 13px; }
.priority-copy small, .priority-copy em { font-size: 10px; }
.urgency-label { border-radius: 999px; }
.activity-stream p { font-size: 12px; }
.activity-stream time { font-size: 10px; }

.dashboard-bottom { margin-bottom: 20px; }
.portfolio-panel .section-heading { margin-bottom: 10px; }
.type-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 18px;
  border-top: 1px solid var(--line);
}
.type-list > div {
  min-height: 78px;
  grid-template-columns: 10px minmax(0, 1fr) 92px;
  padding: 14px 4px;
  border-bottom-color: var(--line);
}
.type-dot { width: 6px; height: 28px; border-radius: 3px; background: var(--accent); }
.type-list p strong { font-size: 12px; }
.type-list p small { font-size: 10px; }
.type-list > div > div b { font-size: 15px; font-weight: 700; }
.type-list > div > div i { height: 4px; border-radius: 2px; overflow: hidden; background: #e4e8ed; }
.type-list > div > div em { border-radius: inherit; background: var(--accent); }

.empty-state { border-radius: 10px; background: #fbfcfe; }

@media (max-width: 1180px) {
  :root { --sidebar-width: 226px; }
  .metrics-band { grid-template-columns: repeat(5, minmax(145px, 1fr)); }
  .dashboard-secondary-grid { grid-template-columns: 1fr; }
  .type-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .topbar { min-height: 74px; }
  .topbar h1 { font-size: 23px; }
  .sidebar { box-shadow: 8px 0 28px rgba(32, 33, 36, .18); }
  .dashboard-section-heading { align-items: flex-start; }
  .overview-heading-actions { width: 100%; justify-content: flex-start; }
  .project-lines > a { grid-template-columns: 36px minmax(0, 1fr) 140px; }
}

@media (max-width: 680px) {
  body { font-size: 14px; }
  .topbar { padding-left: 12px; padding-right: 12px; }
  .topbar .eyebrow { display: none; }
  .topbar h1 { font-size: 20px; }
  .top-actions { gap: 5px; }
  .notification-button { width: 38px; height: 38px; }
  .language-switch { padding: 2px; }
  .language-switch a { width: 34px; height: 32px; }
  .flag-svg { width: 22px; height: 15px; }
  .profile-chip { display: none; }
  .content { padding: 18px 12px 58px; }
  .page-toolbar { margin-bottom: 16px; }
  .metrics-band {
    margin-left: 0;
    margin-right: 0;
    grid-template-columns: repeat(5, minmax(142px, 1fr));
    border-radius: 10px;
  }
  .metrics-band article { min-height: 118px; }
  .dashboard-primary, .priority-panel, .portfolio-panel, .activity-panel { padding: 16px; }
  .dashboard-section-heading { display: grid; }
  .overview-heading-actions { display: grid; grid-template-columns: 1fr auto; align-items: end; }
  .overview-sort { min-width: 0; }
  .overview-sort label { min-width: 0; }
  .project-lines > a {
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 11px 3px;
    transform: none;
  }
  .project-progress { grid-column: 2; width: min(180px, 100%); }
  .type-list { grid-template-columns: 1fr; }
  .type-list > div { grid-template-columns: 10px minmax(0, 1fr) 82px; }
}

@media (max-width: 420px) {
  .topbar-title { max-width: calc(100vw - 190px); }
  .topbar h1 { font-size: 18px; }
  .notification-button { width: 36px; height: 36px; }
  .language-switch a { width: 31px; }
  .overview-heading-actions { grid-template-columns: 1fr; }
  .overview-heading-actions .button { justify-self: start; }
}

/* ========================================================================== 
   v1.0.3 — Project workspace readability and stable navigation
   ========================================================================== */

:root {
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", "Leelawadee UI", Tahoma, Arial, sans-serif;
  --paper: #f5f7fa;
  --surface: #ffffff;
  --line: #dfe3e8;
  --line-dark: #c8cdd3;
  --ink: #202124;
  --ink-soft: #4b5157;
  --muted: #6f757b;
}

html {
  scrollbar-gutter: stable;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-ui);
}

body {
  font-size: clamp(14px, .13vw + 13.5px, 15px);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background: var(--paper);
}

h1,
h2,
h3,
h4,
h5,
h6,
.topbar h1,
.section-heading h2,
.empty-state span,
.form-section-title > span,
.form-section-title h2,
.metrics-band article > span,
.metrics-band strong,
.priority-date b,
.type-list > div > div b,
.project-index,
.project-progress b,
.work-seq,
.work-copy h2,
.work-progress > strong,
.project-title h2,
.project-score > strong,
.phase > span,
.task-code,
.dialog-head h2,
.calendar-head h2,
.calendar-day header span,
.notification-item h2,
.master-list > a > span,
.weight-audit strong,
.profile-intro h2,
.profile-form h3,
.system-check .section-heading > strong,
.security-note h3,
.login-editorial h1,
.install-intro h1,
.login-editorial dt,
.login-form-wrap h2,
.install-panel h2,
.success-panel h2,
.backup-options h2,
.deleted-list h2 {
  font-family: var(--font-ui);
}

label {
  font-size: 13px;
  line-height: 1.45;
}

input,
select,
textarea {
  font-size: 14px;
}

select:not([multiple]) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 17px;
}

select:disabled {
  cursor: not-allowed;
  color: #777d83;
  background-color: #f2f4f6;
}

.eyebrow {
  font-size: 11px;
  letter-spacing: .11em;
}

.section-heading h2 {
  font-size: clamp(20px, .5vw + 16px, 24px);
  font-weight: 700;
  letter-spacing: -.015em;
}

.section-heading p:not(.eyebrow) {
  max-width: 760px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

/* Keep the desktop navigation physically fixed rather than sticky. This
   prevents the sidebar from recalculating its sticky endpoint at page bottom. */
.main-nav {
  min-height: 0;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.sidebar-foot {
  flex: 0 0 auto;
}

@media (min-width: 901px) {
  .app-shell {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .workspace {
    grid-column: 2;
    min-width: 0;
  }
}

/* Project overview */
.project-hero {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  min-height: 0;
  border-bottom-color: var(--line-dark);
  background: #fff;
}

.project-title {
  padding: clamp(30px, 3.1vw, 48px) clamp(28px, 4vw, 62px);
  border-right-color: var(--line);
}

.project-kicker {
  gap: 9px;
}

.project-kicker span {
  font-size: 12px;
  font-weight: 700;
}

.project-kicker b,
.project-kicker em {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 650;
}

.project-title h2 {
  max-width: 960px;
  margin: 18px 0 10px;
  font-size: clamp(29px, 2.5vw, 42px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.025em;
}

.project-title > p {
  max-width: 820px;
  font-size: 14px;
  line-height: 1.7;
}

.project-tags > span:not(.status) {
  border-radius: 999px;
  font-size: 11px;
}

.project-score {
  padding: 30px;
  background: #fbfcfe;
}

.project-score > small {
  font-size: 11px;
  letter-spacing: .08em;
}

.project-score > strong {
  margin: 9px 0 16px;
  font-size: clamp(48px, 4vw, 62px);
  font-weight: 650;
  letter-spacing: -.045em;
}

.project-score sup {
  font-size: .36em;
  font-weight: 650;
}

.project-score > div {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4e8ed;
}

.project-score > div i {
  border-radius: inherit;
}

.project-score dt {
  font-size: 11px;
}

.project-score dd {
  font-size: 13px;
}

.project-toolbar {
  position: sticky;
  top: 82px;
  z-index: 12;
  gap: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom-color: var(--line);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .06);
}

.project-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.anchor-nav {
  gap: 8px;
}

.anchor-nav a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 18px;
  color: #4f555b;
  font-size: 12px;
  font-weight: 650;
}

.anchor-nav a:hover {
  color: #0b57d0;
  background: #edf4ff;
}

#timeline,
#tasks,
#documents,
#members,
.task-row {
  scroll-margin-top: 145px;
}

/* Main process position: wrap stages inside the available viewport instead of
   creating a wide horizontal strip. */
.timeline-panel {
  margin-bottom: 20px;
  padding: 24px;
  overflow: hidden;
}

.phase-track {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  grid-auto-columns: unset;
  gap: 10px;
  overflow: visible;
  border: 0;
}

.phase {
  min-width: 0;
  min-height: 112px;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  padding: 15px 14px 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.phase:hover {
  border-color: #aac1e7;
  background: #f8fbff;
  box-shadow: 0 2px 6px rgba(60, 64, 67, .10);
}

.phase > span {
  color: #8a9096;
  font-size: 14px;
  font-weight: 700;
}

.phase strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.phase small {
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.45;
}

.phase > i {
  height: 5px;
  border-radius: 0 999px 999px 0;
}

.phase.completed {
  background: #f5faf7;
}

/* Give Process / Activity the full desktop width. Supporting information is
   placed below in two balanced panels. */
.project-content-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.project-side {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
  gap: 20px;
  align-items: start;
}

.task-panel,
.documents-panel,
.members-panel {
  padding: 24px;
}

.task-section-heading {
  align-items: flex-end;
}

.section-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.section-count {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.task-table-head,
.task-line {
  grid-template-columns: 64px minmax(280px, 1fr) 88px minmax(130px, 160px) minmax(120px, 145px) 40px;
}

.task-table-head {
  min-height: 42px;
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
  color: #686e74;
  background: #f7f9fb;
  font-size: 11px;
  font-weight: 700;
}

.task-table-head span:nth-child(3),
.task-table-head span:nth-child(4),
.task-table-head span:nth-child(5) {
  text-align: center;
}

.task-tree {
  border: 1px solid var(--line);
  border-radius: 0 0 9px 9px;
  background: #fff;
}

.task-row {
  margin-left: 0 !important;
  border-bottom-color: var(--line);
  background: #fff;
}

.task-row:last-child {
  border-bottom: 0;
}

.task-row.heading {
  background: #f5f8fc;
}

.task-row.heading .task-name strong {
  font-weight: 750;
}

.task-line {
  min-height: 72px;
  gap: 12px;
  padding: 11px 10px;
  transition: background .14s ease;
}

.task-row:not(.heading) .task-line:hover {
  background: #fafcff;
}

.task-code {
  color: #737980;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.task-name {
  position: relative;
  min-width: 0;
  padding-left: 0;
}

.task-row.level-2 .task-name {
  padding-left: 22px;
}

.task-row.level-3 .task-name {
  padding-left: 44px;
}

.task-row.level-2 .task-name::before,
.task-row.level-3 .task-name::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: #d7dce2;
}

.task-row.level-2 .task-name::before {
  left: 7px;
}

.task-row.level-3 .task-name::before {
  left: 28px;
}

.task-name strong {
  overflow-wrap: anywhere;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.48;
}

.task-name small {
  margin-top: 4px;
  color: #70767c;
  font-size: 11px;
  line-height: 1.45;
}

.weight-label {
  min-width: 58px;
  justify-self: center;
  padding: 4px 8px;
  border-color: var(--line);
  border-radius: 999px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
}

.weight-label.is-empty {
  color: #a0a5aa;
  border-color: transparent;
  background: transparent;
}

.task-mini-progress {
  grid-template-columns: 42px minmax(70px, 1fr);
  gap: 8px;
}

.task-mini-progress b {
  text-align: right;
  font-size: 12px;
  font-weight: 700;
}

.task-mini-progress i {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e6e9ed;
}

.task-mini-progress em {
  border-radius: inherit;
  background: #0b57d0;
}

.task-line > .status {
  justify-self: center;
  max-width: 100%;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.3;
}

.task-expand {
  border: 1px solid transparent;
  border-radius: 50%;
  color: #5f6368;
  font-size: 17px;
}

.task-expand:hover {
  border-color: #d5d9de;
  background: #f1f3f4;
}

.task-detail {
  padding: 0 10px 14px;
}

.task-detail-grid {
  grid-template-columns: minmax(260px, .68fr) minmax(0, 1.32fr);
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}

.task-facts {
  min-width: 0;
}

.task-detail dl {
  gap: 14px;
}

.task-detail dt {
  font-size: 11px;
}

.task-detail dd {
  margin-top: 2px;
  font-size: 13px;
}

.task-note {
  margin: 16px 0 0;
  border-radius: 8px;
  font-size: 12px;
}

.task-update-form {
  padding-bottom: 16px;
  border-bottom-color: var(--line);
}

.document-quick-upload {
  grid-column: 1 / -1;
  grid-template-columns: minmax(190px, 1fr) minmax(210px, 1fr) minmax(180px, .8fr) auto;
  gap: 10px;
  padding-top: 2px;
}

.document-quick-upload .button {
  min-height: 42px;
}

.document-list p strong {
  font-size: 13px;
}

.document-list p small,
.document-list p em {
  font-size: 11px;
  line-height: 1.45;
}

.member-list > div {
  min-height: 58px;
  padding: 10px 0;
}

.member-list p strong {
  font-size: 13px;
}

.member-list p small {
  margin-top: 2px;
  font-size: 11px;
}

.member-add-form {
  grid-template-columns: minmax(220px, 1.35fr) minmax(170px, .75fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 16px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fafc;
}

.member-add-form label,
.member-add-form select {
  min-width: 0;
}

.member-add-form label > span {
  color: #596068;
}

.member-add-form .button {
  min-height: 42px;
  padding-left: 15px;
  padding-right: 15px;
  white-space: nowrap;
}

@media (max-width: 1240px) {
  .project-side {
    grid-template-columns: 1fr;
  }

  .task-table-head,
  .task-line {
    grid-template-columns: 58px minmax(240px, 1fr) 76px minmax(115px, 140px) minmax(105px, 130px) 38px;
    gap: 9px;
  }
}

@media (max-width: 1000px) {
  .project-hero {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
  }

  .project-title {
    padding: 30px;
  }

  .phase-track {
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  }

  .task-table-head {
    display: none;
  }

  .task-tree {
    border-radius: 9px;
  }

  .task-line {
    grid-template-columns: 52px minmax(0, 1fr) auto 38px;
    grid-template-rows: auto auto;
    gap: 7px 10px;
    min-height: 86px;
  }

  .task-code {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    padding-top: 3px;
  }

  .task-name {
    grid-column: 2;
    grid-row: 1;
  }

  .weight-label {
    grid-column: 3;
    grid-row: 1;
  }

  .task-mini-progress {
    grid-column: 2;
    grid-row: 2;
    width: min(240px, 100%);
  }

  .task-line > .status {
    grid-column: 3;
    grid-row: 2;
  }

  .task-expand {
    grid-column: 4;
    grid-row: 1 / 3;
    align-self: center;
  }

  .task-detail-grid {
    grid-template-columns: 1fr;
  }

  .document-quick-upload {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .document-quick-upload .button {
    justify-self: start;
  }
}

@media (max-width: 900px) {
  .project-toolbar {
    top: 74px;
  }

  .project-hero {
    grid-template-columns: 1fr;
  }

  .project-title {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .project-score {
    grid-template-columns: minmax(130px, .45fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px 22px;
  }

  .project-score > small,
  .project-score > strong {
    grid-column: 1;
  }

  .project-score > div,
  .project-score dl {
    grid-column: 2;
  }

  .project-score > strong {
    margin: 0;
  }

  .project-score dl {
    margin: 8px 0 0;
  }
}

@media (max-width: 680px) {
  .project-title {
    padding: 24px 18px;
  }

  .project-title h2 {
    font-size: 27px;
  }

  .project-score {
    display: grid;
    grid-template-columns: 1fr;
    padding: 22px 18px;
  }

  .project-score > small,
  .project-score > strong,
  .project-score > div,
  .project-score dl {
    grid-column: 1;
  }

  .project-toolbar {
    position: static;
    padding-left: 12px;
    padding-right: 12px;
  }

  .project-toolbar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .timeline-panel,
  .task-panel,
  .documents-panel,
  .members-panel {
    padding: 16px;
  }

  .phase-track {
    grid-template-columns: 1fr;
  }

  .task-section-heading {
    align-items: flex-start;
  }

  .section-heading-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .task-line {
    grid-template-columns: 44px minmax(0, 1fr) 34px;
    grid-template-rows: auto auto auto;
    padding: 12px 7px;
  }

  .task-code {
    grid-column: 1;
    grid-row: 1 / 4;
  }

  .task-name {
    grid-column: 2;
    grid-row: 1;
  }

  .task-row.level-2 .task-name {
    padding-left: 14px;
  }

  .task-row.level-3 .task-name {
    padding-left: 26px;
  }

  .task-row.level-2 .task-name::before {
    left: 3px;
  }

  .task-row.level-3 .task-name::before {
    left: 15px;
  }

  .weight-label {
    display: none;
  }

  .task-mini-progress {
    grid-column: 2;
    grid-row: 2;
  }

  .task-line > .status {
    display: inline-flex;
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
  }

  .task-expand {
    grid-column: 3;
    grid-row: 1 / 4;
  }

  .task-detail {
    padding-left: 0;
    padding-right: 0;
  }

  .task-detail-grid {
    padding: 15px;
  }

  .task-detail dl,
  .form-grid.three {
    grid-template-columns: 1fr;
  }

  .form-grid.three .span-3 {
    grid-column: auto;
  }

  .document-quick-upload,
  .member-add-form {
    grid-template-columns: 1fr;
  }

  .member-add-form .button,
  .document-quick-upload .button {
    width: 100%;
  }
}

/* System-wide readable text scale */
.brand strong { font-size: 14px; }
.brand small { font-size: 10px; }
.nav-link span,
.nav-group summary span { font-size: 14px; }
.nav-sub .nav-link { font-size: 13px; }
.user-mini strong { font-size: 13px; }
.user-mini small,
.signout { font-size: 11px; }
.page-toolbar p,
.list-summary,
.work-copy > p,
.profile-form > p,
.security-note p { font-size: 14px; }
.form-section-title p { font-size: 13px; }
.metrics-band p { font-size: 11px; }
.metrics-band small { font-size: 12px; }
.priority-copy strong { font-size: 14px; }
.priority-copy small,
.priority-copy em,
.urgency-label { font-size: 11px; }
.type-list p strong { font-size: 13px; }
.type-list p small { font-size: 11px; }
.project-main small,
.project-main em { font-size: 11px; }
.activity-stream p { font-size: 12px; }
.activity-stream time { font-size: 11px; }
.work-meta span,
.work-meta b,
.work-meta em { font-size: 11px; }
.work-copy h2 { font-size: 20px; font-weight: 700; }
.work-copy dt { font-size: 11px; }
.work-copy dd { font-size: 13px; }
.status { font-size: 11px; }
.calendar-legend { font-size: 11px; }
.calendar-day header { font-size: 12px; }
.event strong { font-size: 11px; }
.event em { font-size: 10px; }
.notification-item p,
.notification-item small { font-size: 12px; }
.data-table th { font-size: 11px; }
.data-table td { font-size: 13px; }
.data-table td small { font-size: 11px; }
.profile-intro dt,
.profile-intro dd { font-size: 12px; }
.check-list small { font-size: 11px; }
.check-list > div > b { font-size: 11px; }
.deleted-list small,
.deleted-list p { font-size: 12px; }


/* ========================================================================== 
   v1.0.4 — Sans-serif system, balanced timeline and clearer work breakdown
   ========================================================================== */

:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Thai", "Leelawadee UI", Tahoma, Arial, sans-serif;
}

html,
body,
button,
input,
select,
textarea,
optgroup,
option {
  font-family: var(--font-ui);
}

body {
  font-weight: 400;
  letter-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
  font-family: var(--font-ui);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-style: normal;
  text-transform: none;
}

.topbar h1,
.project-title h2,
.section-heading h2,
.work-copy h2,
.notification-item h2,
.login-editorial h1,
.login-form-wrap h2,
.install-intro h1,
.install-panel h2,
.success-panel h2 {
  font-family: var(--font-ui);
  font-weight: 700;
}

.metrics-band strong,
.project-score > strong,
.project-progress b,
.work-progress > strong,
.phase-footer b,
.task-mini-progress b {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}

/* Icon-only elements use the same optical centre in every direction. */
.icon-button,
.document-icon-button,
.version-button,
.member-remove-button,
.dialog-close-button,
.task-expand,
.brand-mark,
.avatar,
.file-ext,
.calendar-head > a,
.notification-button,
.language-switch a,
.profile-chip > span,
.password-field button {
  display: inline-grid;
  place-items: center;
  align-content: center;
  justify-content: center;
  padding: 0;
  text-align: center;
  line-height: 1;
  vertical-align: middle;
}

.button .ui-icon {
  width: 17px;
  height: 17px;
  margin: 0;
}

.task-expand .ui-icon,
.document-icon-button .ui-icon,
.version-button .ui-icon,
.member-remove-button .ui-icon,
.dialog-close-button .ui-icon {
  width: 17px;
  height: 17px;
}

.dialog-close-button,
.member-remove-button,
.document-icon-button,
.version-button {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #5f6368;
  background: #fff;
}

.dialog-close-button:hover,
.document-icon-button:hover,
.version-button:hover {
  color: #0b57d0;
  border-color: #b7c9e8;
  background: #edf4ff;
}

.member-remove-button:hover {
  color: var(--danger);
  border-color: #e7b4b0;
  background: #fff3f2;
}

.brand-mark {
  line-height: 1;
  text-indent: 0;
}

/* Navigation labels no longer reserve a column for 01–05. */
.nav-link {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding-left: 16px;
  padding-right: 14px;
}

.nav-link > b,
.nav-group summary b {
  display: none;
}

.nav-group summary span {
  display: block;
}

.nav-group summary {
  padding-left: 16px;
  padding-right: 14px;
}

.nav-sub {
  padding-left: 12px;
}

/* The project anchor bar only contains navigation; destructive actions remain
   in the dedicated work-management flow rather than the reading view. */
.project-toolbar {
  justify-content: flex-start;
}

/* Primary timeline: centred heading, five equal columns on wide screens and
   fixed internal rows so every percentage lands on the same baseline. */
.timeline-panel .section-heading {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

.timeline-panel .section-heading > div {
  display: grid;
  justify-items: center;
}

.timeline-panel .section-heading > span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f7f9fc;
  font-size: 11px;
  font-weight: 650;
}

.phase-track {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  grid-template-columns: repeat(var(--phase-columns, 5), minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
  gap: 12px;
  justify-content: center;
}

.phase {
  min-height: 150px;
  height: 100%;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: minmax(76px, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 16px 15px 22px;
  border-radius: 12px;
}

.phase-index {
  grid-column: 1;
  grid-row: 1;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: #5f6368;
  background: #f1f3f4;
  font-size: 11px !important;
  font-weight: 750;
  line-height: 1;
}

.phase-copy {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  display: block !important;
}

.phase-copy strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.48;
}

.phase-footer {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.phase-footer small {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 10px;
}

.phase-footer b {
  min-width: 46px;
  justify-self: end;
  color: #202124;
  font-size: 14px;
  font-weight: 750;
  line-height: 1;
  text-align: right;
}

.phase > i {
  left: 0;
  right: auto;
  width: var(--phase-progress);
  max-width: 100%;
  border-radius: 0 0 0 11px;
}

/* Work breakdown: each row reads as a compact work card. Code and hierarchy
   are contained in the first column instead of competing for separate space. */
.task-guide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -4px 0 12px;
}

.task-kind {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.kind-level-1 {
  color: #174ea6;
  border-color: #c6dafc;
  background: #e8f0fe;
}

.kind-level-2 {
  color: #137333;
  border-color: #b7dfc4;
  background: #e6f4ea;
}

.kind-level-3 {
  color: #5f6368;
  border-color: #d7dce1;
  background: #f1f3f4;
}

.task-table-head,
.task-line {
  grid-template-columns: minmax(420px, 1fr) 86px minmax(140px, 170px) minmax(118px, 145px) 42px;
}

.task-table-head {
  gap: 14px;
  padding-left: 16px;
  padding-right: 12px;
  border: 0;
  border-radius: 10px;
  background: #eef2f7;
}

.task-table-head span:first-child {
  text-align: left;
}

.task-table-head span:nth-child(2),
.task-table-head span:nth-child(3),
.task-table-head span:nth-child(4) {
  text-align: center;
}

.task-tree {
  display: grid;
  gap: 9px;
  margin-top: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.task-row,
.task-row:last-child {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}

.task-row.level-1 {
  border-color: #c5d4e8;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .05);
}

.task-row.level-2 {
  margin-left: 20px !important;
}

.task-row.level-3 {
  margin-left: 40px !important;
}

.task-row.heading,
.task-row.level-1.heading {
  background: #f7faff;
}

.task-line {
  min-height: 92px;
  gap: 14px;
  padding: 14px 12px 14px 16px;
}

.task-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.task-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.task-code {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border: 1px solid #d8dde3;
  border-radius: 5px;
  color: #4f555b;
  background: #fff;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.task-main > strong {
  overflow-wrap: anywhere;
  color: #202124;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.48;
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 12px;
  color: #687078;
  font-size: 11px;
  line-height: 1.4;
}

.task-meta > span,
.task-meta > em {
  position: relative;
  font-style: normal;
}

.task-meta > span + span::before,
.task-meta > span + em::before,
.task-meta > em::before {
  content: "";
  width: 3px;
  height: 3px;
  position: absolute;
  left: -8px;
  top: 50%;
  border-radius: 50%;
  background: #a6abb1;
  transform: translateY(-50%);
}

.task-meta > em {
  color: var(--danger);
  font-weight: 700;
}

.task-row.level-2 .task-main,
.task-row.level-3 .task-main {
  position: relative;
  padding-left: 0;
}

.weight-label {
  min-width: 62px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.task-mini-progress {
  width: 100%;
  grid-template-columns: 44px minmax(72px, 1fr);
}

.task-line > .status {
  min-height: 30px;
  align-self: center;
}

.task-expand {
  width: 36px;
  height: 36px;
  align-self: center;
}

.task-expand.open {
  transform: rotate(180deg);
}

.task-detail {
  padding: 0 12px 12px;
}

/* Documents and stakeholders share the same grid row and therefore stretch
   to equal height rather than ending at unrelated vertical positions. */
.project-side {
  align-items: stretch;
}

.project-side > .panel,
.documents-panel,
.members-panel {
  height: 100%;
}

.documents-panel,
.members-panel {
  display: flex;
  flex-direction: column;
}

.document-list,
.member-list {
  flex: 1 1 auto;
}

.member-add-form {
  margin-top: auto;
}

.document-list > div {
  grid-template-columns: 42px minmax(0, 1fr) 34px 34px;
}

.member-list form button {
  color: #5f6368;
}

@media (max-width: 1280px) {
  .phase-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .task-table-head,
  .task-line {
    grid-template-columns: minmax(340px, 1fr) 78px minmax(125px, 150px) minmax(108px, 130px) 40px;
    gap: 10px;
  }
}

@media (max-width: 1080px) {
  .phase-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .task-table-head {
    display: none;
  }

  .task-line {
    grid-template-columns: minmax(0, 1fr) auto 40px;
    grid-template-rows: auto auto;
    grid-template-areas:
      "main status expand"
      "progress weight expand";
    gap: 10px 14px;
  }

  .task-main {
    grid-area: main;
  }

  .weight-label {
    grid-area: weight;
  }

  .task-mini-progress {
    grid-area: progress;
    width: min(300px, 100%);
  }

  .task-line > .status {
    grid-area: status;
  }

  .task-expand {
    grid-area: expand;
  }
}

@media (max-width: 780px) {
  .phase-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-row.level-2 {
    margin-left: 10px !important;
  }

  .task-row.level-3 {
    margin-left: 20px !important;
  }
}

@media (max-width: 620px) {
  .phase-track {
    grid-template-columns: 1fr;
  }

  .phase {
    min-height: 136px;
  }

  .task-line {
    grid-template-columns: minmax(0, 1fr) 38px;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "main expand"
      "status status"
      "progress progress"
      "weight weight";
    padding: 13px;
  }

  .task-line > .status,
  .weight-label {
    justify-self: start;
  }

  .task-mini-progress {
    width: 100%;
  }

  .task-row.level-2,
  .task-row.level-3 {
    margin-left: 0 !important;
  }

  .task-meta {
    display: grid;
    gap: 4px;
  }

  .task-meta > span + span::before,
  .task-meta > span + em::before,
  .task-meta > em::before {
    display: none;
  }
}

/* ========================================================================== 
   v1.0.5 — Dashboard clarity, balanced controls and readable typography
   ========================================================================== */

:root {
  --font-ui: "Noto Sans Thai", "Leelawadee UI", "Segoe UI", Tahoma, Arial, sans-serif;
  --dashboard-blue: #0b57d0;
  --dashboard-blue-soft: #e8f0fe;
  --dashboard-green: #188038;
  --dashboard-amber: #b06000;
  --dashboard-red: #b3261e;
}

html,
body,
button,
input,
select,
textarea,
optgroup,
option {
  font-family: var(--font-ui) !important;
}

body {
  color: #202124;
  font-size: 15px;
  line-height: 1.58;
  font-weight: 400;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
  font-family: var(--font-ui) !important;
  letter-spacing: 0;
}

/* Brand: use a purpose-built SVG symbol and remove the unexplained subtitle. */
.brand {
  gap: 11px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 0;
  border-radius: 10px;
  color: inherit;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.brand-symbol {
  width: 40px;
  height: 40px;
  display: block;
}

.brand-copy {
  min-width: 0;
  display: flex !important;
  align-items: center;
}

.brand strong {
  color: #202124;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.brand small {
  display: none;
}

/* The close control belongs to the mobile drawer only. */
.sidebar-close {
  display: none !important;
}

/* Initials and counters use a true optical centre. */
.avatar,
.profile-chip > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  place-items: center !important;
  padding: 1px 0 0 !important;
  font-family: var(--font-ui) !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1 !important;
  text-align: center;
}

.user-mini .avatar {
  width: 38px;
  height: 38px;
  flex-basis: 38px;
  color: #202124;
  background: #fff;
  border-color: #c9cdd2;
}

.profile-chip > span {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.notification-button span,
.nav-link em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 1px 6px 0;
  font-family: var(--font-ui) !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.notification-button span {
  right: -6px;
  top: -7px;
  border-radius: 12px;
}

/* Dashboard header hierarchy */
.dashboard-toolbar p {
  font-size: 14px;
  line-height: 1.55;
}

.dashboard-primary .eyebrow,
.dashboard-priority-full .eyebrow,
.portfolio-panel .eyebrow {
  margin-bottom: 6px;
  color: #5f6368;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .075em;
}

.dashboard-primary .section-heading h2,
.dashboard-priority-full .section-heading h2,
.portfolio-panel .section-heading h2 {
  color: #202124;
  font-size: clamp(21px, .45vw + 17px, 25px);
  font-weight: 700;
  line-height: 1.3;
}

.dashboard-primary .section-heading p:not(.eyebrow),
.dashboard-priority-full .section-heading p:not(.eyebrow),
.portfolio-panel .section-heading p:not(.eyebrow) {
  margin-top: 6px;
  color: #5f6368;
  font-size: 13px;
  line-height: 1.55;
}

/* Summary cards: separate surfaces, neutral background and restrained accents. */
.metrics-band {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.metrics-band article {
  min-height: 142px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 18px 18px 16px;
  border: 1px solid #dfe3e8 !important;
  border-left-width: 4px !important;
  border-radius: 12px;
  color: #202124 !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .08);
}

.metrics-band article > span {
  display: none !important;
}

.metrics-band .metric-total {
  border-left-color: #5f6368 !important;
}

.metrics-band .metric-progress {
  border-left-color: var(--dashboard-blue) !important;
}

.metrics-band .metric-warning {
  border-left-color: #f9ab00 !important;
}

.metrics-band .metric-critical {
  border-left-color: var(--dashboard-amber) !important;
}

.metrics-band .metric-overdue {
  border-left-color: var(--dashboard-red) !important;
}

.metrics-band p {
  margin: 0 0 12px;
  color: #5f6368;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

.metrics-band strong {
  display: block;
  margin: 0;
  color: #202124;
  font-size: clamp(31px, 2vw, 39px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}

.metrics-band .metric-overdue strong {
  color: var(--dashboard-red);
}

.metrics-band small {
  display: block;
  margin-top: auto;
  padding-top: 11px;
  color: #687078;
  font-size: 12px;
  line-height: 1.35;
}

.metrics-band .micro-progress {
  width: 100%;
  height: 5px;
  margin-top: 12px;
  border-radius: 999px;
  background: #e8eaed;
}

/* Active work filters */
.dashboard-primary {
  padding: 24px;
}

.dashboard-section-heading {
  align-items: flex-start;
  margin-bottom: 18px;
}

.dashboard-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(3, minmax(155px, .8fr)) auto;
  gap: 12px;
  align-items: end;
  margin: 0 0 22px;
  padding: 16px;
  border: 1px solid #e0e3e7;
  border-radius: 10px;
  background: #f8fafd;
}

.dashboard-filters label {
  min-width: 0;
  gap: 6px;
  color: #4f555b;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.dashboard-filters input,
.dashboard-filters select {
  min-height: 42px;
  color: #202124;
  font-size: 14px;
  font-weight: 400;
  background-color: #fff;
}

.dashboard-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.dashboard-filter-actions .button {
  min-height: 42px;
  font-size: 13px;
}

.dashboard-filter-actions .is-disabled {
  opacity: .48;
  pointer-events: none;
}

/* Work rows */
.project-lines > a {
  min-height: 82px;
}

.project-main strong {
  color: #202124;
  font-size: 14px;
  line-height: 1.45;
}

.project-main small,
.project-main em {
  font-size: 11.5px;
  line-height: 1.4;
}

.project-progress b,
.status {
  font-size: 12px;
}

/* Priority queue now uses the full width after Traceability was removed. */
.dashboard-priority-full {
  margin-bottom: 20px;
  padding: 24px;
}

.priority-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 26px;
  border-top: 1px solid #e0e3e7;
}

.priority-list-grid .priority-row {
  min-width: 0;
  min-height: 84px;
  padding: 12px 6px;
}

.priority-date {
  width: 56px;
  min-width: 56px;
  height: 58px;
  min-height: 58px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
  text-align: center;
  line-height: 1;
}

.priority-date b {
  display: block;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.priority-date small {
  display: block;
  color: #5f6368;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
}

.priority-copy strong {
  font-size: 14px;
  line-height: 1.45;
}

.priority-copy small,
.priority-copy em,
.urgency-label {
  font-size: 11.5px;
  line-height: 1.35;
}

.urgency-label {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  white-space: nowrap;
}

/* Portfolio mix: a calm table instead of repeated decorative cards. */
.portfolio-panel {
  padding: 24px;
}

.portfolio-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e0e3e7;
  border-radius: 10px;
  background: #fff;
}

.portfolio-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  table-layout: fixed;
}

.portfolio-table th,
.portfolio-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #e8eaed;
  text-align: left;
  vertical-align: middle;
}

.portfolio-table th {
  color: #5f6368;
  background: #f8fafd;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.portfolio-table td {
  color: #202124;
  font-size: 13.5px;
  line-height: 1.45;
}

.portfolio-table tbody tr:last-child td {
  border-bottom: 0;
}

.portfolio-table tbody tr:hover td {
  background: #f8fbff;
}

.portfolio-table th:first-child,
.portfolio-table td:first-child {
  width: 52%;
}

.portfolio-table th:nth-child(2),
.portfolio-table td:nth-child(2) {
  width: 16%;
  text-align: center;
}

.portfolio-table th:nth-child(3),
.portfolio-table td:nth-child(3) {
  width: 32%;
}

.portfolio-type-name {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.portfolio-type-name strong {
  overflow-wrap: anywhere;
  font-size: 13.5px;
  font-weight: 600;
}

.portfolio-type-name .type-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: var(--accent);
}

.portfolio-count {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.portfolio-progress-cell {
  display: grid;
  grid-template-columns: 46px minmax(90px, 1fr);
  align-items: center;
  gap: 10px;
}

.portfolio-progress-cell > b {
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.portfolio-progress-cell > span {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eaed;
}

.portfolio-progress-cell > span > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

@media (max-width: 1280px) {
  .metrics-band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-filter-search {
    grid-column: span 2;
  }

  .dashboard-filter-actions {
    grid-column: span 2;
  }
}

@media (max-width: 1040px) {
  .priority-list-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .sidebar-close {
    display: inline-grid !important;
  }

  .metrics-band {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-filters {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 680px) {
  body {
    font-size: 14px;
  }

  .metrics-band {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .metrics-band article {
    min-height: 124px;
  }

  .dashboard-primary,
  .dashboard-priority-full,
  .portfolio-panel {
    padding: 18px;
  }

  .dashboard-filters {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .dashboard-filter-search,
  .dashboard-filter-actions {
    grid-column: auto;
  }

  .dashboard-filter-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-filter-actions .button {
    width: 100%;
  }

  .priority-list-grid .priority-row {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas:
      "date copy"
      "date urgency";
    gap: 5px 12px;
  }

  .priority-date {
    grid-area: date;
  }

  .priority-copy {
    grid-area: copy;
  }

  .urgency-label {
    grid-area: urgency;
    justify-self: start;
  }
}

/* ========================================================================== 
   v1.0.6 — Larger system typography and sortable work overview table
   ========================================================================== */

:root {
  --font-size-body: 16px;
  --font-size-control: 15px;
  --font-size-label: 13.5px;
  --font-size-meta: 13px;
}

html {
  font-size: 16px;
}

body {
  font-size: var(--font-size-body);
  line-height: 1.62;
}

/* Raise the minimum readable size across shared system components. */
.page-toolbar p,
.section-heading p:not(.eyebrow),
.panel > p,
.empty-state p,
.alert,
.list-summary,
.task-note,
.security-note,
.calendar-legend,
.notification-item p {
  font-size: 14px;
  line-height: 1.6;
}

.eyebrow,
.dashboard-primary .eyebrow,
.dashboard-priority-full .eyebrow,
.portfolio-panel .eyebrow {
  font-size: 12px;
  line-height: 1.4;
}

label,
.dashboard-filters label,
.filter-bar label,
.inline-filter label {
  font-size: var(--font-size-label);
  line-height: 1.45;
}

input,
select,
textarea,
.dashboard-filters input,
.dashboard-filters select {
  font-size: var(--font-size-control);
  line-height: 1.45;
}

.button,
.button.small,
.dashboard-filter-actions .button {
  font-size: 14px;
  line-height: 1.35;
}

.section-heading h2,
.dashboard-primary .section-heading h2,
.dashboard-priority-full .section-heading h2,
.portfolio-panel .section-heading h2 {
  font-size: clamp(23px, .5vw + 18px, 27px);
  line-height: 1.35;
}

.dashboard-toolbar p,
.dashboard-primary .section-heading p:not(.eyebrow),
.dashboard-priority-full .section-heading p:not(.eyebrow),
.portfolio-panel .section-heading p:not(.eyebrow) {
  font-size: 14px;
}

.nav-link,
.nav-group summary {
  font-size: 15px;
}

.nav-sub .nav-link {
  font-size: 14px;
}

.brand strong {
  font-size: 16px;
}

.user-mini strong {
  font-size: 14px;
}

.user-mini small,
.signout {
  font-size: 12.5px;
}

.topbar .eyebrow {
  font-size: 12px;
}

.topbar h1 {
  font-size: clamp(25px, 1.35vw + 11px, 34px);
}

.profile-chip b {
  font-size: 13px;
}

.notification-button span,
.nav-link em {
  font-size: 12px;
}

.status,
.project-progress b,
.urgency-label,
.weight-label {
  font-size: 12.5px;
}

.metrics-band p {
  font-size: 13px;
}

.metrics-band strong {
  font-size: clamp(36px, 2.25vw, 44px);
}

.metrics-band small {
  font-size: 13px;
}

.priority-copy strong {
  font-size: 15px;
}

.priority-copy small,
.priority-copy em,
.priority-date small,
.urgency-label {
  font-size: 12.5px;
}

.portfolio-table th {
  font-size: 13.5px;
}

.portfolio-table td,
.portfolio-type-name strong,
.portfolio-count,
.portfolio-progress-cell > b {
  font-size: 14.5px;
}

.data-table th,
.calendar-weekdays,
.task-table-head {
  font-size: 13px;
}

.data-table td,
.master-list,
.notification-item,
.document-list p strong,
.member-list p strong,
.task-name strong,
.task-detail dd {
  font-size: 14px;
}

.data-table small,
.document-list p small,
.document-list p em,
.member-list p small,
.task-name small,
.task-detail dt {
  font-size: 12.5px;
}

/* Active work: explicit headings aligned with their data columns. */
.project-table {
  overflow: hidden;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
  background: #fff;
}

.project-table-head,
.project-lines > a.project-table-row {
  display: grid;
  grid-template-columns:
    54px
    minmax(280px, 1.45fr)
    minmax(170px, .72fr)
    minmax(180px, .62fr)
    minmax(130px, .46fr);
  align-items: center;
  gap: 14px;
}

.project-table-head {
  min-height: 50px;
  padding: 0 12px;
  border-bottom: 1px solid #dfe3e8;
  color: #4f555b;
  background: #f7f9fc;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
}

.project-head-index {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.project-sort-heading {
  min-width: 0;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 6px;
  color: #4f555b;
  border-bottom: 3px solid transparent;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.project-sort-heading:hover {
  color: #0b57d0;
  background: #eef4ff;
}

.project-sort-heading.active {
  color: #0b57d0;
  border-bottom-color: #0b57d0;
}

.project-sort-heading .ui-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
}

.project-head-center {
  justify-content: center;
  text-align: center;
}

.project-lines > a.project-table-row {
  min-height: 88px;
  padding: 11px 12px;
  border-bottom: 1px solid #e7eaee;
  border-radius: 0;
  transition: background .14s ease;
}

.project-lines > a.project-table-row:last-child {
  border-bottom: 0;
}

.project-lines > a.project-table-row:hover {
  background: #f7faff;
  transform: none;
}

.project-index {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777d84;
  font-size: 15px;
  font-weight: 650;
  text-align: center;
}

.project-main {
  gap: 2px;
}

.project-main small {
  font-size: 12.5px;
  line-height: 1.4;
}

.project-main strong {
  font-size: 15.5px;
  line-height: 1.48;
}

.project-mobile-owner {
  display: none;
  color: #687078;
  font-size: 12.5px;
  font-style: normal;
}

.project-owner {
  min-width: 0;
  overflow: hidden;
  color: #4f555b;
  font-size: 14px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-progress {
  width: 100%;
  max-width: 190px;
  display: grid;
  grid-template-columns: 52px minmax(80px, 1fr);
  align-items: center;
  justify-self: center;
  gap: 9px;
}

.project-progress b {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.project-progress i {
  height: 7px;
}

.project-status-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.project-status-cell .status {
  min-width: 108px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 5px 10px;
  text-align: center;
}

@media (max-width: 1180px) {
  .project-table-head,
  .project-lines > a.project-table-row {
    grid-template-columns: 50px minmax(260px, 1fr) minmax(170px, .62fr) minmax(130px, .46fr);
  }

  .project-table-head > :nth-child(3),
  .project-owner {
    display: none;
  }

  .project-mobile-owner {
    display: block;
  }
}

@media (max-width: 900px) {
  body {
    font-size: 15.5px;
  }

  .project-table {
    border-radius: 8px;
  }

  .project-table-head {
    display: none;
  }

  .project-lines > a.project-table-row {
    grid-template-columns: 42px minmax(0, 1fr) minmax(120px, auto);
    grid-template-areas:
      "index main status"
      "index progress progress";
    gap: 8px 12px;
    min-height: 100px;
    padding: 14px 12px;
  }

  .project-index {
    grid-area: index;
    align-self: stretch;
  }

  .project-main {
    grid-area: main;
  }

  .project-progress {
    grid-area: progress;
    width: min(250px, 100%);
    max-width: none;
    justify-self: start;
  }

  .project-status-cell {
    grid-area: status;
  }
}

@media (max-width: 680px) {
  body {
    font-size: 15px;
  }

  .nav-link,
  .nav-group summary {
    font-size: 15px;
  }

  .dashboard-primary,
  .dashboard-priority-full,
  .portfolio-panel {
    padding: 17px;
  }

  .project-lines > a.project-table-row {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-areas:
      "index main"
      ". progress"
      ". status";
    gap: 8px 10px;
  }

  .project-progress {
    width: 100%;
  }

  .project-status-cell {
    justify-content: flex-start;
  }

  .project-status-cell .status {
    min-width: 104px;
    margin: 0;
  }
}


/* ========================================================================== 
   v1.0.7 — Compact work table, refined identity and notification badge
   ========================================================================== */

/* Brand identity: a project checklist symbol with the approved descriptor. */
.brand {
  gap: 12px;
}

.brand-mark,
.brand-symbol {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

.brand-mark {
  border: 0 !important;
  border-radius: 11px;
  background: transparent !important;
  overflow: hidden;
}

.brand-copy {
  min-width: 0;
  display: grid !important;
  align-content: center;
  gap: 2px;
}

.brand strong {
  color: #202124;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.25;
}

.brand small {
  display: block !important;
  margin: 0;
  color: #747a82;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .045em;
  text-transform: none;
}

/* User initials: filled circles and a separately centred glyph prevent the A
   from appearing low or offset because of browser font metrics. */
.avatar,
.profile-chip > .profile-avatar {
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #fff !important;
  background: #0b57d0 !important;
  box-shadow: none !important;
  overflow: hidden;
  line-height: 1 !important;
}

.user-mini .avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}

.profile-chip > .profile-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
}

.avatar-letter {
  display: block;
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transform: translateY(.4px);
}

.profile-chip .avatar-letter {
  font-size: 13px;
}

/* The notification count uses one clean filled badge without a white ring. */
.notification-button span {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Active work: remove the non-essential sequence column and give that space
   back to the work title and owner fields. */
.project-table-head,
.project-lines > a.project-table-row {
  grid-template-columns:
    minmax(300px, 1.55fr)
    minmax(180px, .72fr)
    minmax(190px, .62fr)
    minmax(132px, .46fr);
}

.project-sort-heading:first-child {
  padding-left: 10px;
}

.project-main {
  padding-left: 10px;
}

@media (max-width: 1180px) {
  .project-table-head,
  .project-lines > a.project-table-row {
    grid-template-columns:
      minmax(280px, 1fr)
      minmax(180px, .64fr)
      minmax(132px, .46fr);
  }

  .project-table-head > :nth-child(2),
  .project-owner {
    display: none;
  }
}

@media (max-width: 900px) {
  .project-lines > a.project-table-row {
    grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
    grid-template-areas:
      "main status"
      "progress progress";
    gap: 8px 12px;
  }

  .project-main {
    grid-area: main;
    padding-left: 0;
  }
}

@media (max-width: 680px) {
  .brand-mark,
  .brand-symbol {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .brand strong {
    font-size: 15px;
  }

  .brand small {
    font-size: 9.5px;
  }

  .project-lines > a.project-table-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "progress"
      "status";
  }
}

/* ========================================================================== 
   v1.0.8 — Readable, modern and touch-friendly side navigation
   ========================================================================== */

:root {
  --sidebar-width: 278px;
  --nav-bg: #f8fafc;
  --nav-surface: #ffffff;
  --nav-hover: #eef3f9;
  --nav-active: #e8f0fe;
  --nav-active-strong: #0b57d0;
  --nav-text: #34383d;
  --nav-muted: #687078;
  --nav-line: #dde3ea;
}

.sidebar {
  color: var(--nav-text);
  background: var(--nav-bg);
  border-right: 1px solid var(--nav-line);
}

.sidebar-head {
  min-height: 88px;
  padding: 18px 18px;
  background: rgba(248, 250, 252, .97);
  border-bottom: 1px solid var(--nav-line);
}

.brand {
  gap: 12px;
  min-width: 0;
}

.brand strong {
  color: #202124;
  font-size: 16.5px;
  font-weight: 750;
  line-height: 1.25;
}

.brand small {
  color: #687078;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .025em;
}

.main-nav {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 14px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c6ced8 transparent;
  overscroll-behavior: contain;
}

.main-nav::-webkit-scrollbar {
  width: 8px;
}

.main-nav::-webkit-scrollbar-track {
  background: transparent;
}

.main-nav::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #c6ced8;
  background-clip: padding-box;
}

.nav-link {
  min-height: 52px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 6px 11px 6px 8px;
  border: 0;
  border-radius: 14px;
  color: var(--nav-text);
  background: transparent;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.3;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.nav-link .nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.nav-icon {
  width: 38px;
  height: 38px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 38px;
  border-radius: 11px;
  color: var(--nav-muted);
  background: transparent;
  transition: color .16s ease, background .16s ease, box-shadow .16s ease;
}

.nav-icon .ui-icon {
  width: 21px;
  height: 21px;
}

.nav-link:hover {
  color: #1f2328;
  background: var(--nav-hover);
}

.nav-link:hover .nav-icon {
  color: var(--nav-active-strong);
  background: var(--nav-surface);
  box-shadow: 0 1px 2px rgba(60, 64, 67, .12);
}

.nav-link:focus-visible,
.nav-group summary:focus-visible,
.signout:focus-visible {
  outline: 3px solid rgba(11, 87, 208, .22);
  outline-offset: 2px;
}

.nav-link.active {
  color: var(--nav-active-strong);
  background: var(--nav-active);
  box-shadow: inset 3px 0 0 var(--nav-active-strong);
}

.nav-link.active .nav-icon {
  color: var(--nav-active-strong);
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .15);
}

.nav-link em {
  min-width: 26px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  padding: 0 7px;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  background: #b3261e;
  box-shadow: none;
  font-size: 12px;
  font-weight: 750;
  font-style: normal;
  line-height: 1;
}

.nav-group {
  margin: 2px 0 0;
  border-radius: 14px;
}

.nav-group summary {
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 0;
  border-radius: 14px;
  color: var(--nav-text);
  background: transparent;
  cursor: pointer;
  list-style: none;
  transition: color .16s ease, background .16s ease;
}

.nav-group summary::-webkit-details-marker {
  display: none;
}

.nav-group summary .nav-summary-main {
  min-width: 0;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.nav-group summary .nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  font-size: 15.5px;
  font-weight: 650;
  line-height: 1.3;
}

.nav-group summary:hover {
  color: #1f2328;
  background: var(--nav-hover);
}

.nav-group summary:hover .nav-icon,
.nav-group[open] summary .nav-icon {
  color: var(--nav-active-strong);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .12);
}

.nav-group[open] {
  padding-bottom: 7px;
  background: #f0f4f9;
}

.nav-group[open] summary {
  color: #202124;
  background: #e9eef6;
}

.nav-chevron {
  width: 34px;
  height: 34px;
  display: inline-grid !important;
  place-items: center;
  border-radius: 10px;
  color: #687078;
  transition: transform .16s ease, background .16s ease;
}

.nav-chevron .ui-icon {
  width: 18px !important;
  height: 18px !important;
}

.nav-group summary:hover .nav-chevron {
  background: rgba(255,255,255,.72);
}

.nav-group[open] .nav-chevron {
  transform: rotate(180deg);
}

.nav-sub {
  position: relative;
  display: grid;
  gap: 2px;
  margin: 5px 6px 0 27px;
  padding: 2px 0 0 13px;
  border-left: 1px solid #d3dbe5;
}

.nav-sub .nav-link {
  min-height: 44px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 5px 9px 5px 6px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
}

.nav-sub .nav-icon {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-radius: 9px;
}

.nav-sub .nav-icon .ui-icon {
  width: 17px;
  height: 17px;
}

.nav-sub .nav-link.active {
  box-shadow: inset 2px 0 0 var(--nav-active-strong);
}

.sidebar-foot {
  flex: 0 0 auto;
  padding: 12px 14px 15px;
  border-top: 1px solid var(--nav-line);
  background: var(--nav-bg);
}

.user-mini {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e0e5eb;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .06);
}

.user-mini .avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.user-mini strong {
  color: #202124;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
}

.user-mini small {
  margin-top: 1px;
  color: #687078;
  font-size: 12.5px;
  line-height: 1.35;
}

.signout {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 11px;
  border-radius: 11px;
  color: #5f6368;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.3;
  transition: color .16s ease, background .16s ease;
}

.signout .ui-icon {
  width: 18px;
  height: 18px;
}

.signout:hover {
  color: #b3261e;
  background: #fce8e6;
}

@media (max-width: 1180px) and (min-width: 901px) {
  :root {
    --sidebar-width: 262px;
  }
}

@media (max-width: 900px) {
  .sidebar {
    width: min(320px, 90vw);
    background: var(--nav-bg);
    box-shadow: 10px 0 34px rgba(32, 33, 36, .22);
  }

  .sidebar-close {
    display: inline-grid !important;
    place-items: center;
    flex: 0 0 40px;
  }

  .main-nav {
    padding-top: 12px;
  }
}

@media (max-width: 430px) {
  .sidebar-head {
    padding-left: 15px;
    padding-right: 13px;
  }

  .main-nav {
    padding-left: 11px;
    padding-right: 11px;
  }

  .nav-link,
  .nav-group summary .nav-label {
    font-size: 15px;
  }
}

/* ========================================================================== 
   v1.0.9 — Login wordmark and accessible password visibility control
   ========================================================================== */

.login-editorial > .brand-mark.large {
  display: none !important;
}

.login-wordmark {
  max-width: 860px !important;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.7vw, 26px);
  margin: 22px 0 18px !important;
  color: #202124;
  font-family: var(--font-ui) !important;
  font-size: clamp(46px, 6.2vw, 84px) !important;
  font-weight: 720 !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
}

.login-wordmark-it {
  width: clamp(76px, 8.4vw, 116px);
  height: clamp(54px, 6.3vw, 82px);
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
}

.login-wordmark-it svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.login-wordmark-it path {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

.login-wordmark-copy {
  min-width: 0;
  display: block;
  white-space: nowrap;
}

.login-editorial > .eyebrow {
  margin-bottom: 0;
}

.login-editorial dl dd {
  line-height: 1.45;
}

.password-field {
  position: relative;
}

.password-field > input {
  min-height: 48px;
  padding-right: 106px;
}

.password-visibility {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  width: auto !important;
  min-width: 88px;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px;
  padding: 0 11px !important;
  transform: translateY(-50%);
  border: 1px solid #dadce0 !important;
  border-radius: 8px;
  color: #3c4043;
  background: #f8f9fa !important;
  box-shadow: none;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.password-visibility:hover {
  color: #0b57d0;
  border-color: #b8c8e8 !important;
  background: #eef4ff !important;
}

.password-visibility:focus-visible {
  outline: 3px solid rgba(11, 87, 208, .2);
  outline-offset: 2px;
}

.password-visibility[aria-pressed="true"] {
  color: #0b57d0;
  border-color: #b8c8e8 !important;
  background: #eaf2ff !important;
}

.password-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.password-icon[hidden] {
  display: none !important;
}

.password-visibility [data-password-toggle-label] {
  min-width: 30px;
  text-align: center;
}

@media (max-width: 680px) {
  .login-wordmark {
    gap: 12px;
    font-size: clamp(38px, 12.5vw, 54px) !important;
  }

  .login-wordmark-it {
    width: clamp(64px, 20vw, 82px);
    height: clamp(48px, 14vw, 60px);
  }

  .login-wordmark-copy {
    white-space: normal;
  }
}

@media (max-width: 410px) {
  .password-field > input {
    padding-right: 56px;
  }

  .password-visibility {
    min-width: 40px;
    width: 40px !important;
    padding: 0 !important;
  }

  .password-visibility [data-password-toggle-label] {
    display: none;
  }
}


/* ========================================================================== 
   v1.0.10 — Login wordmark typography refinement
   ========================================================================== */

.login-wordmark {
  gap: .18em !important;
}

.login-wordmark-it {
  width: auto !important;
  height: auto !important;
  flex: 0 0 auto;
  display: inline-block !important;
  place-items: initial !important;
  color: inherit;
  font-family: inherit !important;
  font-size: 1em !important;
  font-style: normal;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: -.115em;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
  transform: translateY(.002em);
}

.login-wordmark-it svg {
  display: none !important;
}

.login-form-wrap > h2:first-child {
  margin-top: 0;
}

@media (max-width: 680px) {
  .login-wordmark {
    gap: .16em !important;
  }
}


/* ==========================================================================
   v1.0.11 — Seamless login wordmark
   ========================================================================== */

.login-wordmark {
  display: block !important;
  margin-top: 22px !important;
  font-family: var(--font-ui) !important;
  font-weight: 720 !important;
  letter-spacing: -.052em !important;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
}

.login-wordmark-copy {
  display: inline-block !important;
  white-space: nowrap;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  word-spacing: -.01em;
  transform: none !important;
}

.login-wordmark-it {
  display: none !important;
}

@media (max-width: 680px) {
  .login-wordmark {
    letter-spacing: -.045em !important;
  }

  .login-wordmark-copy {
    white-space: normal;
  }
}

/* ========================================================================== 
   v1.0.12 — Login wordmark optical alignment and direct bilingual copy
   ========================================================================== */

.login-wordmark {
  max-width: 900px !important;
  display: block !important;
  margin: 22px 0 18px !important;
  color: #202124;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(48px, 6.1vw, 82px) !important;
  font-weight: 700 !important;
  line-height: .98 !important;
  letter-spacing: normal !important;
  font-kerning: auto !important;
  font-feature-settings: normal !important;
  text-rendering: geometricPrecision;
}

.login-wordmark-copy {
  display: inline-flex !important;
  align-items: baseline;
  gap: .13em;
  white-space: nowrap;
  color: inherit;
  font-family: inherit !important;
  font-size: inherit;
  font-style: normal;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  word-spacing: normal !important;
  transform: none !important;
}

.login-wordmark-prefix,
.login-wordmark-rest {
  display: inline-block;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-style: normal;
  font-weight: inherit;
  line-height: inherit;
  transform: none;
}

.login-wordmark-prefix {
  /* Optical tracking only; glyphs never overlap, so no cut or seam appears. */
  letter-spacing: -.055em;
}

.login-wordmark-rest {
  letter-spacing: -.048em;
}

@media (max-width: 680px) {
  .login-wordmark {
    font-size: clamp(40px, 12vw, 56px) !important;
  }

  .login-wordmark-copy {
    gap: .11em;
    white-space: normal;
    flex-wrap: wrap;
  }
}


/* ========================================================================== 
   v1.0.13 — Mobile-first login balance and equal form controls
   ========================================================================== */

.login-mobile-brand {
  display: none;
}

.login-form-wrap form {
  gap: 16px;
}

.login-form-wrap form > label {
  gap: 8px;
}

.login-form-wrap input,
.login-form-wrap .password-field,
.login-form-wrap .button.wide {
  min-height: 50px;
  height: 50px;
}

.login-form-wrap input {
  padding-top: 11px;
  padding-bottom: 11px;
  border-radius: 8px;
}

.login-form-wrap .password-field {
  position: relative;
}

.login-form-wrap .password-field > input {
  min-height: 50px;
  height: 50px;
  padding-right: 110px;
}

.login-form-wrap .password-visibility {
  top: 5px;
  right: 5px;
  min-height: 40px;
  height: 40px;
  border-radius: 7px;
}

.login-form-wrap .button.wide {
  border-radius: 8px;
}

@media (max-width: 900px) {
  .login-body {
    min-height: 100svh;
    background: #fff;
  }

  .login-shell {
    min-height: 100svh;
    display: block;
  }

  .login-editorial {
    display: none;
  }

  .login-panel {
    position: relative;
    width: 100%;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: max(76px, calc(env(safe-area-inset-top) + 62px)) 24px max(28px, env(safe-area-inset-bottom));
    background: #fff;
  }

  .login-language {
    top: max(16px, env(safe-area-inset-top));
    right: 18px;
  }

  .login-mobile-brand {
    width: min(100%, 420px);
    display: block;
    margin: 0 auto 30px;
  }

  .login-mobile-brand .eyebrow {
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: .08em;
  }

  .login-mobile-brand strong {
    display: block;
    color: #202124;
    font-family: var(--font-ui);
    font-size: clamp(32px, 9vw, 46px);
    font-weight: 750;
    line-height: 1.05;
    letter-spacing: -.045em;
  }

  .login-form-wrap {
    width: min(100%, 420px);
    margin: 0 auto;
  }

  .login-form-wrap h2 {
    font-size: clamp(30px, 7vw, 38px);
  }

  .login-form-wrap > p {
    margin-bottom: 22px;
    font-size: 14px;
    line-height: 1.55;
  }
}

@media (max-width: 680px) {
  .login-panel {
    min-height: 100svh;
    padding: max(70px, calc(env(safe-area-inset-top) + 58px)) 20px max(24px, env(safe-area-inset-bottom));
  }

  .login-language {
    right: 12px;
  }

  .login-mobile-brand {
    margin-bottom: 24px;
  }

  .login-form-wrap input,
  .login-form-wrap .password-field,
  .login-form-wrap .button.wide {
    min-height: 48px;
    height: 48px;
  }

  .login-form-wrap .password-field > input {
    min-height: 48px;
    height: 48px;
    padding-right: 54px;
  }

  .login-form-wrap .password-visibility {
    top: 4px;
    right: 4px;
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    height: 40px;
    padding: 0;
  }

  .login-form-wrap .password-visibility [data-password-toggle-label] {
    display: none;
  }
}

@media (max-width: 900px) and (max-height: 690px) {
  .login-panel {
    justify-content: flex-start;
  }

  .login-mobile-brand {
    margin-bottom: 18px;
  }

  .login-form-wrap > p {
    margin-bottom: 16px;
  }
}

/* ========================================================================== 
   v1.0.14 — Production desktop navigation, attention-first dashboard,
   main-process progress and explicit table sort states
   ========================================================================== */

:root {
  --sidebar-width: 264px;
  --nav-bg: #ffffff;
  --nav-text: #2f343a;
  --nav-muted: #69717a;
  --nav-line: #e3e7ec;
  --nav-hover: #f3f6fa;
  --nav-active: #e8f0fe;
  --nav-active-strong: #0b57d0;
}

/* Desktop navigation uses compact, consistent dimensions. It remains fixed,
   while only the menu list scrolls when the viewport is short. */
@media (min-width: 901px) {
  .app-shell {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--nav-text);
    background: var(--nav-bg);
    border-right: 1px solid var(--nav-line);
    box-shadow: 1px 0 0 rgba(32, 33, 36, .02);
  }

  .workspace {
    grid-column: 2;
    width: 100%;
    min-width: 0;
  }

  .sidebar-head {
    min-height: 80px;
    flex: 0 0 80px;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid var(--nav-line);
  }

  .sidebar-close {
    display: none !important;
  }

  .brand {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
  }

  .brand-mark,
  .brand-symbol {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
  }

  .brand-copy {
    min-width: 0;
    gap: 1px;
  }

  .brand strong {
    overflow: hidden;
    color: #202124;
    font-size: 15.5px;
    font-weight: 720;
    line-height: 1.3;
    letter-spacing: -.012em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand small {
    overflow: hidden;
    color: #737a82;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .025em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .main-nav {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 10px 14px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
  }

  .nav-link {
    min-height: 46px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 5px 10px 5px 8px;
    border: 0;
    border-radius: 9px;
    color: var(--nav-text);
    background: transparent;
    box-shadow: none;
    font-size: 14.5px;
    font-weight: 620;
    line-height: 1.35;
    transform: none;
  }

  .nav-link .nav-label {
    min-width: 0;
    overflow: hidden;
    font: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-icon {
    width: 32px;
    height: 32px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    color: var(--nav-muted);
    background: transparent;
    box-shadow: none;
  }

  .nav-icon .ui-icon {
    width: 19px;
    height: 19px;
  }

  .nav-link:hover {
    color: #202124;
    background: var(--nav-hover);
    transform: none;
  }

  .nav-link:hover .nav-icon {
    color: var(--nav-active-strong);
    background: transparent;
    box-shadow: none;
  }

  .nav-link.active,
  .nav-link[aria-current="page"] {
    color: #0842a0;
    background: var(--nav-active);
    box-shadow: inset 3px 0 0 var(--nav-active-strong);
  }

  .nav-link.active .nav-icon,
  .nav-link[aria-current="page"] .nav-icon {
    color: var(--nav-active-strong);
    background: transparent;
    box-shadow: none;
  }

  .nav-link em {
    min-width: 25px;
    height: 23px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 750;
  }

  .nav-group {
    margin: 2px 0 0;
    padding: 0;
    border-radius: 9px;
    background: transparent;
  }

  .nav-group summary {
    min-height: 46px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 9px;
    color: var(--nav-text);
    background: transparent;
  }

  .nav-group summary .nav-summary-main {
    min-width: 0;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
  }

  .nav-group summary .nav-label {
    overflow: hidden;
    color: inherit;
    font-size: 14.5px;
    font-weight: 620;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-group summary:hover {
    color: #202124;
    background: var(--nav-hover);
  }

  .nav-group summary:hover .nav-icon,
  .nav-group[open] summary .nav-icon {
    color: var(--nav-active-strong);
    background: transparent;
    box-shadow: none;
  }

  .nav-group[open] {
    padding-bottom: 5px;
    background: #f7f9fc;
  }

  .nav-group[open] summary {
    color: #202124;
    background: #eef2f7;
  }

  .nav-chevron {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  .nav-chevron .ui-icon {
    width: 16px !important;
    height: 16px !important;
  }

  .nav-sub {
    display: grid;
    gap: 1px;
    margin: 3px 7px 0 23px;
    padding: 2px 0 1px 10px;
    border-left: 1px solid #d7dde5;
  }

  .nav-sub .nav-link {
    min-height: 39px;
    grid-template-columns: 27px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 4px 8px 4px 5px;
    border-radius: 7px;
    font-size: 13.5px;
    font-weight: 590;
  }

  .nav-sub .nav-icon {
    width: 27px;
    height: 27px;
    border-radius: 7px;
  }

  .nav-sub .nav-icon .ui-icon {
    width: 16px;
    height: 16px;
  }

  .sidebar-foot {
    flex: 0 0 auto;
    padding: 10px 10px 12px;
    border-top: 1px solid var(--nav-line);
    background: #fff;
  }

  .user-mini {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 9px;
    padding: 8px;
    border: 0;
    border-radius: 9px;
    background: #f6f8fb;
    box-shadow: none;
  }

  .user-mini .avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }

  .user-mini strong {
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .user-mini small {
    font-size: 11.5px;
  }

  .signout {
    min-height: 38px;
    margin-top: 5px;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 12.5px;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  :root {
    --sidebar-width: 252px;
  }
}

/* Make the urgent queue the first and strongest working surface after the
   summary metrics, without adding decorative noise. */
.dashboard-priority-full {
  margin-bottom: 20px;
  border-top: 3px solid #d93025;
  box-shadow: 0 1px 2px rgba(60, 64, 67, .08);
}

.dashboard-priority-full .section-heading {
  margin-bottom: 15px;
}

.priority-list-grid .priority-row {
  border-bottom-color: #e5e8ec;
}

.priority-list-grid .priority-row.urgency-overdue {
  background: linear-gradient(90deg, rgba(217, 48, 37, .055), transparent 42%);
}

.priority-list-grid .priority-row.urgency-critical {
  background: linear-gradient(90deg, rgba(230, 81, 0, .05), transparent 42%);
}

/* Main-process progress and attention labels. */
.project-table-head,
.project-lines > a.project-table-row {
  grid-template-columns:
    minmax(310px, 1.52fr)
    minmax(170px, .68fr)
    minmax(235px, .78fr)
    minmax(132px, .44fr);
}

.project-main {
  align-content: center;
}

.project-attention {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.project-alert {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 690;
  line-height: 1.2;
  white-space: nowrap;
}

.project-alert.overdue {
  color: #a50e0e;
  background: #fce8e6;
  border-color: #f4c7c3;
}

.project-alert.critical {
  color: #9a4600;
  background: #feefe3;
  border-color: #f9d6b8;
}

.project-alert.warning {
  color: #7a4f00;
  background: #fef7e0;
  border-color: #f5df9b;
}

.project-progress {
  max-width: 220px;
  grid-template-columns: 54px minmax(105px, 1fr);
}

/* Sort controls now communicate neutral, ascending and descending states. */
.project-sort-heading {
  justify-content: flex-start;
  gap: 8px;
  cursor: pointer;
}

.project-sort-heading.project-head-center {
  justify-content: center;
}

.project-sort-heading .sort-indicator {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: #8a9097;
  transition: color .15s ease, transform .15s ease;
}

.project-sort-heading:hover .sort-indicator {
  color: #0b57d0;
}

.project-sort-heading.active .sort-indicator,
.project-sort-heading .sort-active {
  color: #0b57d0;
}

.project-sort-heading[aria-sort="ascending"],
.project-sort-heading[aria-sort="descending"] {
  background: #eef4ff;
}

@media (max-width: 1180px) {
  .project-table-head,
  .project-lines > a.project-table-row {
    grid-template-columns:
      minmax(280px, 1fr)
      minmax(210px, .72fr)
      minmax(132px, .46fr);
  }
}

@media (max-width: 900px) {
  .dashboard-priority-full {
    border-top-width: 2px;
  }

  .project-attention {
    margin-top: 4px;
  }
}

/* ========================================================================== 
   v1.0.15 — In-place dashboard sorting, main-work drill-down and
   restrained editorial navigation
   ========================================================================== */

/* The brand artwork is a monoline workflow mark. It inherits its colour so it
   remains legible in both the light mobile drawer and dark desktop rail. */
.brand-mark {
  color: #0b57d0;
  background: transparent !important;
}

.brand-symbol {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.brand-symbol .brand-accent {
  color: #0b57d0;
}

/* Desktop navigation: one quiet, architectural surface. No floating icon
   tiles, oversized pills, gradients or decorative shadows. */
@media (min-width: 901px) {
  :root {
    --sidebar-width: 258px;
  }

  .sidebar {
    color: #d7dbe1;
    background: #15171a;
    border-right: 1px solid #292c31;
    box-shadow: none;
  }

  .sidebar-head {
    min-height: 86px;
    flex-basis: 86px;
    padding: 17px 18px;
    background: #15171a;
    border-bottom: 1px solid #292c31;
  }

  .brand {
    grid-template-columns: 37px minmax(0, 1fr);
    gap: 12px;
  }

  .brand-mark,
  .brand-symbol {
    width: 37px;
    height: 37px;
    flex-basis: 37px;
    border-radius: 0;
  }

  .brand-mark {
    color: #f5f7fa;
  }

  .brand-symbol .brand-accent {
    color: #8ab4f8;
  }

  .brand strong {
    color: #f7f8fa;
    font-size: 15.5px;
    font-weight: 680;
    letter-spacing: -.01em;
  }

  .brand small {
    margin-top: 2px;
    color: #9299a3;
    font-size: 10px;
    font-weight: 560;
    letter-spacing: .095em;
    text-transform: uppercase;
  }

  .main-nav {
    gap: 2px;
    padding: 18px 12px 20px;
    scrollbar-color: #4a4f57 transparent;
  }

  .main-nav::-webkit-scrollbar {
    width: 7px;
  }

  .main-nav::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #4a4f57;
    background-clip: padding-box;
  }

  .nav-link {
    min-height: 48px;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 6px 11px 6px 10px;
    border-radius: 6px;
    color: #c4c9d0;
    background: transparent;
    font-size: 14.5px;
    font-weight: 560;
    letter-spacing: .002em;
  }

  .nav-icon {
    width: 30px;
    height: 30px;
    color: #8f969f;
    background: transparent !important;
    border-radius: 0;
    box-shadow: none !important;
  }

  .nav-icon .ui-icon {
    width: 19px;
    height: 19px;
    stroke-width: 1.7;
  }

  .nav-link:hover {
    color: #ffffff;
    background: #1d2025;
  }

  .nav-link:hover .nav-icon {
    color: #dbe6f8;
  }

  .nav-link.active,
  .nav-link[aria-current="page"] {
    color: #ffffff;
    background: #22262c;
    box-shadow: inset 2px 0 0 #8ab4f8;
  }

  .nav-link.active .nav-icon,
  .nav-link[aria-current="page"] .nav-icon {
    color: #8ab4f8;
  }

  .nav-link em {
    min-width: 24px;
    height: 22px;
    padding: 0 6px;
    color: #fff;
    background: #c33a32;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
  }

  .nav-group {
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid #292c31;
    border-radius: 0;
    background: transparent !important;
  }

  .nav-group summary {
    min-height: 48px;
    grid-template-columns: minmax(0, 1fr) 28px;
    padding: 6px 9px 6px 10px;
    border-radius: 6px;
    color: #c4c9d0;
    background: transparent !important;
  }

  .nav-group summary .nav-summary-main {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 10px;
  }

  .nav-group summary .nav-label {
    color: inherit;
    font-size: 14.5px;
    font-weight: 560;
  }

  .nav-group summary:hover,
  .nav-group[open] summary {
    color: #fff;
    background: #1d2025 !important;
  }

  .nav-group summary:hover .nav-icon,
  .nav-group[open] summary .nav-icon {
    color: #8ab4f8;
  }

  .nav-chevron {
    width: 28px;
    height: 28px;
    color: #8f969f;
    background: transparent !important;
    border-radius: 0;
  }

  .nav-sub {
    gap: 1px;
    margin: 4px 5px 0 24px;
    padding: 3px 0 2px 12px;
    border-left: 1px solid #343940;
  }

  .nav-sub .nav-link {
    min-height: 40px;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 5px 9px 5px 7px;
    border-radius: 5px;
    color: #aeb4bd;
    font-size: 13.5px;
    font-weight: 530;
  }

  .nav-sub .nav-icon {
    width: 26px;
    height: 26px;
  }

  .nav-sub .nav-icon .ui-icon {
    width: 16px;
    height: 16px;
  }

  .nav-sub .nav-link.active {
    color: #fff;
    background: #22262c;
    box-shadow: inset 2px 0 0 #8ab4f8;
  }

  .sidebar-foot {
    padding: 13px 14px 14px;
    border-top: 1px solid #292c31;
    background: #15171a;
  }

  .user-mini {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    padding: 4px 2px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .user-mini .avatar {
    width: 36px;
    height: 36px;
    color: #15171a !important;
    background: #eef1f5 !important;
  }

  .user-mini strong {
    color: #f2f4f7;
    font-size: 13.5px;
    font-weight: 620;
  }

  .user-mini small {
    color: #8f969f;
    font-size: 11.5px;
  }

  .signout {
    min-height: 38px;
    margin-top: 0;
    padding: 7px 8px;
    border-top: 1px solid #292c31;
    border-radius: 0;
    color: #9299a3;
    font-size: 12.5px;
    font-weight: 560;
  }

  .signout:hover {
    color: #fff;
    background: transparent;
  }

  .signout:hover .ui-icon {
    color: #ef8d85;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  :root {
    --sidebar-width: 246px;
  }
}

/* Main-work table: the dashboard contains only project-level rows. Each row
   opens an in-place view of its top-level processes instead of navigating or
   exposing child activities in the main list. */
.project-table {
  overflow: hidden;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  background: #fff;
}

.project-table-head,
.project-table-row {
  display: grid;
  grid-template-columns:
    minmax(330px, 1.5fr)
    minmax(170px, .68fr)
    minmax(220px, .76fr)
    minmax(130px, .44fr);
  align-items: center;
  gap: 16px;
}

.project-table-head {
  min-height: 52px;
  padding: 0 16px;
  border-bottom: 1px solid #dfe3e8;
  background: #f7f8fa;
}

.project-sort-heading {
  appearance: none;
  min-width: 0;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  padding: 0 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #515861;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 680;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.project-sort-heading:hover {
  color: #0b57d0;
  background: #eef4ff;
}

.project-sort-heading.active {
  color: #0b57d0;
  border-bottom-color: #0b57d0;
}

.project-sort-heading:focus-visible {
  outline: 3px solid rgba(11, 87, 208, .18);
  outline-offset: -3px;
}

.project-head-center {
  justify-content: center;
  text-align: center;
}

.sort-indicator {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-grid;
  place-items: center;
  color: #8a9097;
}

.sort-indicator svg {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
}

.sort-up-icon,
.sort-down-icon {
  display: none;
}

.project-sort-heading[data-direction="ascending"] .sort-neutral-icon,
.project-sort-heading[data-direction="descending"] .sort-neutral-icon {
  display: none;
}

.project-sort-heading[data-direction="ascending"] .sort-up-icon,
.project-sort-heading[data-direction="descending"] .sort-down-icon {
  display: block;
  color: #0b57d0;
}

.project-table-body {
  display: block;
}

.project-table-item {
  border-bottom: 1px solid #e7eaee;
  background: #fff;
}

.project-table-item:last-child {
  border-bottom: 0;
}

.project-table-row {
  appearance: none;
  width: 100%;
  min-height: 92px;
  padding: 13px 16px;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease;
}

.project-table-row:hover {
  background: #f7f9fc;
}

.project-table-row:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid rgba(11, 87, 208, .2);
  outline-offset: -3px;
}

.project-table-item.is-open > .project-table-row {
  background: #f5f8fd;
}

.project-main {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
}

.project-title-line {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.project-disclosure {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  color: #69717a;
  transition: color .15s ease, transform .18s ease;
}

.project-disclosure svg {
  width: 18px;
  height: 18px;
}

.project-table-item.is-open .project-disclosure {
  color: #0b57d0;
  transform: rotate(90deg);
}

.project-title-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.project-title-copy small {
  color: #69717a;
  font-size: 12px;
  font-weight: 570;
  line-height: 1.35;
}

.project-title-copy strong {
  overflow: hidden;
  color: #202124;
  font-size: 15.5px;
  font-weight: 680;
  line-height: 1.45;
  text-overflow: ellipsis;
}

.project-owner {
  color: #515861;
  font-size: 14px;
  line-height: 1.45;
}

.project-progress {
  max-width: 220px;
  grid-template-columns: 54px minmax(105px, 1fr);
}

.project-progress b {
  color: #30343a;
  font-size: 14px;
  font-weight: 700;
}

.project-status-cell .status {
  min-width: 108px;
}

.project-attention {
  margin: 5px 0 0 33px;
}

.project-drilldown {
  padding: 20px 22px 22px 49px;
  border-top: 1px solid #dfe5ed;
  background: #fbfcfe;
}

.project-drilldown[hidden] {
  display: none !important;
}

.project-drilldown-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.project-drilldown-head .eyebrow {
  margin: 0 0 4px;
  color: #69717a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

.project-drilldown-head h3 {
  margin: 0;
  color: #202124;
  font-size: 16px;
  font-weight: 680;
  line-height: 1.4;
}

.project-open-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: #0b57d0;
  font-size: 13px;
  font-weight: 650;
}

.project-open-link svg {
  width: 17px;
  height: 17px;
}

.project-open-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.project-process-grid {
  border-top: 1px solid #e1e5ea;
  border-bottom: 1px solid #e1e5ea;
  background: #fff;
}

.project-process-card {
  min-height: 70px;
  display: grid;
  grid-template-columns: 118px minmax(240px, 1fr) minmax(170px, .46fr) minmax(160px, .44fr);
  align-items: center;
  gap: 16px;
  padding: 11px 14px;
  border-bottom: 1px solid #e7eaee;
  border-left: 3px solid transparent;
  color: #30343a;
  background: #fff;
  transition: background .15s ease, border-color .15s ease;
}

.project-process-card:last-child {
  border-bottom: 0;
}

.project-process-card:hover {
  background: #f7f9fc;
}

.project-process-card.is-current {
  border-left-color: #0b57d0;
  background: #f4f8ff;
}

.project-process-card.urgency-overdue {
  border-left-color: #b3261e;
}

.project-process-card.urgency-critical:not(.urgency-overdue) {
  border-left-color: #b06000;
}

.project-process-topline {
  display: grid;
  justify-items: start;
  gap: 6px;
}

.project-process-topline > b {
  color: #69717a;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.project-process-topline .status {
  min-width: 0;
  min-height: 25px;
  padding: 3px 8px;
  font-size: 11px;
}

.project-process-card > strong {
  color: #202124;
  font-size: 14px;
  font-weight: 620;
  line-height: 1.45;
}

.project-process-progress {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 42px;
  align-items: center;
  gap: 9px;
}

.project-process-progress i {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4e8ed;
}

.project-process-progress i em {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent, #0b57d0);
}

.project-process-progress > b {
  color: #3c4043;
  font-size: 12.5px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.project-process-meta {
  min-width: 0;
  display: grid;
  justify-items: end;
  gap: 3px;
  color: #69717a;
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
}

.project-process-meta em {
  overflow: hidden;
  max-width: 100%;
  color: #0b57d0;
  font-style: normal;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-process-meta time {
  font-variant-numeric: tabular-nums;
}

.project-process-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed #cfd5dc;
  color: #69717a;
  background: #fff;
  font-size: 13.5px;
  text-align: center;
}

@media (max-width: 1180px) {
  .project-table-head,
  .project-table-row {
    grid-template-columns:
      minmax(290px, 1fr)
      minmax(205px, .7fr)
      minmax(128px, .42fr);
  }

  .project-table-head > :nth-child(2),
  .project-owner {
    display: none;
  }

  .project-mobile-owner {
    display: block;
    margin-left: 33px;
  }

  .project-process-card {
    grid-template-columns: 108px minmax(220px, 1fr) minmax(160px, .5fr);
  }

  .project-process-meta {
    display: none;
  }
}

@media (max-width: 900px) {
  .project-table-head {
    display: none;
  }

  .project-table-row {
    grid-template-columns: minmax(0, 1fr) minmax(120px, auto);
    grid-template-areas:
      "main status"
      "progress progress";
    gap: 9px 12px;
    min-height: 106px;
    padding: 14px;
  }

  .project-main {
    grid-area: main;
  }

  .project-progress {
    grid-area: progress;
    width: min(260px, 100%);
    max-width: none;
    justify-self: start;
    margin-left: 33px;
  }

  .project-status-cell {
    grid-area: status;
  }

  .project-drilldown {
    padding: 18px 14px 20px;
  }

  .project-process-card {
    grid-template-columns: 96px minmax(0, 1fr) minmax(145px, .48fr);
    gap: 12px;
  }
}

@media (max-width: 680px) {
  .project-table-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "progress"
      "status";
  }

  .project-progress,
  .project-mobile-owner,
  .project-attention {
    margin-left: 33px;
  }

  .project-status-cell {
    justify-content: flex-start;
    margin-left: 33px;
  }

  .project-drilldown-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .project-process-card {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 8px 12px;
    padding: 12px 10px;
  }

  .project-process-progress {
    grid-column: 2;
  }

  .project-process-meta {
    display: grid;
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }
}

/* ========================================================================== 
   v1.0.16 — Unified dashboard entry, restrained premium navigation,
   readable adaptive filters and sequence-free process drill-down
   ========================================================================== */

/* Desktop navigation uses a quiet editorial hierarchy: no floating tiles,
   no decorative icon containers and no oversized active pills. */
@media (min-width: 901px) {
  :root {
    --sidebar-width: 250px;
  }

  .app-shell {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important;
  }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    z-index: 40;
    width: var(--sidebar-width) !important;
    height: 100dvh;
    color: #c7cbd1;
    background: #121416;
    border-right: 1px solid #272a2e;
    box-shadow: none !important;
  }

  .workspace {
    grid-column: 2;
    min-width: 0;
  }

  .sidebar-head {
    min-height: 92px;
    flex: 0 0 92px;
    padding: 21px 20px 18px;
    background: #121416;
    border-bottom: 1px solid #272a2e;
  }

  .brand {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 13px;
    min-width: 0;
  }

  .brand-mark,
  .brand-symbol {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .brand-mark {
    color: #eef1f5;
  }

  .brand-symbol .brand-accent {
    color: #84aef2;
  }

  .brand-copy {
    min-width: 0;
  }

  .brand strong {
    overflow: hidden;
    color: #f4f5f7;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -.012em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand small {
    margin-top: 4px;
    color: #858b94;
    font-size: 9.5px;
    font-weight: 570;
    line-height: 1.25;
    letter-spacing: .115em;
    text-transform: uppercase;
  }

  .main-nav {
    gap: 0;
    padding: 20px 0 24px;
    scrollbar-width: thin;
    scrollbar-color: #34383d transparent;
  }

  .main-nav::-webkit-scrollbar {
    width: 5px;
  }

  .main-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #34383d;
  }

  .nav-link {
    position: relative;
    min-height: 50px;
    grid-template-columns: 25px minmax(0, 1fr) auto;
    gap: 13px;
    padding: 0 20px;
    border: 0;
    border-radius: 0;
    color: #adb3bc;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14.5px;
    font-weight: 550;
    letter-spacing: .002em;
  }

  .nav-link::before {
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 22px;
    content: '';
    background: #8ab4f8;
    opacity: 0;
    transform: translateY(-50%);
  }

  .nav-icon {
    width: 25px;
    height: 25px;
    color: #777e87;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .nav-icon .ui-icon {
    width: 18px;
    height: 18px;
  }

  .nav-link:hover {
    color: #f0f2f5;
    background: rgba(255,255,255,.026) !important;
  }

  .nav-link:hover .nav-icon {
    color: #bdc3cb;
  }

  .nav-link.active,
  .nav-link[aria-current="page"] {
    color: #ffffff;
    background: rgba(255,255,255,.038) !important;
    box-shadow: none !important;
    font-weight: 620;
  }

  .nav-link.active::before,
  .nav-link[aria-current="page"]::before {
    opacity: 1;
  }

  .nav-link.active .nav-icon,
  .nav-link[aria-current="page"] .nav-icon {
    color: #a9c7f7;
  }

  .nav-link em {
    min-width: 22px;
    height: 21px;
    padding: 0 6px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: #a83b36;
    font-size: 10.5px;
    font-weight: 720;
  }

  .nav-group {
    margin: 13px 0 0;
    padding: 13px 0 0;
    border-top: 1px solid #272a2e;
    border-radius: 0;
    background: transparent !important;
  }

  .nav-group summary {
    min-height: 50px;
    grid-template-columns: minmax(0, 1fr) 24px;
    padding: 0 18px 0 20px;
    border: 0;
    border-radius: 0;
    color: #adb3bc;
    background: transparent !important;
  }

  .nav-group summary .nav-summary-main {
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 13px;
  }

  .nav-group summary .nav-label {
    color: inherit;
    font-size: 14.5px;
    font-weight: 550;
  }

  .nav-group summary:hover,
  .nav-group[open] summary {
    color: #f0f2f5;
    background: rgba(255,255,255,.026) !important;
  }

  .nav-chevron {
    width: 24px;
    height: 24px;
    color: #737a83;
    background: transparent !important;
    border-radius: 0;
  }

  .nav-sub {
    gap: 0;
    margin: 2px 0 1px;
    padding: 2px 0 4px;
    border: 0;
  }

  .nav-sub .nav-link {
    min-height: 42px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 0 20px 0 58px;
    color: #8f969f;
    font-size: 13px;
    font-weight: 520;
  }

  .nav-sub .nav-icon {
    display: none;
  }

  .nav-sub .nav-link::before {
    left: 28px;
    width: 1px;
    height: 17px;
  }

  .nav-sub .nav-link.active {
    color: #f4f5f7;
    background: transparent !important;
  }

  .sidebar-foot {
    padding: 15px 20px 17px;
    border-top: 1px solid #272a2e;
    background: #121416;
  }

  .user-mini {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    padding: 0 0 13px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .user-mini .avatar {
    width: 34px;
    height: 34px;
    color: #17191c !important;
    background: #edf0f4 !important;
  }

  .user-mini strong {
    color: #eef0f3;
    font-size: 13px;
    font-weight: 610;
  }

  .user-mini small {
    color: #777e87;
    font-size: 11px;
  }

  .signout {
    min-height: 36px;
    margin: 0;
    padding: 8px 0 0;
    border-top: 1px solid #272a2e;
    border-radius: 0;
    color: #838a93;
    background: transparent !important;
    font-size: 12px;
    font-weight: 550;
  }

  .signout:hover {
    color: #f2f3f5;
  }

  /* The mobile drawer controls must never leak into desktop layouts. */
  .topbar .menu-button,
  .sidebar .sidebar-close,
  [data-sidebar-open] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 900px) {
  .topbar .menu-button,
  [data-sidebar-open] {
    display: inline-grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .sidebar .sidebar-close {
    display: inline-grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* Adaptive filter surface. Native select elements remain in place for
   keyboard/mobile reliability, while a readable value layer can wrap long
   Thai and English labels without truncating them. */
.premium-filter-bar {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dde2e8;
  border-radius: 9px;
  background: #f7f8fa;
}

.filter-control {
  position: relative;
  min-width: 0;
  min-height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 10px 13px;
  border: 1px solid #d7dce2;
  border-radius: 7px;
  color: #202124;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.filter-control:hover {
  border-color: #b8c1cc;
  background: #fff;
}

.filter-control:focus-within,
.filter-control.is-focused {
  border-color: #0b57d0;
  box-shadow: 0 0 0 3px rgba(11,87,208,.12);
}

.filter-caption {
  color: #6b7280;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .025em;
}

.filter-search-control {
  flex: 1.45 1 300px;
}

.filter-search-box {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.filter-search-box svg {
  width: 19px;
  height: 19px;
  color: #7a828c;
}

.filter-search-box input {
  width: 100%;
  min-height: 28px;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  color: #202124;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14.5px;
  font-weight: 540;
  line-height: 1.35;
}

.filter-search-box input::placeholder {
  color: #9aa0a6;
}

.smart-filter {
  flex: 1 1 220px;
  padding-right: 42px;
  cursor: pointer;
}

.filter-status-control {
  flex-basis: 190px;
}

.filter-sort-control {
  flex: 1.2 1 270px;
}

.smart-filter-value {
  min-width: 0;
  color: #202124;
  font-size: 14px;
  font-weight: 590;
  line-height: 1.35;
  overflow-wrap: anywhere;
  white-space: normal;
}

.smart-filter-chevron {
  position: absolute;
  right: 13px;
  top: 50%;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #6f7781;
  transform: translateY(-50%);
  pointer-events: none;
}

.smart-filter-chevron svg {
  width: 18px;
  height: 18px;
}

.smart-filter > select {
  position: absolute !important;
  inset: 0;
  z-index: 2;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  cursor: pointer;
}

.dashboard-filter-actions {
  flex: 0 1 auto;
  min-height: 68px;
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.dashboard-filter-actions .button {
  min-height: 68px;
  padding-inline: 17px;
  border-radius: 7px;
  white-space: nowrap;
}

@media (max-width: 1280px) {
  .filter-search-control {
    flex-basis: 100%;
  }

  .dashboard-filter-actions {
    flex: 1 1 220px;
  }

  .dashboard-filter-actions .button {
    flex: 1;
  }
}

@media (max-width: 680px) {
  .premium-filter-bar {
    gap: 8px;
    padding: 9px;
  }

  .filter-control,
  .smart-filter,
  .filter-search-control,
  .filter-status-control,
  .filter-sort-control,
  .dashboard-filter-actions {
    flex: 1 1 100%;
  }

  .dashboard-filter-actions {
    min-height: 50px;
  }

  .dashboard-filter-actions .button {
    min-height: 50px;
  }
}

/* Drill-down is a clean main-process overview. Sequence codes are intentionally
   removed because hierarchy is communicated through grouping, status and the
   current-process marker instead of 1/2/3/4/5 labels. */
.project-process-card {
  grid-template-columns: minmax(280px, 1.35fr) minmax(120px, .42fr) minmax(180px, .58fr) minmax(150px, .46fr) !important;
  min-height: 76px;
  gap: 18px;
  padding: 13px 16px;
}

.project-process-identity {
  min-width: 0;
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.project-process-node {
  width: 10px;
  height: 10px;
  border: 2px solid #aeb5bd;
  border-radius: 50%;
  background: #fff;
}

.project-process-card.is-current .project-process-node {
  border-color: #0b57d0;
  background: #0b57d0;
  box-shadow: 0 0 0 4px rgba(11,87,208,.12);
}

.project-process-card.urgency-overdue .project-process-node {
  border-color: #b3261e;
}

.project-process-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.project-process-copy small {
  color: #707780;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: .025em;
}

.project-process-card.is-current .project-process-copy small {
  color: #0b57d0;
}

.project-process-copy strong {
  color: #202124;
  font-size: 14.5px;
  font-weight: 630;
  line-height: 1.45;
}

.project-process-status {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.project-process-status .status {
  min-width: 0;
  max-width: 100%;
}

.project-process-meta em {
  color: #515861;
}

@media (max-width: 1180px) {
  .project-process-card {
    grid-template-columns: minmax(260px, 1fr) minmax(115px, .42fr) minmax(170px, .56fr) !important;
  }

  .project-process-meta {
    display: none;
  }
}

@media (max-width: 900px) {
  .project-process-card {
    grid-template-columns: minmax(0, 1fr) minmax(115px, auto) !important;
    grid-template-areas:
      "identity status"
      "progress progress";
    gap: 10px 14px;
  }

  .project-process-identity {
    grid-area: identity;
  }

  .project-process-status {
    grid-area: status;
    justify-content: flex-end;
  }

  .project-process-progress {
    grid-area: progress;
    margin-left: 25px;
  }
}

@media (max-width: 560px) {
  .project-process-card {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "identity"
      "status"
      "progress";
  }

  .project-process-status {
    justify-content: flex-start;
    margin-left: 25px;
  }
}

/* ================================================================
   v1.0.17 — deterministic priority queue, hierarchy rail and compact
   sidebar footer. These final overrides intentionally sit last so the
   result remains stable over legacy responsive rules in this stylesheet.
   ================================================================ */

/* The user identity is already available in the top-right profile chip.
   Keep the lower-left area focused on the single destructive/session action. */
.sidebar-foot {
  padding: 14px 18px 18px !important;
  border-top: 1px solid rgba(255,255,255,.09) !important;
  background: #121416 !important;
}

.sidebar-foot .user-mini {
  display: none !important;
}

.sidebar-foot .sidebar-logout,
.sidebar-foot .signout {
  width: 100%;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 7px !important;
  color: #c9ced5 !important;
  background: rgba(255,255,255,.025) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1;
  text-decoration: none;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}

.sidebar-foot .sidebar-logout .ui-icon,
.sidebar-foot .signout .ui-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto;
}

.sidebar-foot .sidebar-logout:hover,
.sidebar-foot .signout:hover {
  color: #fff !important;
  border-color: rgba(255,255,255,.28) !important;
  background: rgba(255,255,255,.065) !important;
}

.sidebar-foot .sidebar-logout:focus-visible,
.sidebar-foot .signout:focus-visible {
  outline: 2px solid #8ab4f8;
  outline-offset: 2px;
}

/* A restrained tree rail makes the parent project → main-process hierarchy
   visible without introducing sequence numbers or decorative cards. */
.project-drilldown {
  --hierarchy-rail-x: 29px;
  position: relative;
  overflow: visible;
  padding-left: 62px !important;
}

.project-drilldown::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: var(--hierarchy-rail-x);
  top: -1px;
  bottom: 37px;
  width: 1px;
  background: #cbd3dd;
}

.project-drilldown-head,
.project-process-grid,
.project-process-empty {
  position: relative;
  z-index: 1;
}

.project-drilldown-head::before {
  content: "";
  position: absolute;
  left: -33px;
  top: 20px;
  width: 22px;
  border-top: 1px solid #cbd3dd;
}

.project-process-grid {
  overflow: visible;
}

.project-process-card {
  position: relative;
  overflow: visible;
}

.project-process-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -33px;
  top: 50%;
  width: 49px;
  border-top: 1px solid #cbd3dd;
  transform: translateY(-.5px);
}

.project-process-card:last-child::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: -34px;
  top: calc(50% + 1px);
  bottom: -2px;
  width: 3px;
  background: #fbfcfe;
}

.project-process-identity,
.project-process-status,
.project-process-progress,
.project-process-meta {
  position: relative;
  z-index: 1;
}

.project-process-node {
  box-shadow: 0 0 0 3px #fff;
}

.project-process-card.is-current .project-process-node {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(11,87,208,.11);
}

@media (max-width: 900px) {
  .sidebar-foot {
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom)) !important;
    border-top-color: #e1e5ea !important;
    background: #fff !important;
  }

  .sidebar-foot .sidebar-logout,
  .sidebar-foot .signout {
    color: #3c4043 !important;
    border-color: #d7dce2 !important;
    background: #fff !important;
  }

  .sidebar-foot .sidebar-logout:hover,
  .sidebar-foot .signout:hover {
    color: #0b57d0 !important;
    border-color: #a9c7f7 !important;
    background: #f7faff !important;
  }

  .project-drilldown {
    --hierarchy-rail-x: 20px;
    padding-left: 46px !important;
  }

  .project-drilldown-head::before,
  .project-process-card::before {
    left: -26px;
    width: 38px;
  }

  .project-process-card:last-child::after {
    left: -27px;
  }
}

@media (max-width: 560px) {
  .project-drilldown {
    --hierarchy-rail-x: 15px;
    padding: 17px 10px 20px 35px !important;
  }

  .project-drilldown-head::before,
  .project-process-card::before {
    left: -20px;
    width: 29px;
  }

  .project-process-card:last-child::after {
    left: -21px;
  }
}