:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#17211b;background:#f4f7f4}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}main{max-width:1240px;margin:auto;padding:32px}h1,h2,p{margin-top:0}h1{margin-bottom:0;font-size:32px}h2{margin-bottom:14px;font-size:20px}button{border:0;border-radius:6px;padding:10px 14px;color:#fff;background:#1f6f43;cursor:pointer}button:hover{background:#185936}button:disabled{cursor:not-allowed;opacity:.45}button.secondary{color:#233127;background:#eef2ef}button.secondary:hover{background:#dde7df}button.danger{color:#9f1d1d}label{display:grid;gap:6px;color:#526158;font-size:13px}input,select,textarea{width:100%;border:1px solid #d7e1d9;border-radius:6px;padding:10px 11px;color:#17211b;background:#fff}input[type=checkbox]{width:17px;height:17px;accent-color:#1f6f43}textarea{resize:vertical}table{width:100%;border-collapse:collapse}th,td{border-bottom:1px solid #e4ebe5;padding:11px 8px;text-align:left;vertical-align:top}th{color:#526158;font-size:12px;font-weight:700;text-transform:uppercase}.topbar{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:26px}.eyebrow{margin-bottom:9px;color:#2d7149;font-size:12px;font-weight:800;letter-spacing:.12em}.status{display:flex;gap:10px;align-items:center;color:#456052}.status span{border-radius:999px;padding:8px 12px;color:#217a3d;background:#e5f5e9}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}.kpis article,.panel,.tracking-summary article{border:1px solid #dfe7e0;border-radius:8px;background:#fff}.kpis article{padding:20px}.tracking-grid{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(0,1.7fr);gap:16px}.tracking-summary{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.tracking-summary article{padding:15px}.tracking-summary article p{margin-bottom:8px;color:#677269;font-size:13px}.tracking-summary article strong{font-size:22px}.salesman-list{align-self:start}.salesman-row{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;border:1px solid #e0e8e2;padding:12px;color:#17211b;background:#fff;text-align:left}.salesman-row:hover,.salesman-row.selected{border-color:#72a786;background:#f0f7f2}.salesman-row span:first-child{display:grid;gap:4px}.salesman-row small{color:#68756c}.badge{display:inline-block;border-radius:999px;padding:5px 8px;color:#526158;background:#edf1ee;font-size:11px;font-weight:800;white-space:nowrap}.badge.online,.badge.on_duty{color:#176b36;background:#dcf4e3}.badge.stale,.badge.day_ended{color:#805b13;background:#fff1ca}.badge.no_signal,.badge.not_started{color:#735d63;background:#f1e9eb}.detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.activity-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}.activity-facts div{display:grid;gap:5px;border:1px solid #e1e9e3;border-radius:7px;padding:10px}.activity-facts small,.map-caption{color:#68756c}.map-frame{height:330px;overflow:hidden;border:1px solid #dce5de;border-radius:8px;background:#edf2ee}.map-frame iframe{width:100%;height:100%;border:0}.map-empty{display:grid;height:100%;place-items:center;color:#68756c}.map-caption{margin:10px 0 0;font-size:12px}.map-caption a{color:#1f6f43}.kpis p{margin-bottom:20px;color:#677269}.kpis strong{font-size:26px}.tabs{display:flex;gap:8px;margin-bottom:20px}.tabs button{color:#304238;background:transparent;border:1px solid #d8e3da;text-transform:capitalize}.tabs button.active{color:#fff;background:#1f6f43;border-color:#1f6f43}.grid{display:grid;gap:16px}.grid.two{grid-template-columns:1fr 1fr}.route-layout{grid-template-columns:minmax(300px,.8fr) minmax(440px,1.2fr);align-items:start}.panel-title-row,.route-main,.stop-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.route-card{display:grid;grid-template-columns:1fr auto;gap:8px;border:1px solid #e0e8e2;border-radius:8px;padding:8px}.route-card.inactive{opacity:.65}.route-main{color:#17211b;background:transparent;text-align:left}.route-main:hover{background:#f0f7f2}.route-main>span:first-child{display:grid;gap:4px}.route-main small{color:#68756c}.route-main>span:last-child{color:#1f6f43;white-space:nowrap}.route-toggle{align-self:center}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field-heading{margin-bottom:8px;color:#526158;font-size:13px}.outlet-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:210px;overflow-y:auto;border:1px solid #dfe7e0;border-radius:8px;padding:10px}.check-row{display:flex;grid-template-columns:none;align-items:center;gap:8px;color:#27372d}.stop-sequence{display:grid;gap:7px}.stop-row{border:1px solid #e1e9e3;border-radius:7px;padding:7px 8px}.stop-row>span:nth-child(2){flex:1}.stop-number{display:grid;width:27px;height:27px;border-radius:50%;place-items:center;color:#176b36;background:#dcf4e3;font-weight:800}.icon-button{padding:5px 9px;color:#1f6f43;background:#eef4ef}.icon-button+.icon-button{margin-left:5px}.route-active{margin-top:2px}.panel{padding:20px}.wide{grid-column:1 / -1}.stack{display:grid;gap:10px}.list-item{display:flex;justify-content:space-between;gap:16px;border:1px solid #e3ebe4;border-radius:8px;padding:13px}.list-item p{margin:6px 0 0;color:#647268}.list-item span{white-space:nowrap;color:#1f6f43;font-weight:700}.table-wrap{overflow-x:auto}.empty{color:#667268}.order{display:grid;gap:16px}.order-head{display:flex;justify-content:space-between;gap:18px}.order-head p{margin-bottom:0;color:#647268}.order-head strong{color:#1d5135;font-size:22px;white-space:nowrap}.actions{display:flex;gap:10px;justify-content:flex-end}form.panel{display:grid;gap:13px;align-content:start}@media(max-width:900px){main{padding:20px}.topbar,.order-head{display:grid}.kpis,.grid.two,.tracking-summary{grid-template-columns:1fr 1fr}.tracking-grid,.route-layout{grid-template-columns:1fr}.tracking-grid .wide{grid-column:1}}@media(max-width:640px){.kpis,.grid.two,.tracking-summary,.activity-facts,.form-grid,.outlet-picker{grid-template-columns:1fr}.tabs{overflow-x:auto}.status{align-items:stretch;flex-direction:column}}:root{color:#17231c;background:#f5f7f6;font-synthesis:none}body{min-width:320px;background:#f5f7f6}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.app-shell{min-height:100vh}.sidebar{position:fixed;z-index:40;inset:0 auto 0 0;display:flex;width:268px;flex-direction:column;padding:26px 18px 18px;color:#d7e6dc;background:radial-gradient(circle at 0 0,rgba(55,137,87,.28),transparent 34%),linear-gradient(180deg,#10281a,#0b1e13);box-shadow:10px 0 40px #0d271814}.brand{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 10px}.brand-mark{display:grid;width:42px;height:42px;border-radius:12px;place-items:center;color:#0e3820;background:#7bd39a;box-shadow:0 8px 24px #4bc17433}.brand-mark svg{width:23px;height:23px;stroke-width:2}.brand>span:last-child,.sidebar-foot>div:nth-child(2){display:grid;gap:2px}.brand strong{color:#fff;font-size:18px;letter-spacing:-.02em}.brand small,.sidebar-foot small{color:#81a68e;font-size:11px}.side-nav{display:grid;gap:6px;margin-top:42px}.nav-label{margin:0 12px 8px;color:#648671;font-size:10px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.side-nav button{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:12px;width:100%;border-radius:10px;padding:12px 13px;color:#9db7a5;background:transparent;font-size:14px;font-weight:600;text-align:left}.side-nav button:hover{color:#eafff0;background:#ffffff0e}.side-nav button.active{color:#effff4;background:linear-gradient(90deg,#3e9f6057,#3e9f6029);box-shadow:inset 3px 0 #78d297}.side-nav button.active svg{color:#84dfa3}.side-nav button b{min-width:22px;border-radius:999px;padding:3px 6px;color:#15261b;background:#f5c75b;font-size:10px;text-align:center}.sidebar-foot{display:grid;grid-template-columns:38px 1fr 16px;align-items:center;gap:10px;margin-top:auto;border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:11px;background:#ffffff09}.sidebar-foot strong{color:#e8f3eb;font-size:12px}.sidebar-foot>svg{width:15px;color:#698874}.manager-avatar{display:grid;width:38px;height:38px;border-radius:10px;place-items:center;color:#14331f;background:#91d6a8;font-size:12px;font-weight:800}.app-content{min-height:100vh;margin-left:268px}.app-header{position:sticky;z-index:20;top:0;display:flex;min-height:100px;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #e5eae6;padding:18px 34px;background:#ffffffeb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.page-title p{margin-bottom:4px;color:#829087;font-size:11px;font-weight:650}.page-title h1{margin:0;color:#17251c;font-size:25px;font-weight:750;letter-spacing:-.035em}.page-title>span{display:block;margin-top:3px;color:#758178;font-size:12px}.header-actions{display:flex;align-items:center;gap:12px}.connection-state{display:flex;align-items:center;gap:7px;border-radius:999px;padding:7px 10px;color:#8a6223;background:#fff6de;font-size:11px;font-weight:700}.connection-state i,.live-label i{width:7px;height:7px;border-radius:50%;background:#dda132}.connection-state.connected{color:#247443;background:#e9f7ed}.connection-state.connected i,.live-label i{background:#36a55c;box-shadow:0 0 0 4px #36a55c1f}.today-date{display:grid;gap:2px;min-width:115px;border-left:1px solid #e4e9e5;padding-left:16px}.today-date small{color:#88938b;font-size:10px}.today-date strong{font-size:12px}.refresh-button,.menu-button{display:grid;width:40px;height:40px;padding:0;border:1px solid #dfe6e1;border-radius:10px;place-items:center;color:#496052;background:#fff}.refresh-button:hover,.menu-button:hover{color:#1c6a3b;background:#f1f7f3}.menu-button{display:none}.workspace{max-width:1600px;margin:0 auto;padding:26px 34px 44px}.workspace .panel,.workspace .metric-card{border-color:#e2e8e4;border-radius:14px;box-shadow:0 5px 22px #1a352309}.workspace .panel{padding:22px}.executive-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}.metric-card{position:relative;overflow:hidden;border:1px solid #e2e8e4;padding:19px;background:#fff}.metric-card:after{position:absolute;right:-26px;bottom:-34px;width:90px;height:90px;border-radius:50%;background:var(--metric-soft, #e9f6ed);content:"";opacity:.6}.metric-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.metric-card p{margin:0;color:#718077;font-size:12px;font-weight:650}.metric-card>strong{position:relative;z-index:1;display:block;margin-top:13px;font-size:25px;letter-spacing:-.035em}.metric-card>small{position:relative;z-index:1;display:block;margin-top:7px;color:#849087;font-size:10px}.metric-icon{display:grid;width:36px;height:36px;border-radius:10px;place-items:center;color:var(--metric-color, #25814a);background:var(--metric-soft, #e9f6ed)}.tone-blue{--metric-color: #2b6eaa;--metric-soft: #e7f1fb}.tone-amber{--metric-color: #a66b13;--metric-soft: #fff2d8}.tone-purple{--metric-color: #7052a5;--metric-soft: #f0eafa}.overview-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}.field-snapshot{grid-column:span 8}.approval-spotlight{grid-column:span 4}.order-performance{grid-column:span 5}.today-routes,.recent-activity{grid-column:span 7}.control-summary{grid-column:span 5}.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.section-heading .eyebrow{margin-bottom:5px;font-size:9px}.section-heading h2{margin:0;font-size:17px;letter-spacing:-.02em}.text-button{padding:4px;color:#2a7d4b;background:transparent;font-size:11px;font-weight:700}.text-button:hover{color:#195c35;background:transparent}.text-button span{margin-left:3px}.attendance-visual{display:grid;grid-template-columns:155px 1fr;align-items:center;gap:32px;padding:6px 8px 7px}.progress-ring{display:grid;width:142px;height:142px;border-radius:50%;place-items:center;background:conic-gradient(#36a45c var(--progress),#edf1ee 0)}.progress-ring:before{grid-area:1 / 1;width:108px;height:108px;border-radius:50%;background:#fff;content:""}.progress-ring>div{z-index:1;grid-area:1 / 1;display:grid;text-align:center}.progress-ring strong{font-size:24px}.progress-ring small{color:#829087;font-size:10px}.field-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field-stats>div{display:grid;grid-template-columns:8px 1fr;align-items:center;gap:9px;border:1px solid #edf0ee;border-radius:10px;padding:11px;background:#fbfcfb}.field-stats p{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;color:#68766d;font-size:11px}.field-stats strong{color:#1d2b22;font-size:16px}.dot{width:7px;height:7px;border-radius:50%;background:#a7b0aa}.dot.green{background:#3da765}.dot.blue{background:#3d83bd}.dot.purple{background:#8865b9}.workspace .approval-spotlight{display:flex;min-height:230px;flex-direction:column;align-items:flex-start;justify-content:center;padding:26px;color:#fff;background:radial-gradient(circle at 100% 0,rgba(109,207,142,.34),transparent 45%),linear-gradient(145deg,#153924,#0e2719)}.spotlight-icon{display:grid;width:40px;height:40px;margin-bottom:16px;border-radius:11px;place-items:center;color:#b7efc9;background:#ffffff1a}.approval-spotlight p{margin:0;color:#a9c3b1;font-size:11px}.approval-spotlight>strong{margin-top:2px;font-size:42px;line-height:1}.approval-spotlight>span:not(.spotlight-icon){margin-top:6px;color:#91aa99;font-size:10px}.approval-spotlight button{width:100%;margin-top:20px;color:#153723;background:#82d49e;font-size:11px;font-weight:750}.approval-spotlight button:hover{background:#9ae2b1}.approval-spotlight button span{float:right}.mini-chip,.live-label{border-radius:999px;padding:5px 8px;color:#66756b;background:#f1f4f2;font-size:9px;font-weight:750}.live-label{display:flex;align-items:center;gap:7px;color:#277448;background:#eaf7ee}.bar-list{display:grid;gap:18px}.bar-row>div:first-child{display:flex;justify-content:space-between;margin-bottom:7px;color:#718078;font-size:10px}.bar-row strong{color:#34463b}.bar-track{height:7px;overflow:hidden;border-radius:999px;background:#edf1ee}.bar-track i{display:block;min-width:3px;height:100%;border-radius:inherit;background:#48a66a}.bar-track i.submitted{background:#e5ae42}.bar-track i.rejected{background:#d66a6a}.compact-list,.timeline,.control-cards{display:grid}.compact-row{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:11px;border-top:1px solid #edf1ee;padding:11px 0}.compact-row:first-child{border-top:0;padding-top:0}.list-icon{display:grid;width:36px;height:36px;border-radius:10px;place-items:center;color:#377c51;background:#edf7f0}.compact-row>div{display:grid;gap:3px}.compact-row strong,.timeline-item strong{font-size:11px}.compact-row small,.timeline-item small{color:#7c8981;font-size:9px}.compact-row>b{color:#2b4936;font-size:14px}.empty-state{display:grid;min-height:120px;place-items:center;align-content:center;gap:8px;color:#89948c;font-size:11px}.empty-state svg{width:30px;height:30px;color:#aab4ad}.timeline-item{position:relative;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:11px;min-height:50px}.timeline-item>span{display:grid;z-index:1;width:32px;height:32px;border-radius:9px;place-items:center;color:#357b4f;background:#edf7f0}.timeline-item>span.visit{color:#5d56a1;background:#f0eef9}.timeline-item>span svg{width:15px}.timeline-item>div{display:grid;gap:2px}.timeline-item time{color:#909a93;font-size:9px}.control-cards{gap:9px}.control-cards button{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:11px;width:100%;border:1px solid #e8ede9;border-radius:10px;padding:10px;color:#39764f;background:#fbfcfb;text-align:left}.control-cards button:hover{border-color:#bbd7c4;background:#f2f8f4}.control-cards button>svg{margin:auto}.control-cards button span{display:grid;gap:2px}.control-cards strong{color:#23352a;font-size:16px}.control-cards small{color:#7b8980;font-size:9px}.control-cards b{color:#839087}.tracking-summary .metric-card:after{display:none}.tracking-summary .metric-card>strong{margin-top:7px;font-size:21px}.workspace table{font-size:12px}.workspace th{color:#7d8981;font-size:9px;letter-spacing:.05em}.workspace td{color:#3f4d44}.workspace input,.workspace select,.workspace textarea{border-radius:9px;background:#fcfdfc}.workspace form.panel>button[type=submit]{min-height:43px;border-radius:9px;font-weight:700}.sidebar-scrim{display:none}@media(max-width:1200px){.field-snapshot,.order-performance,.recent-activity{grid-column:span 7}.approval-spotlight,.today-routes,.control-summary{grid-column:span 5}.attendance-visual{grid-template-columns:125px 1fr;gap:18px}.progress-ring{width:120px;height:120px}.progress-ring:before{width:90px;height:90px}}@media(max-width:1020px){.sidebar{transform:translate(-100%);transition:transform .22s ease}.sidebar.open{transform:translate(0)}.sidebar-scrim{position:fixed;z-index:35;inset:0;display:block;width:100%;height:100%;border-radius:0;background:#07130c80;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.app-content{margin-left:0}.menu-button{display:grid;flex:0 0 auto}.app-header{justify-content:flex-start}.header-actions{margin-left:auto}}@media(max-width:800px){.app-header{min-height:82px;padding:14px 20px}.page-title h1{font-size:21px}.page-title>span,.page-title p,.today-date{display:none}.workspace{padding:20px}.executive-kpis{grid-template-columns:1fr 1fr}.overview-grid>.panel{grid-column:1 / -1}.tracking-grid,.route-layout{grid-template-columns:1fr}}@media(max-width:560px){.connection-state span{display:none}.connection-state{padding:10px}.page-title h1{font-size:18px}.workspace{padding:14px}.executive-kpis{grid-template-columns:1fr;gap:10px}.metric-card{padding:16px}.attendance-visual{grid-template-columns:1fr;justify-items:center}.field-stats{width:100%;grid-template-columns:1fr}.workspace .panel{padding:17px}.route-card{grid-template-columns:1fr}.route-toggle{width:100%}}