/* SLT SME Incentive Dashboard: standalone, offline-first, blue flat design */
:root{color-scheme:light;--navy:#062b68;--navy-deep:#052451;--primary:#075fc1;--primary-dark:#064d9c;--primary-quiet:#e9f2ff;--blue-soft:#f0f6ff;--blue-1:#0b4f9d;--blue-2:#1978d2;--blue-3:#388ce3;--blue-4:#64a4ee;--blue-5:#8bbdf4;--blue-6:#afd1f8;--blue-7:#d3e5fa;--canvas:#f6f8fb;--white:#fff;--ink:#102748;--text:#314663;--muted:#667992;--border:#e3eaf3;--border-strong:#d0dbe9;--shadow:0 1px 2px rgba(17,37,70,.035);--radius:12px;--header:78px;--sidebar:258px;--focus:0 0 0 3px #8dbef9;}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--canvas);font-family:Inter,"Segoe UI",Arial,system-ui,sans-serif;font-size:14px;line-height:1.45;color:var(--text);-webkit-font-smoothing:antialiased}button,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible,select:focus-visible{outline:0;box-shadow:var(--focus)}a{color:inherit;text-decoration:none}svg.icon{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-definitions{position:absolute;width:0;height:0;overflow:hidden} [hidden]{display:none!important}
.topbar{height:var(--header);background:var(--white);border-bottom:1px solid var(--border);position:fixed;top:0;right:0;left:0;z-index:40;display:flex;align-items:center;gap:27px;padding:0 25px 0 0}.brand{width:var(--sidebar);min-width:var(--sidebar);height:100%;border-right:1px solid var(--border);display:flex;align-items:center;justify-content:center;padding:14px 23px}.brand img{display:block;width:184px;height:auto;max-height:58px;object-fit:contain}.topbar-title{font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.title-amp{color:var(--primary)}.topbar-right{margin-left:auto;display:flex;align-items:center;gap:18px;flex-shrink:0}.header-context{font-size:12px;color:var(--muted);background:#f4f7fb;border:1px solid var(--border);padding:6px 11px;border-radius:6px}.topbar-separator{height:28px;width:1px;background:var(--border)}.icon-button{border:0;background:transparent;border-radius:7px;color:#627896;width:35px;height:35px;display:grid;place-items:center}.icon-button:hover{background:var(--blue-soft);color:var(--primary)}.user-meta{display:flex;align-items:center;gap:10px}.avatar{width:37px;height:37px;border-radius:50%;background:#0754ac;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;letter-spacing:.4px}.user-label{display:flex;flex-direction:column;line-height:1.28;min-width:115px}.user-label strong{font-size:12px;color:var(--ink);font-weight:700}.user-label small{font-size:11px;color:var(--muted);margin-top:3px}.mobile-menu{display:none}
.app-shell{display:flex;padding-top:var(--header);min-height:100vh}.sidebar{width:var(--sidebar);flex-shrink:0;background:var(--navy);position:fixed;top:var(--header);left:0;bottom:0;color:#dbe8fa;overflow-y:auto;z-index:30}.sidebar-inner{min-height:100%;display:flex;flex-direction:column;padding:25px 12px 16px}.nav-caption{font-size:10px;font-weight:800;letter-spacing:1.3px;color:#8eaed8;margin:0 17px 15px}.nav-main{display:flex;flex-direction:column;gap:6px}.nav-item{position:relative;width:100%;display:flex;align-items:center;gap:13px;text-align:left;padding:12px 13px;border:1px solid transparent;border-radius:8px;background:transparent;color:#e1ebfc;min-height:45px;font-size:12.5px;font-weight:570;transition:background-color .16s ease,color .16s ease}.nav-item svg.icon{width:18px;height:18px}.nav-item span{flex:1}.nav-item:hover{background:#124280;color:#fff}.nav-item.active{background:#1067c7;color:#fff;font-weight:750}.nav-item.active:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:4px;background:#fff}.nav-chevron{opacity:.72;width:15px!important;height:15px!important}.sidebar-bottom{margin-top:auto;padding:35px 9px 0}.sidebar-status{display:flex;align-items:flex-start;gap:10px;background:#123e7a;border:1px solid #24528a;border-radius:9px;padding:12px 9px;color:#e7f0ff}.sidebar-status .icon{width:17px;height:17px;margin-top:1px}.sidebar-status span{display:flex;flex-direction:column;gap:3px}.sidebar-status strong{font-size:11px;font-weight:750}.sidebar-status small{font-size:10px;color:#b1c9e7}.sidebar-version{display:block;color:#8ba9d0;font-size:10px;padding:17px 4px 0}
.main-content{margin-left:var(--sidebar);width:calc(100% - var(--sidebar));min-width:0;padding:27px 28px 20px;max-width:1900px}.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:19px}.breadcrumb{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:550;color:#8393a6;margin-bottom:7px}.breadcrumb .icon{width:12px;height:12px}.page-heading h1{margin:0;color:var(--ink);font-size:27px;line-height:1.18;letter-spacing:-.9px;font-weight:800}.page-heading p{margin:6px 0 0;color:var(--muted);font-size:12.5px}.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;border-radius:7px;font-weight:700;min-height:37px;padding:8px 14px;transition:background .15s ease,border-color .15s ease;color:var(--primary);background:#fff;border:1px solid var(--border-strong);font-size:12px}.button .icon{width:15px;height:15px}.button-outline:hover{border-color:var(--primary);background:var(--blue-soft)}.button-primary{background:var(--primary);color:#fff;border-color:var(--primary)}.button-primary:hover{background:var(--primary-dark)}.button-small{padding:7px 10px;font-size:11px;min-height:32px}.demo-banner{display:flex;align-items:center;gap:9px;background:#eaf3ff;color:#375c8c;border:1px solid #d4e6fc;border-radius:8px;padding:9px 12px;margin-bottom:17px;font-size:11px}.demo-banner .icon{height:16px;width:16px;color:#176cbd}.demo-banner strong{color:#15599f;margin-right:4px}
.filterbar{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:17px}.filters-left{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px}.field{display:flex;flex-direction:column;gap:6px;min-width:0}.field-label{font-size:10.5px;font-weight:750;color:#62738a;letter-spacing:.15px}.select-wrap{display:flex;align-items:center;position:relative;height:37px;background:#fff;border:1px solid var(--border-strong);border-radius:7px;min-width:180px;color:#496688;box-shadow:var(--shadow)}.select-wrap:focus-within{border-color:#70aff0;box-shadow:var(--focus)}.select-wrap .field-icon{position:absolute;left:11px;width:16px;height:16px;pointer-events:none}.select-wrap select{appearance:none;background:transparent;border:0;outline:none;width:100%;padding:7px 33px 7px 36px;font-size:12px;color:var(--ink);font-weight:630;cursor:pointer}.select-chevron{position:absolute;right:11px;width:15px!important;height:15px!important;pointer-events:none;color:#7a90ae}.reset-filters{border:0;background:transparent;color:var(--primary);font-size:11px;font-weight:700;display:flex;align-items:center;gap:5px;padding:8px}.reset-filters .icon{height:14px;width:14px}.reset-filters:hover{text-decoration:underline}.period-state{display:inline-flex;align-items:center;gap:7px;background:#e9f2ff;border:1px solid #d0e5ff;border-radius:7px;padding:9px 12px;color:#0757a7;font-size:11px;font-weight:800;white-space:nowrap;min-height:37px}.period-state .icon{width:15px;height:15px}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:17px}.metric-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:19px 15px;display:flex;align-items:flex-start;gap:13px;min-height:112px;box-shadow:var(--shadow)}.metric-icon{display:grid;place-items:center;background:#e8f2ff;color:#0963bd;border-radius:9px;width:49px;height:49px;flex-shrink:0}.metric-icon .icon{width:24px;height:24px;stroke-width:1.9}.metric-copy{min-width:0;flex:1}.metric-label{font-weight:650;color:#5e7086;font-size:11.5px;display:flex;justify-content:space-between;align-items:center;gap:4px;margin-bottom:5px}.tiny-info{border:0;background:none;padding:2px;color:#99a7ba;display:flex}.tiny-info .icon{width:14px;height:14px}.tiny-info:hover{color:var(--primary)}.metric-value{font-weight:800;letter-spacing:-.5px;line-height:1.2;font-size:24px;color:var(--ink);white-space:nowrap}.metric-value.metric-status{font-size:19px;color:var(--primary);padding-top:2px}.metric-sub{font-size:10.5px;color:#7b8ba0;margin-top:8px;min-height:15px}.delta-up{color:#0866be;font-weight:700}.delta-down{color:#596b84;font-weight:700}
.chart-grid,.lower-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr);gap:16px;margin-bottom:16px}.panel{min-width:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px 15px}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}.panel-heading h2{font-size:15px;font-weight:800;letter-spacing:-.3px;color:var(--ink);margin:0 0 4px}.panel-description{margin:0;color:#8898aa;font-size:11px}.segmented{display:flex;align-items:center;border:1px solid #dbe5f1;border-radius:7px;background:#f5f8fc;padding:3px;gap:2px;flex-shrink:0}.segment{border:0;background:transparent;border-radius:5px;color:#6d819b;font-size:10.5px;font-weight:750;padding:6px 10px}.segment.active{color:var(--primary);background:white;box-shadow:0 1px 2px #dce7f4}.chart-summary{display:flex;gap:15px;align-items:center;flex-wrap:wrap;color:#677a94;font-size:10px;margin:0 0 4px}.chart-key{display:flex;gap:6px;align-items:center}.key-square{display:inline-block;width:9px;height:9px;background:#216ec6;border-radius:2px}.key-line{height:2px;width:17px;background:#71a8ed;position:relative;display:inline-block}.key-line:after{content:"";width:6px;height:6px;background:#71a8ed;border:1px solid #fff;border-radius:50%;position:absolute;top:-2px;left:6px}.svg-chart-container{width:100%;max-width:100%;overflow:hidden}.trend-svg{width:100%;height:auto;display:block;max-height:245px}.chart-footer{font-size:10px;color:#8797aa;border-top:1px solid #edf1f6;padding-top:9px;margin-top:7px;min-height:24px}.subtle-link{color:#186bc1;background:transparent;border:0;font-size:10.5px;font-weight:750;display:flex;align-items:center;gap:2px;white-space:nowrap;padding:4px}.subtle-link .icon{width:14px;height:14px}.subtle-link:hover{text-decoration:underline}.component-content{display:grid;grid-template-columns:minmax(0,47%) minmax(0,53%);align-items:center;gap:4px;min-height:249px}.donut-wrap{width:100%;position:relative;max-width:252px;margin:0 auto;aspect-ratio:1}.donut-wrap svg{width:100%;height:100%;display:block}.donut-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;pointer-events:none;width:68%}.donut-center span{font-size:10px;color:#8292a6}.donut-center strong{font-size:21px;color:var(--ink);letter-spacing:-.6px;line-height:1.2}.donut-center small{color:#8091a8;font-size:10px}.component-legend{min-width:0;display:flex;flex-direction:column;gap:3px}.legend-row{width:100%;padding:6px 5px 6px 7px;border:1px solid transparent;border-radius:5px;display:grid;grid-template-columns:11px minmax(0,1fr) auto;align-items:center;gap:8px;text-align:left;background:transparent;color:#556983;font-size:10.5px}.legend-row:hover,.legend-row.selected{background:#f2f7fe;border-color:#e0eafa}.legend-dot{display:block;width:9px;height:9px;border-radius:2px}.legend-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.legend-value{font-size:10px;font-weight:780;color:#223b5e;text-align:right;white-space:nowrap}
.lower-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}.inline-stat{background:#ecf4ff;color:#1c67b0;border-radius:6px;font-size:10px;font-weight:780;padding:5px 8px;white-space:nowrap}.table-scroll{overflow-x:auto}.data-table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}.data-table th{background:#f1f5fa;font-size:9.5px;letter-spacing:.1px;text-transform:none;color:#61748d;font-weight:760;padding:11px 9px;border-bottom:1px solid #e2eaf3}.data-table th:first-child{border-radius:6px 0 0 0}.data-table th:last-child{border-radius:0 6px 0 0}.data-table td{font-size:10.5px;color:#40546d;padding:9px;border-bottom:1px solid #eff2f6}.data-table th.number,.data-table td.number{text-align:right;font-variant-numeric:tabular-nums}.data-table tbody tr[tabindex]{cursor:pointer}.data-table tbody tr:hover,.data-table tbody tr:focus{background:#edf5ff;outline:none}.data-table tbody tr.selected{background:#eaf3ff}.data-table tfoot td{font-size:10.5px;font-weight:800;color:var(--ink);background:#f2f7fc;border-top:1px solid #dce7f4;border-bottom:0}.data-table tfoot td:first-child{border-radius:0 0 0 6px}.data-table tfoot td:last-child{border-radius:0 0 6px 0}.achievement-pill{display:inline-block;background:#e8f1ff;padding:3px 7px;border-radius:4px;color:#075cb8;font-weight:760}.panel-footnote{margin-top:10px;color:#8999aa;font-size:10px}
.workflow-panel{display:flex;flex-direction:column}.workflow-label{color:#0754ae;background:#ebf3ff;padding:5px 9px;font-size:10px;border-radius:5px;font-weight:800;white-space:nowrap}.workflow-stage-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;padding:18px 2px 3px;margin-top:5px}.stage{display:flex;flex-direction:column;align-items:center;gap:11px;position:relative;text-align:center;min-width:0}.stage:not(:last-child):after{content:"";position:absolute;top:13px;left:calc(50% + 16px);right:calc(-50% + 16px);height:2px;background:#d7e1ec;z-index:0}.stage.completed:not(:last-child):after{background:#1e73ca}.stage-mark{display:grid;place-items:center;z-index:1;position:relative;width:27px;height:27px;border-radius:50%;border:2px solid #cfdaea;background:white;color:#9eaec1}.stage.completed .stage-mark{background:#1367c0;color:white;border-color:#1367c0}.stage.current .stage-mark{color:#075dba;border-color:#075dba;background:#e9f3ff}.stage-mark .icon{width:15px;height:15px;stroke-width:2.2}.stage-name{font-size:9.5px;color:#5d708b;font-weight:650;line-height:1.35;min-height:32px;max-width:82px}.stage.current .stage-name{color:#075bb1;font-weight:800}.stage.completed .stage-name{color:#274967}.workflow-separator{height:1px;background:#edf1f6;margin:15px 0}.workflow-summary{margin-top:auto;border:1px solid #dceafa;background:#f2f7ff;border-radius:8px;padding:12px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px}.workflow-info{display:flex;align-items:flex-start;gap:9px;min-width:0}.workflow-info>.icon{height:17px;width:17px;margin-top:2px;color:#1166bb}.workflow-info strong{display:block;color:#214878;font-weight:800;font-size:11px}.workflow-info p{margin:4px 0 0;font-size:10px;color:#6783a4}.workflow-bottom{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:13px;color:#8796a8;font-size:10px}.workflow-bottom span:last-child{color:#356995;font-weight:700}.content-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;color:#9aa6b5;font-size:10px;border-top:1px solid #e6edf5;padding:17px 0 0;margin-top:6px}
.modal-backdrop{position:fixed;inset:0;background:rgba(10,30,58,.52);z-index:70;display:grid;place-items:center;padding:18px}.modal{background:#fff;border:1px solid var(--border);border-radius:13px;width:min(100%,570px);max-height:min(82vh,780px);display:flex;flex-direction:column;box-shadow:0 18px 48px rgba(8,28,59,.2);outline:none}.modal-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:17px 20px}.modal-header h2{font-size:17px;color:var(--ink);margin:0}.modal-body{padding:20px;color:#425974;font-size:13px;overflow:auto}.modal-body p{margin:0 0 12px}.modal-body p:last-child{margin-bottom:0}.modal-body ul{margin:10px 0;padding-left:20px}.modal-body li{margin:7px 0}.modal-body strong{color:var(--ink)}.modal-footer{display:flex;justify-content:flex-end;border-top:1px solid var(--border);padding:14px 20px}.detail-table{width:100%;border-collapse:collapse;font-size:12px;margin:10px 0}.detail-table td,.detail-table th{padding:9px 5px;border-bottom:1px solid var(--border)}.detail-table th{text-align:left;color:#6a809a}.detail-table td:last-child{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}.detail-table .total-line td{font-weight:800;background:#eff6ff}.toast-region{position:fixed;bottom:22px;right:24px;z-index:90;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{max-width:370px;background:#072f67;color:#fff;padding:12px 16px;border-radius:8px;box-shadow:0 10px 28px rgba(5,31,71,.2);font-size:12px;pointer-events:auto;line-height:1.45}
@media(min-width:1620px){.main-content{padding:30px 35px 22px}.panel{padding:20px 22px 16px}.metrics{gap:18px}.chart-grid,.lower-grid{gap:18px}.metric-card{padding:20px}.trend-svg{max-height:275px}.component-content{min-height:278px}}
@media(max-width:1330px){:root{--sidebar:238px}.topbar-title{font-size:14px}.main-content{padding:23px 20px}.metrics{gap:10px}.metric-card{padding:16px 11px;gap:9px}.metric-icon{width:42px;height:42px}.metric-icon .icon{width:21px;height:21px}.metric-value{font-size:20px}.panel{padding:16px}.component-content{min-height:217px}.donut-center strong{font-size:17px}.legend-row{gap:5px;font-size:9.5px}.legend-value{font-size:9.5px}.select-wrap{min-width:153px}.workflow-summary{align-items:flex-start}.workflow-summary .button{max-width:135px;white-space:normal;text-align:center}}
@media(max-width:1150px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.chart-grid,.lower-grid{grid-template-columns:1fr}.metric-card{min-height:102px}.component-content{grid-template-columns:260px 1fr}.topbar-title{font-size:13px}.header-context{display:none}.component-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.trend-svg{max-height:270px}}
@media(max-width:800px){:root{--header:68px;--sidebar:260px}.topbar{gap:12px;padding-right:14px}.brand{width:auto;min-width:0;border-right:0;padding:10px 12px}.brand img{width:130px}.topbar-title{font-size:12px;white-space:normal;line-height:1.25}.mobile-menu{display:grid;order:-1;margin-left:5px}.topbar-right{gap:7px}.user-label,.header-help,.topbar-separator{display:none}.avatar{width:32px;height:32px;font-size:11px}.sidebar{transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 16px 22px rgba(9,37,71,.13)}.sidebar.is-open{transform:translateX(0)}.mobile-overlay{position:fixed;inset:var(--header) 0 0;background:rgba(11,28,53,.44);z-index:25}.main-content{margin-left:0;width:100%;padding:21px 16px}.page-heading h1{font-size:24px}}
@media(max-width:540px){.topbar-title{font-size:11px}.brand img{width:106px}.topbar{gap:7px}.mobile-menu{width:31px}.user-meta{display:none}.page-heading{align-items:flex-start}.page-heading h1{font-size:22px}.page-heading p{font-size:11px}.export-button{padding:8px 9px}.export-button span{display:none}.demo-banner{align-items:flex-start}.filterbar{flex-direction:column;align-items:stretch}.filters-left{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.field:first-child{grid-column:span 2}.select-wrap{min-width:0}.period-state{align-self:flex-start}.metrics{gap:9px}.metric-card{min-height:122px;padding:13px 10px;flex-direction:column}.metric-icon{width:35px;height:35px;border-radius:7px}.metric-icon .icon{width:19px;height:19px}.metric-value{font-size:19px;white-space:normal}.metric-label{font-size:10px;margin:0 0 4px}.metric-sub{font-size:9px}.panel{padding:15px 12px}.panel-heading h2{font-size:14px}.panel-description{font-size:10px}.chart-summary{font-size:9px}.segment{padding:5px 7px;font-size:10px}.component-content{grid-template-columns:1fr;gap:10px}.donut-wrap{max-width:220px}.component-legend{display:grid;grid-template-columns:1fr 1fr;gap:2px}.legend-row{font-size:9px}.legend-value{font-size:9px}.workflow-stage-list{padding-top:10px}.stage-name{font-size:8px}.stage-mark{height:22px;width:22px}.stage-mark .icon{width:12px;height:12px}.stage:not(:last-child):after{top:10px}.workflow-summary{flex-direction:column}.workflow-summary .button{max-width:none}.content-footer{flex-direction:column;align-items:flex-start}.data-table{min-width:590px}.chart-footer{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}