:root{--paper:#faf9f7;--panel:#fcfbf9;--ink:#191712;--ink-2:#5c5a54;--ink-3:#736f66;--line:#e7e5dd;--line-2:#d2cfc5;--accent:#1f6e43;--neg:#b31828;--fill-1:#8f8b80;--fill-2:#bdb9ad;--fill-3:#d8d4ca;--u:11px;--pad:22px;--gap:22px;--maxw:1400px;--sidebar-width:240px;--header-height:52px;--t-fast:.1s;--t-state:.15s;--ease:cubic-bezier(.2, 0, 0, 1);--text-display:32px;--text-body:14px;--text-micro:11px;--font-body:"Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;--font-thai:"IBM Plex Sans Thai", "Noto Sans Thai", "Helvetica Neue", sans-serif;--font-mono:"JetBrains Mono", "IBM Plex Mono", monospace;--tap-min:44px;--radius:0}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}body{font-family:var(--font-body);font-size:var(--text-body);font-variant-numeric:tabular-nums;background:var(--paper);color:var(--ink);min-height:100dvh;font-weight:500;line-height:1.42}:lang(th) body,:lang(th){font-family:var(--font-thai)}::selection{background:var(--accent);color:var(--paper)}.panel{background:var(--panel);border:1px solid var(--line-2)}.stat__lbl{font-size:var(--text-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600}.stat__val{font-family:var(--font-mono);font-size:var(--text-display);letter-spacing:-.01em;margin-top:6px;font-weight:600;line-height:1}.stat__sub{font-size:var(--text-micro);color:var(--ink-2);margin-top:4px;line-height:1.4}.bar{background:var(--line);height:4px;position:relative}.bar__fill{background:var(--accent);height:100%;transition:width var(--t-state) var(--ease)}.bar__fill--neg{background:var(--neg)}.bar__fill--muted{background:var(--fill-1)}.seg-control{border:1px solid var(--line-2);display:inline-flex}.seg-control button{appearance:none;background:var(--panel);border:0;border-left:1px solid var(--line-2);min-height:var(--tap-min);font-family:inherit;font-size:var(--text-micro);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2);cursor:pointer;transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);padding:0 16px;font-weight:600}.seg-control button:first-child{border-left:0}.seg-control button:hover{color:var(--accent)}.seg-control button.active{background:var(--ink);color:var(--paper)}.flex{display:flex}.flex-col{flex-direction:column;display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:8px}.gap-4{gap:16px}.w-full{width:100%}.text-micro{font-size:var(--text-micro)}.text-body{font-size:var(--text-body)}.font-semibold{font-weight:600}.text-muted{color:var(--ink-3)}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}@media (width<=480px){:root{--pad:16px;--gap:16px}}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);border-right:1px solid var(--line-2);background:var(--paper);z-index:150;flex-direction:column;height:100dvh;display:flex}.sidebar-header{min-height:var(--header-height);padding:0 var(--pad);border-bottom:1px solid var(--line-2);align-items:center;display:flex}.logo{letter-spacing:.18em;text-transform:uppercase;margin:0;font-size:15px;font-weight:600}.logo-accent{color:var(--accent)}.sidebar-menu{padding:var(--pad) calc(var(--pad) * .65);flex:1;overflow-y:auto}.menu-label{color:var(--ink-3);letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;padding:0 12px;font-size:9px;font-weight:600}.sidebar-menu ul{list-style:none}.menu-item{min-height:var(--tap-min);cursor:pointer;color:var(--ink-2);font-size:var(--text-micro);letter-spacing:.08em;text-transform:uppercase;transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);border-left:2px solid #0000;align-items:center;margin-bottom:2px;padding:0 12px;font-weight:600;display:flex}.menu-item:hover{color:var(--accent);background:var(--panel)}.menu-item.active{color:var(--ink);border-left-color:var(--accent);background:var(--panel)}.menu-icon{flex-shrink:0;align-items:center;margin-right:12px;display:flex}@media (width<=720px){.sidebar{transition:transform var(--t-state) var(--ease);position:fixed;top:0;left:0;transform:translate(-100%)}.sidebar.open{transform:translate(0)}}.topbar{min-height:var(--header-height);padding:8px var(--pad);border-bottom:1px solid var(--line-2);background:var(--paper);z-index:10;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex;position:sticky;top:0}.topbar-left{align-items:center;gap:12px;min-width:0;display:flex}.menu-toggle{appearance:none;background:var(--panel);border:1px solid var(--line-2);min-width:var(--tap-min);min-height:var(--tap-min);cursor:pointer;color:var(--ink);justify-content:center;align-items:center;padding:0;display:none}.topbar-title h1{font-size:var(--text-display);letter-spacing:-.02em;margin:0;font-weight:600;line-height:1.05}.topbar-actions{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.icon-btn{background:var(--panel);border:1px solid var(--line-2);color:var(--ink-2);cursor:pointer;min-width:var(--tap-min);min-height:var(--tap-min);transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);justify-content:center;align-items:center;padding:0;display:flex;position:relative}.icon-btn:hover{color:var(--accent);border-color:var(--accent)}.notification-dot{background-color:var(--neg);border-radius:50%;width:6px;height:6px;position:absolute;top:10px;right:10px}.user-profile{cursor:pointer;min-height:var(--tap-min);align-items:center;gap:10px;display:flex}.avatar{background:var(--ink);width:36px;height:36px;color:var(--paper);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.user-info{flex-direction:column;display:flex}.user-name{font-size:var(--text-body);font-weight:600}.user-role{font-size:var(--text-micro);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}@media (width<=720px){.menu-toggle{display:inline-flex}.user-info{display:none}}@media (width<=480px){.topbar-title h1{font-size:24px}}.dashboard-card{background:var(--panel);border:1px solid var(--line-2);flex-direction:column;height:100%;display:flex}.card-header{border-bottom:1px solid var(--line);padding:13px 16px}.card-header h3{font-size:var(--text-micro);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-3);margin:0;font-weight:600}.card-body{flex-direction:column;flex:1;padding:16px;display:flex}.view-container{gap:var(--gap);max-width:var(--maxw);flex-direction:column;display:flex}.kpi-grid{background:var(--line);border:1px solid var(--line);grid-template-columns:1fr;gap:1px;display:grid}.kpi-card{background:var(--panel);flex-direction:column;justify-content:space-between;min-height:120px;padding:16px;display:flex}.chart-container{justify-content:center;align-items:center;width:100%;height:100%;min-height:280px;display:flex}@media (width>=600px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}@media (width>=900px){.kpi-grid{grid-template-columns:repeat(4,1fr)}}@media (width<=480px){.stat__val{font-size:28px}}.project-selector{margin-bottom:4px;display:inline-flex}.project-header{justify-content:space-between;align-items:flex-start;gap:var(--gap);border-bottom:1px solid var(--line-2);flex-wrap:wrap;margin-bottom:4px;padding-bottom:12px;display:flex}.project-header h2{font-size:var(--text-display);letter-spacing:-.02em;margin-bottom:4px;font-weight:600;line-height:1.05}.project-header p{font-size:var(--text-micro);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}.status-plate{min-height:var(--tap-min);font-size:var(--text-micro);letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line-2);background:var(--panel);align-items:center;padding:0 16px;font-weight:600;display:inline-flex}.status-plate--accent{border-color:var(--accent);color:var(--accent)}.status-plate--neg{border-color:var(--neg);color:var(--neg)}.metrics-grid{gap:var(--gap);margin-bottom:var(--gap);grid-template-columns:1fr;display:grid}.bottom-grid{gap:var(--gap);grid-template-columns:1fr;display:grid}.col-span-2{grid-column:span 1}.progress-huge{font-family:var(--font-mono);font-size:var(--text-display);text-align:center;margin:auto 0;font-weight:600;line-height:1}.progress-container{margin-top:12px}.progress-label{font-size:var(--text-micro);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase;justify-content:space-between;margin-bottom:6px;display:flex}.res-stats{justify-content:space-around;gap:16px;margin:auto 0;display:flex}.stat-label{font-size:var(--text-micro);color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}.stat-value{font-family:var(--font-mono);font-size:20px;font-weight:600;line-height:1}.finance-grid{grid-template-columns:1fr;align-content:space-between;gap:16px;height:100%;display:grid}.issues-container{flex-direction:column;justify-content:center;gap:16px;height:100%;padding:8px 0;display:flex}.risk-group+.risk-group{border-top:1px solid var(--line);padding-top:16px}.risk-group__title{font-size:var(--text-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;font-weight:600}.indicator-group{flex-wrap:wrap;justify-content:space-around;gap:12px;width:100%;display:flex}.indicator-column{flex-direction:column;align-items:center;gap:8px;display:flex}.indicator-bars{flex-direction:column-reverse;gap:3px;display:flex}.indicator-segment{width:28px;height:4px;overflow:hidden}.indicator-segment .bar__fill,.indicator-segment .bar__fill--neg,.indicator-segment .bar__fill--muted{width:100%}.indicator-label{letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-size:9px;font-weight:600}.term-table{border-collapse:collapse;width:100%;font-size:var(--text-body)}.term-table th{text-align:left;background:var(--paper);color:var(--ink-3);font-weight:600;font-size:var(--text-micro);letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--line-2);padding:10px 12px}.term-table td{border-bottom:1px solid var(--line);padding:12px}.term-table tr:last-child td{border-bottom:none}.status-text{font-size:var(--text-micro);letter-spacing:.04em;align-items:center;gap:4px;font-weight:600;display:flex}.text-accent{color:var(--accent)}.text-neg{color:var(--neg)}@media (width>=720px){.metrics-grid{grid-template-columns:repeat(2,1fr)}.finance-grid{grid-template-columns:1fr 1fr}}@media (width>=1024px){.metrics-grid{grid-template-columns:repeat(4,1fr)}.col-span-2{grid-column:span 2}.bottom-grid{grid-template-columns:1fr 2fr}}@media (width<=480px){.term-table{white-space:nowrap;display:block;overflow-x:auto}}.view-toggle{margin-bottom:4px}.staffing-note{margin-bottom:12px}.staff-list{flex-direction:column;align-items:center;gap:4px;display:flex}.table-responsive{-webkit-overflow-scrolling:touch;width:100%;overflow-x:auto}.res-table{border-collapse:collapse;width:100%;min-width:640px}.res-table th,.res-table td{border:1px solid var(--line)}.res-table th{background:var(--paper);font-weight:600;font-size:var(--text-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:center;padding:10px 8px}.res-table th.month-header{background:var(--panel);color:var(--ink);border-bottom:1px solid var(--line-2)}.name-cell{background:var(--panel);vertical-align:top;width:140px;padding:12px}.heatmap-cell{text-align:center;vertical-align:top;min-width:120px;transition:outline var(--t-fast) var(--ease);padding:12px 8px}.heatmap-cell:focus-within,.heatmap-cell:hover{outline:1px solid var(--line-2);outline-offset:-1px}.heatmap-cell .percent{font-family:var(--font-mono);color:var(--ink);margin-bottom:4px;font-size:18px;font-weight:600}.heatmap-cell .hours{font-size:var(--text-micro);color:var(--ink-3);margin-bottom:8px}.heatmap-cell .details{text-align:left;color:var(--ink-2);line-height:1.4;font-size:var(--text-micro);margin-bottom:8px}.projects{flex-wrap:wrap;justify-content:center;gap:4px;display:flex}.proj-tag{background:var(--paper);border:1px solid var(--line-2);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);padding:2px 6px;font-size:9px;font-weight:600}.heat-empty{background:var(--panel)}.heat-low{background:#d8d4ca8c}.heat-mid{background:#bdb9ad8c}.heat-full{background:#1f6e4324}.heat-over{background:#b318281f}@media (width<=480px){.name-cell{width:110px}.heatmap-cell{min-width:100px;padding:10px 6px}}.app-container{width:100%;min-height:100dvh;display:flex;overflow:hidden}.main-content{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.content-scrollable{padding:var(--pad);padding-bottom:calc(var(--pad) * 2);flex:1;overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate-fade-in{animation:fadeIn var(--t-state) var(--ease) forwards}.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.grid-charts{gap:var(--gap);margin-bottom:var(--gap);grid-template-columns:1fr;display:grid}@media (width>=900px){.grid-charts{gap:var(--gap);grid-template-columns:1fr 2fr}}.sidebar-overlay{display:none}@media (width<=720px){.sidebar-overlay{z-index:140;cursor:pointer;background:#19171266;border:0;padding:0;display:block;position:fixed;inset:0}.sidebar-overlay[hidden]{display:none}}