:root{--navy:#052f73;--blue:#075ab8;--cyan:#1597d1;--ink:#152238;--muted:#667085;--bg:#f3f7fb;--line:#d9e4f0}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Segoe UI,Arial,sans-serif}.topbar{height:68px;background:linear-gradient(100deg,var(--navy),var(--blue));color:white;display:flex;align-items:center;justify-content:space-between;padding:8px 20px;position:sticky;top:0;z-index:8;box-shadow:0 5px 16px #052f7326}.nav-logo{width:45px;height:45px;object-fit:contain}.topbar small{display:block;opacity:.78;font-size:.72rem}.toplink{color:white;text-decoration:none;font-size:.9rem}.searchbox{display:flex;background:white;border-radius:24px;padding:2px 8px;width:min(420px,36vw)}.searchbox input{border:0;outline:0;flex:1;padding:7px}.searchbox button{border:0;background:white;color:var(--blue);font-size:1.2rem}.app-shell{display:flex}.sidebar{width:216px;background:#062d68;min-height:calc(100vh - 68px);padding:14px 10px;position:sticky;top:68px;height:calc(100vh - 68px);overflow:auto}.sidebar a{display:block;color:#e8f3ff;text-decoration:none;padding:9px 10px;border-radius:8px;font-size:.88rem}.sidebar a:hover{background:#ffffff1c}.sidebar hr{border-color:#ffffff33}.content{flex:1;padding:24px;min-width:0}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.page-head h1{font-size:1.65rem;margin:0;color:var(--navy);font-weight:750}.page-head p{margin:4px 0 0;color:var(--muted)}.panel{background:white;border:1px solid #e3ecf5;border-radius:16px;padding:16px;box-shadow:0 4px 16px #0b3e7a0b}.panel h3{font-size:1rem;color:var(--navy)}.narrow{max-width:720px}.grid-form{display:grid;grid-template-columns:minmax(280px,360px) 1fr;gap:16px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.kpi-grid.mini{grid-template-columns:repeat(4,1fr)}.kpi{background:white;border:1px solid #e3ecf5;border-left:5px solid var(--cyan);border-radius:14px;padding:15px;box-shadow:0 4px 14px #0b3e7a0a}.kpi small{color:var(--muted);display:block}.kpi strong{font-size:1.6rem;color:var(--navy);display:block;margin-top:4px}.table{font-size:.86rem}.table th{color:var(--navy);text-transform:uppercase;font-size:.71rem;letter-spacing:.04em}.table td small{display:block;color:var(--muted)}.table-wrap{overflow:auto}.notice{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);padding:10px;border-left:4px solid #aab;border-bottom:1px solid var(--line)}.notice span,.muted{color:var(--muted);font-size:.88rem}.notice-danger{border-left-color:#dc3545}.notice-warning{border-left-color:#ffc107}.notice-info{border-left-color:#0dcaf0}.goal{margin-bottom:12px}.goal div:first-child{display:flex;justify-content:space-between}.goal span,.goal small{display:block;color:var(--muted);font-size:.78rem}.progress{height:7px;background:#edf2f7;margin:5px 0}.progress i{display:block;height:100%}.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:14px}.kanban-col{min-width:270px;max-width:270px}.kanban-col h3{background:#e9f4ff;color:var(--navy);padding:10px;border-radius:10px;font-size:.92rem}.kanban-col h3 b{float:right}.deal{background:white;border-radius:12px;padding:10px;margin-bottom:9px;border-left:4px solid #28a745;box-shadow:0 3px 10px #0b3e7a12}.deal-danger{border-left-color:#dc3545}.deal-warning{border-left-color:#ffc107}.deal span,.deal small,.deal em{display:block;font-size:.78rem;color:var(--muted);margin:2px 0}.deal em{color:#b36b00}.deal input,.deal select,.deal button{width:100%;font-size:.76rem;margin-top:4px;border:1px solid var(--line);padding:5px;border-radius:6px}.deal button{background:var(--blue);color:white}.line-item{padding:9px 0;border-bottom:1px solid var(--line)}.line-item span{display:block;color:var(--muted);font-size:.84rem}.login-main{min-height:100vh;background:linear-gradient(135deg,#04295f,#0874c8);display:flex;align-items:center;justify-content:center}.login-card{width:min(410px,92vw);background:white;border-radius:20px;padding:26px;box-shadow:0 20px 45px #001c3f55}.login-card img{width:115px;display:block;margin:auto}.login-card h1{text-align:center;color:var(--navy);font-size:1.9rem}.login-card p{text-align:center;color:var(--muted)}.mini-input{max-width:130px;border:1px solid var(--line);padding:4px;font-size:.72rem}@media(max-width:950px){.sidebar{width:72px}.sidebar a{font-size:0;padding:12px 6px}.sidebar a:first-letter{font-size:1.1rem}.grid-form,.grid-2{grid-template-columns:1fr}.kpi-grid{grid-template-columns:repeat(2,1fr)}.searchbox{display:none}.content{padding:15px}}
/* Offline UI foundation: no external CSS or JS required */
a{color:var(--blue)}label{display:block;font-size:.8rem;color:var(--navy);font-weight:650;margin:5px 0}.btn{display:inline-block;border:1px solid transparent;border-radius:8px;padding:8px 12px;text-decoration:none;font-weight:650;font-size:.86rem;cursor:pointer;background:#fff;color:var(--ink)}.btn-sm{padding:5px 8px;font-size:.76rem}.btn-lg{padding:11px 15px;font-size:1rem}.btn-primary{background:var(--blue);border-color:var(--blue);color:#fff}.btn-outline-primary{border-color:var(--blue);color:var(--blue);background:#fff}.btn-outline-secondary{border-color:#98a2b3;color:#475467;background:#fff}.btn-outline-danger{border-color:#dc3545;color:#b42318;background:#fff}.btn-outline-success{border-color:#198754;color:#087443;background:#fff}.btn-outline-light{border-color:#ffffffaa;color:#fff;background:transparent}.form-control,.form-select{display:block;width:100%;border:1px solid #cbd5e1;border-radius:8px;background:#fff;padding:8px 10px;font-size:.88rem;color:var(--ink);outline:none}.form-control:focus,.form-select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px #1597d122}.form-check{display:flex;gap:7px;align-items:center}.form-check-input{width:16px;height:16px}.w-100{width:100%}.w-auto{width:auto}.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:16px}.mt-4{margin-top:22px}.my-2{margin-top:8px;margin-bottom:8px}.d-flex{display:flex}.gap-2{gap:8px}.align-items-center{align-items:center}.justify-content-between{justify-content:space-between}.d-inline{display:inline}.alert{border-radius:10px;padding:10px 12px;margin-bottom:12px;border:1px solid transparent}.alert-success{background:#ecfdf3;border-color:#abefc6;color:#067647}.alert-warning{background:#fffaeb;border-color:#fedf89;color:#93370d}.alert-danger{background:#fef3f2;border-color:#fecdca;color:#b42318}.badge{display:inline-block;border-radius:999px;padding:3px 7px;font-size:.69rem;font-weight:700}.text-bg-warning{background:#fef0c7;color:#93370d}.text-bg-danger{background:#fee4e2;color:#b42318}.text-bg-success{background:#dcfae6;color:#067647}.bg-success{background:#12b76a}.bg-warning{background:#f79009}.bg-danger{background:#f04438}.menu-title{color:#9cc8f3;font-size:.62rem;letter-spacing:.14em;padding:5px 10px 3px}.helper-box{background:#eaf5fc;border:1px solid #b9dff1;border-left:5px solid var(--cyan);border-radius:12px;padding:12px 14px;margin-bottom:16px}.helper-box b,.helper-box span{display:block}.helper-box span{color:var(--muted);font-size:.88rem;margin-top:3px}.workflow-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.step-card{background:white;border:1px solid #e3ecf5;border-radius:16px;padding:16px;box-shadow:0 4px 16px #0b3e7a0b}.step-card>b{display:inline-flex;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;background:var(--blue);color:#fff}.step-card h3{font-size:1rem;color:var(--navy);margin:10px 0 4px}.step-card p{font-size:.86rem;color:var(--muted);min-height:54px}.empty-state{padding:18px;border:1px dashed #b9c7d6;border-radius:12px;background:#f8fbfe}.empty-state p{font-size:.86rem;color:var(--muted)}.metric-row{display:grid;grid-template-columns:52px 1fr 110px;gap:8px;align-items:center;margin:8px 0;font-size:.78rem}.metric-bars{display:flex;flex-direction:column;gap:3px}.bar{height:7px;border-radius:8px;min-width:4px}.quote{background:#075ab8}.call{background:#1597d1}.legend{font-size:.76rem;color:var(--muted);margin-top:10px}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 3px 0 8px}.funnel-row{display:grid;grid-template-columns:118px 1fr 24px;gap:8px;align-items:center;margin:8px 0;font-size:.78rem}.funnel-track{background:#edf4fb;border-radius:10px;height:10px;overflow:hidden}.funnel-track i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--cyan));border-radius:10px}@media(max-width:1050px){.workflow-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.workflow-grid{grid-template-columns:1fr}.metric-row{grid-template-columns:48px 1fr}.metric-row small{display:none}.topbar{padding:8px 10px}.topbar .toplink{display:none}}

.modal-backdrop{position:fixed;inset:0;background:#001b3f99;z-index:50;display:flex;align-items:center;justify-content:center}.modal-card{background:#fff;border-radius:18px;padding:22px;max-width:430px;width:92vw;box-shadow:0 20px 50px #001b3f55}.modal-card h3{color:var(--navy);margin-top:0}.process-canvas{height:520px;position:relative;background:linear-gradient(#edf5fd 1px,transparent 1px),linear-gradient(90deg,#edf5fd 1px,transparent 1px);background-size:20px 20px;border:1px solid var(--line);border-radius:12px;overflow:auto}.proc-node{position:absolute;width:170px;background:#fff;border-left:5px solid var(--cyan);padding:10px;border-radius:10px;box-shadow:0 4px 12px #052f7322;cursor:move}.proc-node input{width:100%;border:0;outline:0}.proc-node b{color:var(--navy);display:block;font-size:.72rem}

.report-filter{display:grid;grid-template-columns:150px 145px 145px 145px minmax(180px,1fr) 150px;gap:8px;align-items:end;margin-bottom:8px}
.chart-row{display:grid;grid-template-columns:52px 1fr 95px;gap:8px;align-items:center;margin:7px 0;font-size:.76rem}
.chart-track{height:11px;background:#edf4fb;border-radius:10px;overflow:hidden}
.chart-track i{display:block;height:100%;border-radius:10px;min-width:3px}
.chart-sales{background:linear-gradient(90deg,#075ab8,#1597d1)}
.chart-visits{background:linear-gradient(90deg,#087443,#12b76a)}
.chart-social{background:linear-gradient(90deg,#7f56d9,#b692f6)}
.seller-detail{border-top:1px solid var(--line);padding:8px 0}.seller-detail summary{cursor:pointer;color:var(--navy);font-weight:700}
@media(max-width:1050px){.report-filter{grid-template-columns:1fr 1fr 1fr}.chart-row{grid-template-columns:48px 1fr 78px}}

/* v4.3 collapsible navigation */
.sidebar{overflow-y:auto}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 10px}
.sidebar-label{font-size:.72rem;font-weight:800;letter-spacing:.14em;color:#6d7d91}
.sidebar-mini-toggle,.mobile-menu-btn{border:0;background:transparent;color:inherit;cursor:pointer;font-size:1.15rem}
.sidebar-mini-toggle{display:none}
.mobile-menu-btn{display:none;color:#fff;font-size:1.35rem;padding:0 3px}
.nav-group{border-top:1px solid #dce7f2;padding:7px 0}
.nav-group:first-of-type{border-top:0}
.nav-group-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;border:0;background:transparent;padding:9px 10px;color:#073b8e;font-weight:800;text-transform:uppercase;font-size:.78rem;letter-spacing:.04em;cursor:pointer;border-radius:9px}
.nav-group-toggle:hover{background:#eaf5fc}
.nav-group-toggle b{font-size:1rem;transition:transform .18s ease}
.nav-group.collapsed .nav-group-toggle b{transform:rotate(-90deg)}
.nav-group-links{display:grid;grid-template-rows:1fr;overflow:hidden;transition:max-height .22s ease,opacity .18s ease;max-height:520px;opacity:1}
.nav-group.collapsed .nav-group-links{max-height:0;opacity:0}
.nav-group-links a{margin:1px 5px;padding:8px 10px;border-radius:8px}
.nav-group-links a.active{background:#e4f3fc;color:#073b8e;font-weight:800;border-left:3px solid #1597d1}
@media(max-width:900px){
  .mobile-menu-btn{display:inline-block}
  .sidebar{position:fixed;top:0;left:-285px;width:275px;height:100vh;z-index:70;box-shadow:0 14px 40px #001b3f44;transition:left .22s ease}
  .sidebar.mobile-open{left:0}
  .sidebar-mini-toggle{display:inline-block;color:#073b8e;font-size:1.5rem}
}

.kpi-link{text-decoration:none;color:inherit}.kpi-link span{font-size:.74rem;color:var(--blue);display:block;margin-top:5px}
.signature-pad{display:block;width:100%;max-width:540px;height:170px;border:1px dashed #98a2b3;border-radius:10px;background:#fff;touch-action:none;margin-bottom:8px}
.route-order{display:block;border:1px solid var(--line);border-radius:9px;padding:9px;margin:7px 0;background:#f9fcff}.route-order span{display:block;color:var(--muted);font-size:.78rem;margin-left:19px}
details summary{cursor:pointer;color:var(--navy);font-weight:700}

.goal-ring{background:#eaf5fc;border:1px solid #b9ddf1;border-radius:14px;padding:10px 15px;text-align:center}.goal-ring b{display:block;color:#073b8e;font-size:1.35rem}.goal-ring span{font-size:.75rem;color:#5e6b7f}.lead-card{border:1px solid var(--line);border-left:4px solid #1597d1;border-radius:11px;padding:10px;margin:8px 0;background:#fbfdff}.lead-card span,.lead-card small{display:block;color:var(--muted);font-size:.76rem}.lead-card form{display:grid;grid-template-columns:150px 175px 1fr auto;gap:6px;margin-top:8px}.lead-card select,.lead-card input{border:1px solid var(--line);border-radius:7px;padding:6px;font-size:.76rem}@media(max-width:900px){.lead-card form{grid-template-columns:1fr}}

.badge.text-bg-success{background:#dff6ec;color:#117a52}.badge.text-bg-warning{background:#fff2d4;color:#8a5800}.badge.text-bg-danger{background:#ffe1df;color:#a52a2a}
