:root{
  --navy:#0B2A4A; --navy-deep:#071B31; --blue:#175EA8; --blue-light:#E8F0FB;
  --red:#D2263A; --red-light:#FCE9EB; --green:#1E9E5A; --green-light:#E7F7EE;
  --amber:#B8790A; --amber-light:#FDF1DF;
  --ink:#1A2433; --slate:#5B6B82; --line:#E3E8F0; --paper:#F6F8FB; --white:#fff;
  --radius:14px; --radius-sm:10px;
  --shadow:0 16px 36px -20px rgba(11,42,74,.35);
  --shadow-soft:0 2px 8px -2px rgba(11,42,74,.08), 0 1px 2px rgba(11,42,74,.04);
}
*{box-sizing:border-box;}
html,body{height:100%;overflow-x:hidden;max-width:100vw;}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;}
h1,h2,h3,h4,h5{font-family:'Manrope',sans-serif;margin:0;color:var(--navy-deep);letter-spacing:-.01em;}
p{margin:0;color:var(--slate);line-height:1.5;}
.desk-topbar p{max-width:60ch;}
.info-note{background:var(--blue-light);color:var(--navy-deep);border-radius:10px;padding:10px 13px;font-size:12.5px;line-height:1.5;margin-bottom:12px;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
a{color:var(--blue);text-decoration:none;}
#app{min-height:100%;}

/* ===== LOGIN ===== */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--navy-deep),var(--navy) 60%);padding:20px;}
.login-card{background:#fff;border-radius:18px;padding:32px 28px;width:100%;max-width:380px;box-shadow:var(--shadow);}
.login-brand{display:flex;align-items:center;gap:10px;margin-bottom:22px;}
.mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--blue),var(--navy));position:relative;flex:none;}
.mark::after{content:'';position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;background:var(--red);border-radius:3px;border:2px solid #fff;}
.login-brand b{font-family:'Manrope';font-weight:800;font-size:17px;}
.login-brand small{display:block;font-size:10px;color:var(--slate);letter-spacing:.05em;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;font-weight:700;color:var(--navy-deep);margin-bottom:6px;}
.field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:9px;font-size:14px;color:var(--ink);background:#fff;}
.field textarea{resize:vertical;min-height:60px;}
.btn{border:none;border-radius:9px;padding:11px 18px;font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.btn-primary{background:var(--red);color:#fff;}
.btn-secondary{background:var(--blue-light);color:var(--blue);}
.btn-success{background:var(--green-light);color:var(--green);}
.btn-outline{background:#fff;border:1.5px solid var(--line);color:var(--ink);}
.btn-block{width:100%;}
.btn-sm{padding:7px 12px;font-size:12.5px;border-radius:8px;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.error-msg{background:var(--red-light);color:var(--red);border-radius:9px;padding:10px 13px;font-size:12.5px;font-weight:600;margin-bottom:12px;}
.ok-msg{background:var(--green-light);color:var(--green);border-radius:9px;padding:10px 13px;font-size:12.5px;font-weight:600;margin-bottom:12px;}

/* ===== SHARED ===== */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px;white-space:nowrap;}
.badge.green{background:var(--green-light);color:var(--green);}
.badge.amber{background:var(--amber-light);color:var(--amber);}
.badge.red{background:var(--red-light);color:var(--red);}
.badge.blue{background:var(--blue-light);color:var(--blue);}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-soft);}
.section-label{font-size:11.5px;font-weight:800;color:var(--slate);text-transform:uppercase;letter-spacing:.05em;margin:18px 0 10px;}
.section-label:first-child{margin-top:0;}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy-deep);color:#fff;padding:13px 22px;border-radius:100px;font-size:13.5px;font-weight:600;box-shadow:0 14px 30px rgba(0,0,0,.3);z-index:4000;opacity:0;pointer-events:none;transition:all .25s ease;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px;}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-wrap-scroll{overflow-x:auto;overflow-y:auto;max-height:420px;-webkit-overflow-scrolling:touch;}
.table-wrap-scroll thead th,.table-wrap-scroll tr:first-child th{position:sticky;top:0;background:#fff;z-index:1;}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);padding:8px 10px;border-bottom:1px solid var(--line);}
td{padding:10px;border-bottom:1px solid var(--line);}
tr:last-child td{border-bottom:none;}

/* ===== APP SHELL (rep — mobile) ===== */
.rep-shell{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:var(--paper);}
.app-header{background:linear-gradient(135deg,var(--navy-deep),var(--navy));color:#fff;padding:18px 18px 22px;}
.app-header .row{display:flex;justify-content:space-between;align-items:center;}
.app-header .who span{font-size:11.5px;color:#9FB2CC;}
.app-header .who b{display:block;font-family:'Manrope';font-size:17px;}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--red),#7A101E);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none;border:none;}
.screen-title{font-family:'Manrope';font-weight:800;font-size:20px;color:#fff;margin-top:16px;}
.screen-sub{font-size:12.5px;color:#B9C6DA;margin-top:3px;}
.app-body{flex:1;padding:16px 16px 90px;}
.bottom-nav{position:sticky;bottom:0;display:flex;background:#fff;border-top:1px solid var(--line);padding:8px 4px 10px;max-width:480px;margin:0 auto;width:100%;transition:transform .25s ease;}
.bottom-nav.nav-hidden{transform:translateY(100%);}
.bottom-nav button{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--slate);font-size:10.5px;font-weight:700;padding:5px 0;border-radius:10px;}
.bottom-nav button .ic{width:20px;height:20px;display:flex;align-items:center;justify-content:center;}
.bottom-nav button .ic svg{width:20px;height:20px;}
.bottom-nav button.active{color:var(--red);}
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow-soft);transition:transform .15s,box-shadow .15s;}
.kpi:active{transform:scale(.98);}
.kpi b{display:block;font-family:'Manrope';font-size:20px;color:var(--navy-deep);}
.kpi span{font-size:11px;color:var(--slate);}
.row-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 15px;margin-bottom:10px;box-shadow:var(--shadow-soft);transition:box-shadow .15s;}
.row-card:hover{box-shadow:var(--shadow);}
.row-card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.row-card h5{font-size:14px;margin-bottom:2px;}
.row-card .meta{font-size:11.5px;color:var(--slate);}
.row-actions{display:flex;gap:8px;margin-top:10px;}
.tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.tile{border:1px solid var(--line);border-radius:12px;padding:16px 14px;text-align:left;box-shadow:var(--shadow-soft);transition:transform .12s,box-shadow .15s;color:#fff;}
.tile:active{transform:scale(.97);}
.tile:hover{box-shadow:var(--shadow);transform:translateY(-2px);}
.tile .ic{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.22);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.tile .ic svg{width:18px;height:18px;}
.tile h5{font-size:13px;margin-bottom:2px;color:#fff;}
.tile span{font-size:11px;color:rgba(255,255,255,.82);}
.tile.tone-a{background:linear-gradient(135deg,#1E9E5A,#0E7A42);border-color:transparent;}
.tile.tone-b{background:linear-gradient(135deg,#FF8A3D,#E3661A);border-color:transparent;}
.tile.tone-c{background:linear-gradient(135deg,#5B6B82,#3D4A5C);border-color:transparent;}
.tile.tone-d{background:linear-gradient(135deg,#175EA8,#0B3E73);border-color:transparent;}
.tile.tone-e{background:linear-gradient(135deg,#D2263A,#9E1626);border-color:transparent;}
.tile.tone-f{background:linear-gradient(135deg,#0F8A8A,#0A6468);border-color:transparent;}
.stepper{display:flex;align-items:center;gap:10px;}
.stepper button{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:#fff;font-weight:800;font-size:15px;color:var(--navy-deep);flex:none;}
.stepper span{min-width:22px;text-align:center;font-weight:700;}
.stepper .qty-input{width:52px;text-align:center;font-weight:700;font-size:14px;border:1px solid var(--line);border-radius:8px;padding:5px 2px;-moz-appearance:textfield;}
.stepper .qty-input::-webkit-outer-spin-button,.stepper .qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.cart-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:78px;background:var(--navy-deep);color:#fff;border-radius:14px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 12px 26px rgba(0,0,0,.3);width:calc(100% - 32px);max-width:448px;z-index:120;}
.cart-bar b{font-family:'Manrope';font-size:15px;}
.cart-bar span{font-size:11px;color:#9FB2CC;}
.chip-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.chip{font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:100px;background:#fff;border:1px solid var(--line);color:var(--slate);text-decoration:none;display:inline-block;cursor:pointer;}
.chip.active{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep);}
.back-btn{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.14);border:none;color:#fff;display:flex;align-items:center;justify-content:center;flex:none;padding:0;font-size:16px;}

/* ===== APP SHELL (desktop — manager/finance/admin) ===== */
.desk-shell{display:flex;min-height:100vh;max-width:100vw;}
.sidebar{width:220px;background:var(--navy-deep);color:#fff;padding:18px 14px;flex:none;
  position:fixed;top:0;left:0;height:100vh;overflow-y:auto;z-index:50;
  display:flex;flex-direction:column;}
.sidebar .brand{display:flex;align-items:center;gap:9px;font-family:'Manrope';font-weight:800;font-size:15px;margin-bottom:26px;padding:0 6px;}
.sidebar .brand img{width:30px;height:30px;border-radius:8px;object-fit:cover;flex:none;}
.sidebar .brand small{display:block;font-size:9px;font-weight:600;color:#9FB2CC;letter-spacing:.05em;}
.sidebar nav{display:flex;flex-direction:column;gap:3px;}
.sidebar nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;color:#B9C6DA;padding:11px 12px;border-radius:9px;font-weight:700;font-size:13.5px;white-space:nowrap;border-left:3px solid transparent;transition:background .15s;}
.sidebar nav button:hover{background:rgba(255,255,255,.06);}
.sidebar nav button.active{background:var(--red);color:#fff;border-left-color:#fff;}
.sidebar .who{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);}
.sidebar .who b{display:block;font-size:12.5px;}
.sidebar .who span{font-size:10.5px;color:#9FB2CC;}
.sidebar .logout{margin-top:10px;width:100%;}
.desk-main{flex:1;padding:26px 30px;max-width:1200px;min-width:0;margin-left:220px;}
.desk-topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;gap:12px;flex-wrap:wrap;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.kgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;}
.kcard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 15px;box-shadow:var(--shadow-soft);transition:box-shadow .15s,border-color .15s;color:var(--ink);min-width:0;}
.kcard[data-goto]:hover{box-shadow:var(--shadow);border-color:#cfd8e6;}
.kcard .lbl{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--slate);}
.kcard .lbl::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--kc,var(--blue));flex:none;}
.kcard b{display:block;font-family:'Manrope';font-size:20px;font-weight:800;color:var(--navy-deep);margin:8px 0 3px;line-height:1.2;overflow-wrap:anywhere;}
.kcard p{font-size:11.5px;color:var(--slate);line-height:1.4;}
.kcard.tone-a{--kc:var(--green);}
.kcard.tone-b{--kc:#E3661A;}
.kcard.tone-c{--kc:var(--slate);}
.kcard.tone-d{--kc:var(--blue);}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:16px;min-width:0;box-shadow:var(--shadow-soft);}
.panel h4{font-size:14.5px;margin-bottom:12px;}
.modal-backdrop{position:fixed;inset:0;background:rgba(7,27,49,.5);display:flex;align-items:center;justify-content:center;z-index:3000;padding:20px;}
.modal{background:#fff;border-radius:16px;padding:22px;width:100%;max-width:440px;max-height:88vh;overflow-y:auto;}
.modal h3{margin-bottom:14px;}
.modal-close{float:right;background:none;border:none;font-size:18px;color:var(--slate);}

/* mobile topbar + hamburger drawer */
.mobile-topbar{display:none;}
.hamburger-btn{background:rgba(255,255,255,.12);border:none;color:#fff;width:38px;height:34px;border-radius:8px;font-size:18px;display:flex;align-items:center;justify-content:center;flex:none;}
.drawer-backdrop{display:none;}

.desk-bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);
  padding:8px 4px 10px;z-index:150;box-shadow:0 -6px 18px rgba(11,42,74,.08);}
.desk-bottom-nav button{flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--slate);font-size:10.5px;font-weight:700;padding:6px 2px;border-radius:10px;}
.desk-bottom-nav button.active{color:var(--red);}
.desk-bottom-nav button .ic{width:20px;height:20px;display:flex;align-items:center;justify-content:center;}
.desk-bottom-nav button .ic svg{width:20px;height:20px;}
.desk-bottom-nav button .dot{width:5px;height:5px;border-radius:50%;background:currentColor;margin-bottom:1px;}

@media(max-width:860px){
  .desk-shell{display:block;}
  .mobile-topbar{display:flex;align-items:center;justify-content:space-between;background:var(--navy-deep);color:#fff;padding:12px 16px;position:fixed;top:0;left:0;right:0;z-index:150;}
  .mobile-topbar .brand{display:flex;align-items:center;gap:9px;font-family:'Manrope';font-weight:800;font-size:15px;}
  .mobile-topbar .brand img{width:26px;height:26px;border-radius:7px;object-fit:cover;}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:250px;max-width:80vw;z-index:300;overflow-y:auto;
    transform:translateX(-105%);transition:transform .22s ease;}
  .sidebar.open{transform:translateX(0);box-shadow:20px 0 40px rgba(0,0,0,.25);}
  .sidebar nav{display:flex;flex-direction:column;}
  .sidebar nav button{width:100%;}
  .drawer-backdrop.open{display:block;position:fixed;inset:0;background:rgba(7,27,49,.55);z-index:290;}
  .desk-main{padding:18px;padding-top:74px;padding-bottom:90px;margin-left:0;}
  .kgrid{grid-template-columns:1fr 1fr;}
  .grid2{grid-template-columns:1fr;}
  .desk-bottom-nav{display:flex;}
}

/* ===== Management console — same scale and calm as the field app ===== */
.desk-main{padding:24px 28px;max-width:1180px;}
.desk-topbar{margin-bottom:16px;align-items:center;}
.desk-topbar h2{font-size:20px;font-weight:800;line-height:1.25;}
.desk-topbar p{font-size:13px;margin-top:3px;max-width:70ch;}
.desk-main .btn{padding:9px 14px;font-size:13px;}
.desk-main .btn-sm{padding:6px 11px;font-size:12px;}
.panel{padding:16px;border-radius:12px;}
.panel h4{font-size:14px;font-weight:800;margin-bottom:10px;}
.desk-main table{font-size:12.5px;}
.desk-main td{padding:9px 10px;}
.desk-main th{font-size:10.5px;padding:8px 10px;}
.desk-main .field label{font-size:11.5px;}
.desk-main .field input,.desk-main .field select{padding:9px 11px;font-size:13px;}
.kgrid{gap:12px;margin-bottom:16px;}
.sidebar{padding:16px 12px;}
.sidebar .brand{margin-bottom:18px;font-size:14px;}
.sidebar nav{gap:2px;}
.sidebar nav button{padding:8px 10px;font-size:13px;font-weight:600;border-left:none;border-radius:8px;}
.sidebar nav button .ic{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex:none;opacity:.85;}
.sidebar nav button .ic svg{width:16px;height:16px;}
.sidebar nav button.active .ic{opacity:1;}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.panel-head h4{margin-bottom:0;}
.muted{color:var(--slate);font-size:12px;}
.empty-row{text-align:center;padding:16px;color:var(--slate);}

/* progress bar */
.pbar{height:6px;background:#EDF1F6;border-radius:99px;overflow:hidden;}
.pbar i{display:block;height:100%;border-radius:99px;background:var(--green);}
.pbar i.amber{background:#D98F1E;} .pbar i.red{background:var(--red);}

/* dashboard rep list */
.rep-list{display:flex;flex-direction:column;}
.rep-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 64px;gap:14px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:8px;}
.rep-row:last-child{border-bottom:none;}
.rep-row:hover{background:#F8FAFD;}
.rep-row .nm{font-weight:600;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rep-row .sub{font-size:11.5px;color:var(--slate);margin-top:2px;}
.rep-row .pct{text-align:right;font-weight:700;font-size:12.5px;color:var(--navy-deep);}
.rep-row .bar-cell .sub{margin-top:5px;}
.dash-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start;}

/* bar chart — HTML columns so labels never collide or stretch */
.bchart{--h:150px;width:100%;}
.bchart-total{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--slate);margin-bottom:10px;}
.bchart-total b{color:var(--navy-deep);font-family:'Manrope';font-size:14px;}
.bchart-plot{height:var(--h);display:flex;align-items:flex-end;gap:6px;border-bottom:1px solid var(--line);padding-top:16px;}
.bchart-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;}
.bchart-bar{width:100%;max-width:38px;border-radius:5px 5px 0 0;background:var(--bc,#175EA8);min-height:2px;transition:height .3s ease;}
.bchart-bar.zero{background:#E3E8F0;}
.bchart-col.current .bchart-bar{background:var(--navy);}
.bchart-val{font-size:10px;font-weight:700;color:var(--navy-deep);margin-bottom:3px;white-space:nowrap;}
.bchart-axis{display:flex;gap:6px;margin-top:6px;}
.bchart-axis span{flex:1;min-width:0;text-align:center;font-size:10.5px;color:var(--slate);white-space:nowrap;overflow:visible;}
.bchart-axis span.hide{visibility:hidden;}
@media(prefers-reduced-motion:reduce){.bchart-bar{transition:none;}}

/* section jump bar that stays put while the page scrolls */
.jumpbar{position:sticky;top:0;z-index:40;background:var(--paper);padding:8px 0 10px;margin:-4px 0 6px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;}
.jumpbar::-webkit-scrollbar{display:none;}
.jumpbar .chip{flex:none;border:1px solid var(--line);font-family:inherit;}
.jump-section{scroll-margin-top:62px;}

/* horizontally scrolling filter chips */
.chip-scroll{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:12px;padding-bottom:2px;}
.chip-scroll::-webkit-scrollbar{display:none;}
.chip-scroll .chip{flex:none;font-family:inherit;}
.chip .count{opacity:.6;margin-left:4px;font-weight:600;}

.type-tag{display:inline-block;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px;background:#F1F4F8;color:var(--navy-deep);white-space:nowrap;}
.row-card .tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.list-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:18px 0 10px;}
.list-head .section-label{margin:0;}
.search-input{width:100%;padding:10px 13px;border:1.5px solid var(--line);border-radius:9px;margin-bottom:10px;font-size:14px;background:#fff;}
.icon-btn{background:none;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12px;font-weight:700;color:var(--navy-deep);}

/* warehouses */
.wh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
.wh-card{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff;}
.wh-card h5{font-size:14px;margin-bottom:2px;}
.wh-card .loc{font-size:12px;color:var(--slate);}
.wh-card .qty{font-family:'Manrope';font-weight:800;font-size:18px;color:var(--navy-deep);margin:10px 0 2px;}
.wh-card .actions{display:flex;gap:6px;margin-top:12px;}
.btn-danger-outline{background:#fff;border:1.5px solid #F2C4CA;color:var(--red);}
.flow-note{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--slate);background:#fff;border:1px dashed var(--line);border-radius:10px;padding:9px 12px;margin-bottom:14px;}
.flow-note b{color:var(--navy-deep);font-weight:700;}

@media(max-width:860px){
  .mobile-topbar{height:58px;padding:0 14px;}
  .desk-main{padding:14px;padding-top:72px;padding-bottom:90px;}
  .desk-topbar h2{font-size:18px;}
  .desk-topbar p{font-size:12.5px;}
  .kgrid{gap:10px;}
  .kcard{padding:12px 13px;}
  .kcard b{font-size:17px;}
  .desk-main .jumpbar{top:58px;}
  .desk-main .jump-section{scroll-margin-top:118px;}
  .dash-grid{grid-template-columns:1fr;}
  .rep-row{grid-template-columns:minmax(0,1fr) 54px;gap:10px;}
  .rep-row .bar-cell{grid-column:1 / -1;order:3;}
}

/* ===== Console = field app: same hero header, KPI cards, tiles and lists ===== */
.desk-main > .desk-topbar{background:linear-gradient(135deg,var(--navy-deep),var(--navy));color:#fff;border-radius:14px;padding:18px 20px 20px;margin-bottom:16px;box-shadow:var(--shadow-soft);}
.desk-main > .desk-topbar h2{color:#fff;font-family:'Manrope';font-weight:800;font-size:20px;}
.desk-main > .desk-topbar p{color:#B9C6DA;font-size:12.5px;margin-top:3px;}
.desk-main > .desk-topbar .hero-greet{display:block;font-size:11.5px;color:#9FB2CC;margin-bottom:8px;}
.desk-main > .desk-topbar .hero-greet b{display:block;font-family:'Manrope';font-size:17px;color:#fff;margin-top:1px;}
.desk-main > .desk-topbar .btn-outline,.desk-main > .desk-topbar .btn-secondary{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;}
.desk-main > .desk-topbar .btn-outline:hover{background:rgba(255,255,255,.2);}
.desk-main > .desk-topbar .btn-primary{box-shadow:0 6px 16px -6px rgba(210,38,58,.6);}
.desk-main > .desk-topbar #usersToolbar .btn,.desk-main > .desk-topbar [id$="Toolbar"] .btn{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;}

/* KPI cards: value first, small label under it — exactly like the rep's cards */
.kcard{display:flex;flex-direction:column;padding:14px;border-radius:12px;}
.kcard b{order:0;font-size:20px;margin:0 0 2px;}
.kcard .lbl{order:1;font-size:11px;font-weight:500;color:var(--slate);gap:0;}
.kcard .lbl::before{display:none;}
.kcard .pbar{order:2;margin:8px 0 4px !important;}
.kcard p{order:3;font-size:11px;margin-top:4px;}

/* rep components on the big screen */
.desk-main .kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.desk-main .kpi[data-goto]{cursor:pointer;}
.desk-main .kpi[data-goto]:hover{box-shadow:var(--shadow);}
.desk-main .kpi .pbar{margin-top:8px;}
.desk-main .tile-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
.desk-main .tile{cursor:pointer;}
.desk-main .row-card[data-goto-rep],.clickable-row{cursor:pointer;}
.clickable-row:hover td{background:#F8FAFD;}
.row-card .pbar{margin-top:9px;}
.dash-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:start;}
.dash-cols .section-label:first-child{margin-top:0;}

/* printable documents (transfer notes, GRNs, statements) */
.doc{font-size:13px;color:var(--ink);}
.doc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:2px solid var(--navy-deep);padding-bottom:12px;margin-bottom:14px;}
.doc-head .brand{display:flex;gap:10px;align-items:center;}
.doc-head .brand img{width:38px;height:38px;border-radius:8px;object-fit:cover;}
.doc-head .brand b{font-family:'Manrope';font-size:15px;color:var(--navy-deep);display:block;}
.doc-head .brand small{color:var(--slate);font-size:11px;}
.doc-head .no{text-align:right;}
.doc-head .no h3{margin:0 0 3px;font-size:15px;}
.doc-head .no span{font-size:12px;color:var(--slate);}
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-bottom:14px;}
.doc-grid div span{display:block;font-size:10.5px;color:var(--slate);text-transform:uppercase;letter-spacing:.04em;}
.doc-grid div b{font-weight:600;}
.doc-fromto{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;background:var(--paper);border-radius:10px;padding:12px;margin-bottom:14px;}
.doc-fromto .arrow{font-size:18px;color:var(--slate);}
.doc-fromto span{display:block;font-size:10.5px;color:var(--slate);text-transform:uppercase;letter-spacing:.04em;}
.doc table{min-width:0;}
.doc .qty-big{font-family:'Manrope';font-weight:800;font-size:22px;color:var(--navy-deep);}
.doc-sign{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px;}
.doc-sign div{border-top:1px solid var(--ink);padding-top:5px;font-size:11px;color:var(--slate);}
.doc-foot{margin-top:14px;font-size:10.5px;color:var(--slate);}
.doc-actions{display:flex;gap:8px;margin-top:16px;}
.modal.modal-wide{max-width:640px;}

@media(max-width:860px){
  .desk-main > .desk-topbar{margin:-14px -14px 14px;border-radius:0;padding:16px 16px 18px;}
  .desk-main .kpi-grid,.desk-main .tile-grid{grid-template-columns:1fr 1fr;}
  .dash-cols{grid-template-columns:1fr;}
  .doc-grid{grid-template-columns:1fr;}
  .doc-sign{grid-template-columns:1fr 1fr;}
}
/* ===== Phone layout of the console = the rep app ===== */
.desk-main > .desk-topbar{position:relative;}
.hero-tools{display:none;}
.hero-power{background:rgba(255,255,255,.14);border:none;color:#fff;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;}
@media(max-width:860px){
  .mobile-topbar .back-btn{margin-right:8px;}
  .mobile-topbar .brand{flex:1;min-width:0;}
  .mobile-topbar .brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .desk-main{padding:58px 14px 90px;}
  .desk-main > .desk-topbar{margin:0 -14px 16px;border-radius:0;padding:18px 18px 22px;box-shadow:none;}
  .desk-main > .desk-topbar .hero-greet{font-size:11.5px;margin-bottom:0;padding-right:90px;}
  .desk-main > .desk-topbar .hero-greet b{font-size:17px;}
  .desk-main > .desk-topbar h2{margin-top:16px;font-size:20px;}
  .desk-main > .desk-topbar p{font-size:12.5px;}
  .hero-tools{display:flex;gap:10px;align-items:center;position:absolute;top:18px;right:18px;z-index:2;}
  .hero-tools .avatar{cursor:pointer;}
  .desk-main .jumpbar{top:58px;}
  .desk-main .jump-section{scroll-margin-top:118px;}
  .desk-bottom-nav{padding:8px 4px 10px;box-shadow:none;}
  .desk-bottom-nav button{padding:5px 0;}
  .desk-main .kpi-grid{gap:10px;}
}

/* ===== Brand bar + ☰ menu in the field app (same as the console on phones) ===== */
.brand-bar{position:sticky;top:0;z-index:150;height:58px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px;background:var(--navy-deep);color:#fff;}
.brand-bar .brand{display:flex;align-items:center;gap:9px;font-family:'Manrope';font-weight:800;font-size:15px;min-width:0;}
.brand-bar .brand img{width:26px;height:26px;border-radius:7px;object-fit:cover;flex:none;}
.brand-bar .brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rep-shell .jumpbar{top:58px;}
.rep-shell .jump-section{scroll-margin-top:118px;}
.rep-drawer{position:fixed;top:0;left:0;bottom:0;width:260px;max-width:80vw;z-index:300;overflow-y:auto;background:var(--navy-deep);color:#fff;padding:16px 12px;display:flex;flex-direction:column;transform:translateX(-105%);transition:transform .22s ease;}
.rep-drawer.open{transform:translateX(0);box-shadow:20px 0 40px rgba(0,0,0,.25);}
.rep-drawer .brand{display:flex;align-items:center;gap:9px;font-family:'Manrope';font-weight:800;font-size:14px;margin-bottom:18px;padding:0 6px;}
.rep-drawer .brand img{width:30px;height:30px;border-radius:8px;object-fit:cover;flex:none;}
.rep-drawer .brand small{display:block;font-size:9px;font-weight:600;color:#9FB2CC;letter-spacing:.05em;}
.rep-drawer nav{display:flex;flex-direction:column;gap:2px;}
.rep-drawer nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;color:#B9C6DA;padding:10px;border-radius:8px;font-weight:600;font-size:13.5px;}
.rep-drawer nav button .ic{width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex:none;}
.rep-drawer nav button .ic svg{width:18px;height:18px;}
.rep-drawer nav button.active{background:var(--red);color:#fff;}
.rep-drawer .who{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);}
.rep-drawer .who b{display:block;font-size:12.5px;}
.rep-drawer .who span{font-size:10.5px;color:#9FB2CC;}
.rep-drawer .logout{margin-top:10px;width:100%;}
.rep-drawer-backdrop.open{display:block;position:fixed;inset:0;background:rgba(7,27,49,.55);z-index:290;}
.filter-bar{padding:14px 16px 4px;}
.filter-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;}
.filter-row .field{min-width:150px;flex:0 1 190px;}
.filter-note{font-size:12px;color:var(--slate);margin:-6px 0 12px;}
@media(max-width:860px){.filter-row .field{flex:1 1 140px;}}

.map-pop{font-size:12px;line-height:1.45;}
.map-pop .muted{font-size:11px;}
.map-pop-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0 4px;}
.map-pop-kpis div{background:#F3F6FA;border-radius:8px;padding:6px;text-align:center;}
.map-pop-kpis b{display:block;font-size:13px;color:var(--navy-deep);}
.map-pop-kpis span{font-size:10px;color:var(--slate);}
.map-pop-visits{border-top:1px solid var(--line);margin-top:8px;padding-top:6px;display:flex;flex-direction:column;gap:6px;max-height:170px;overflow-y:auto;}

.offline-bar{background:#FDF1DF;border:1px solid #F0D3A4;color:#6B4A0E;border-radius:10px;padding:9px 12px;font-size:12px;line-height:1.45;margin-bottom:12px;}
.offline-bar b{color:#8A5A00;}


.modal.receipt-modal{max-width:400px;width:calc(100% - 24px);background:#EEF1F5;padding:18px 16px 16px;}
.receipt-modal .modal-close{top:8px;right:8px;}
.receipt{position:relative;background:#fff;color:#111827;padding:22px 20px 26px;font-size:12.5px;line-height:1.45;font-variant-numeric:tabular-nums;
  box-shadow:0 8px 24px -12px rgba(11,42,74,.35);
  -webkit-mask:radial-gradient(circle 6px at 50% 100%,transparent 5.5px,#000 6px) 0 100%/14px 100% repeat-x;
  mask:radial-gradient(circle 6px at 50% 100%,transparent 5.5px,#000 6px) 0 100%/14px 100% repeat-x;}
.rc-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1px;}
.rc-head img{width:42px;height:42px;border-radius:10px;object-fit:cover;margin-bottom:6px;}
.rc-head b{font-family:'Manrope';font-size:15px;font-weight:800;color:var(--navy-deep);}
.rc-head span{font-size:11px;color:#6B7280;}
.rc-title{text-align:center;font-size:11px;font-weight:800;letter-spacing:.22em;color:#374151;margin:14px 0 10px;padding:6px 0;border-top:1px dashed #C9D0DA;border-bottom:1px dashed #C9D0DA;}
.rc-rows{display:flex;flex-direction:column;gap:3px;}
.rc-rows > div{display:flex;justify-content:space-between;gap:12px;}
.rc-rows span{color:#6B7280;}
.rc-rows b{font-weight:600;text-align:right;}
.rc-cut{border-top:1px dashed #C9D0DA;margin:11px 0;}
.rc-cust{display:flex;flex-direction:column;}
.rc-cust b{font-size:13.5px;font-weight:700;}
.rc-cust span{font-size:11.5px;color:#6B7280;}
.rc-items{display:flex;flex-direction:column;gap:8px;}
.rc-item .nm{font-weight:600;}
.rc-item .ln{display:flex;justify-content:space-between;gap:10px;color:#4B5563;}
.rc-item .ln b{color:#111827;font-weight:600;}
.rc-total{display:flex;justify-content:space-between;align-items:baseline;margin:10px 0 8px;padding:9px 0;border-top:2px solid #111827;border-bottom:2px solid #111827;}
.rc-total span{font-size:12px;font-weight:800;letter-spacing:.12em;}
.rc-total b{font-family:'Manrope';font-size:20px;font-weight:800;}
.rc-pays{margin-bottom:6px;}
.rc-bal b{font-weight:800;}
.rc-stamp{margin:14px auto 4px;width:max-content;padding:5px 14px;border:2px solid;border-radius:6px;font-weight:800;font-size:12px;letter-spacing:.16em;transform:rotate(-4deg);}
.rc-stamp.paid{color:#1E9E5A;border-color:#1E9E5A;}
.rc-stamp.part{color:#B8790A;border-color:#B8790A;}
.rc-stamp.due{color:#D2263A;border-color:#D2263A;}
.rc-stamp.wait{color:#175EA8;border-color:#175EA8;}
.rc-stamp.void{color:#6B7280;border-color:#6B7280;}
.rc-foot{text-align:center;margin-top:12px;font-size:11.5px;color:#374151;}
.rc-foot span{font-size:10.5px;color:#9CA3AF;}
.rc-actions{margin-top:14px;display:flex;flex-direction:column;gap:8px;}
.rc-actions-row{display:flex;gap:8px;}
.rc-actions-row .btn{flex:1;padding:9px 8px;font-size:13px;}
.pie-wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap;}
.pie-legend{flex:1;min-width:150px;display:flex;flex-direction:column;gap:7px;}
.pie-leg{display:flex;align-items:center;gap:8px;font-size:12.5px;}
.pie-leg .sw{width:10px;height:10px;border-radius:3px;flex:none;}
.pie-leg .nm{flex:1;min-width:0;line-height:1.25;}
.pie-leg .nm small{display:block;font-size:11px;color:var(--slate);}
.pie-leg b{font-size:12.5px;}
/* payments cards: roomy on any width */
.rep-shell .pay-grid,.pay-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;}
.rep-shell .pay-grid{grid-template-columns:1fr 1fr !important;}
.pay-grid .kpi b{font-size:17px;white-space:nowrap;}
.pay-grid .kpi span{display:block;line-height:1.35;}
.pay-grid .kpi .pay-name{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);margin-bottom:4px;}
.rep-shell .pay-grid .kpi.pay-owed{grid-column:1 / -1;}

.alert-sheet{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);width:min(440px,calc(100% - 24px));z-index:600;display:flex;gap:12px;align-items:flex-start;
  background:#fff;border-radius:14px;padding:14px;box-shadow:0 18px 40px -12px rgba(7,27,49,.45);border:1.5px solid #F2C4CA;animation:alertIn .22s ease;}
.alert-sheet.ok{border-color:#BFE6CF;}
.alert-sheet.out{opacity:0;transform:translate(-50%,10px);transition:all .2s;}
.alert-ic{width:28px;height:28px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:var(--red);}
.alert-sheet.ok .alert-ic{background:var(--green);}
.alert-body{flex:1;min-width:0;}
.alert-body b{display:block;font-size:14px;color:var(--red);margin-bottom:3px;}
.alert-sheet.ok .alert-body b{color:var(--green);}
.alert-body p{font-size:12.5px;color:var(--ink);line-height:1.45;margin:0;}
.alert-ok{border:none;background:var(--navy-deep);color:#fff;font-weight:700;border-radius:8px;padding:7px 12px;font-size:12.5px;flex:none;}
@keyframes alertIn{from{opacity:0;transform:translate(-50%,12px);}to{opacity:1;transform:translate(-50%,0);}}
@media(prefers-reduced-motion:reduce){.alert-sheet{animation:none;}}

.pay-methods{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:14px;}
.pay-methods .chip{justify-content:center;text-align:center;padding:9px 2px;font-family:inherit;font-size:12px;white-space:nowrap;}
.dl-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end;}
.dl-row .field{margin-bottom:12px;}
.credit-due{background:#FFFBF3;border:1px solid #F0D3A4;border-radius:9px;padding:8px 11px;font-size:12.5px;margin:-4px 0 12px;color:#6B4A0E;}

.rc-deliv{margin-top:10px;text-align:center;font-size:11.5px;font-weight:700;color:#1E9E5A;}
.rc-deliver{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;}
.rc-deliver-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;}
.rc-deliver-head span{color:var(--slate);font-size:11.5px;text-align:right;}
.rc-otp{display:flex;gap:8px;}
.rc-otp input{flex:1;min-width:0;padding:10px 12px;border:1.5px solid var(--line);border-radius:9px;font-size:16px;letter-spacing:.3em;text-align:center;}
.stock-day{width:100%;min-width:0;font-size:12px;border-collapse:collapse;}
.stock-day th,.stock-day td{padding:8px 6px;text-align:right;border-bottom:1px solid var(--line);}
.stock-day th:first-child,.stock-day td:first-child{text-align:left;}
.stock-day th{font-size:10px;text-transform:uppercase;color:var(--slate);}

.rc-prog{height:6px;background:#EDF1F6;border-radius:9px;overflow:hidden;margin-top:6px;}
.rc-prog i{display:block;height:100%;background:#1E9E5A;}

#mapPanel{position:relative;}
.trip-card{position:absolute;top:12px;right:12px;z-index:500;width:320px;max-height:calc(100% - 24px);overflow-y:auto;background:#fff;border-radius:14px;padding:14px;box-shadow:0 18px 40px -12px rgba(7,27,49,.45);font-size:12.5px;}
.trip-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.trip-head b{display:block;font-family:'Manrope';font-size:15px;color:var(--navy-deep);}
.trip-head span{font-size:11.5px;color:var(--slate);}
.trip-status{margin:10px 0;padding:7px 10px;border-radius:9px;background:#F1F4F8;font-weight:600;display:flex;align-items:center;gap:7px;}
.trip-status.live{background:#E7F7EE;color:#136C3E;}
.trip-status i{width:8px;height:8px;border-radius:50%;background:#1E9E5A;box-shadow:0 0 0 0 rgba(30,158,90,.6);animation:tripPulse 1.6s infinite;flex:none;}
@keyframes tripPulse{70%{box-shadow:0 0 0 8px rgba(30,158,90,0);}100%{box-shadow:0 0 0 0 rgba(30,158,90,0);}}
.trip-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.trip-grid div{background:#F7F9FC;border-radius:9px;padding:8px 10px;}
.trip-grid b{display:block;font-family:'Manrope';font-size:15px;color:var(--navy-deep);}
.trip-grid span{font-size:10.5px;color:var(--slate);}
.trip-loc{margin:10px 0 4px;font-size:12px;}
.trip-stops{border-top:1px solid var(--line);margin-top:8px;padding-top:8px;display:flex;flex-direction:column;gap:7px;max-height:180px;overflow-y:auto;}
.trip-stops > div{display:flex;gap:8px;align-items:flex-start;}
.trip-stops .n,.stop-pin span{width:20px;height:20px;border-radius:50%;background:var(--navy);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
.stop-pin{background:none;border:none;}
.stop-pin span{border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);}
.trip-stops small{display:block;color:var(--slate);font-size:11px;}
.trip-actions{display:flex;gap:8px;margin-top:10px;}
.trip-actions .btn{flex:1;}
@media(max-width:860px){.trip-card{position:static;width:auto;margin:12px;box-shadow:var(--shadow-soft);max-height:none;}}
@media(prefers-reduced-motion:reduce){.trip-status i{animation:none;}}

/* Map stays behind everything: Leaflet's own layers (attribution, zoom) use
   z-index up to 1000, so the map panel gets its own stacking context. */
#mapPanel{position:relative;z-index:0;isolation:isolate;}
.alert-sheet{z-index:3500 !important;}
.drawer-backdrop.open,.rep-drawer-backdrop.open{z-index:2500;}
.sidebar{z-index:2600;}

/* Documents fit the screen — no sideways scrolling */
.doc table{width:100%;table-layout:auto;border-collapse:collapse;}
.doc td,.doc th{overflow-wrap:anywhere;}
@media(max-width:600px){
  .modal{padding:18px 14px;}
  .doc{font-size:12px;}
  .doc-head{flex-direction:column;gap:6px;}
  .doc-head .no{text-align:left;}
  .doc table{font-size:11px;}
  .doc th{font-size:9.5px;padding:6px 3px;letter-spacing:0;}
  .doc td{padding:7px 3px;}
  .doc .qty-big{font-size:18px;}
  .doc-sign{grid-template-columns:1fr 1fr 1fr;gap:8px;}
}

/* pilot switch */
.pilot-switch{display:flex;justify-content:space-between;align-items:center;gap:16px;border:1.5px solid #F0D3A4;background:#FFFBF3;}
.switch{display:flex;align-items:center;gap:10px;cursor:pointer;flex:none;}
.switch input{display:none;}
.switch span{width:52px;height:30px;border-radius:30px;background:#CBD3DF;position:relative;transition:background .2s;}
.switch span::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:left .2s;}
.switch input:checked + span{background:var(--green);}
.switch input:checked + span::after{left:25px;}
.switch b{min-width:30px;font-size:13px;}
@media(max-width:600px){.pilot-switch{flex-direction:column;align-items:flex-start;}}

@media print{.rc-deliver{display:none !important;}}

@media print{
  .modal.receipt-modal{background:#fff !important;box-shadow:none !important;padding:0 !important;max-width:80mm !important;width:80mm !important;}
  .receipt{box-shadow:none !important;-webkit-mask:none !important;mask:none !important;padding:4mm 3mm !important;}
  .rc-actions{display:none !important;}
}

@media print{ .brand-bar,.rep-drawer,.rep-drawer-backdrop{display:none !important;} }

@media print{
  .desk-main > .desk-topbar{background:none !important;color:#000 !important;box-shadow:none !important;padding:0 !important;}
  .desk-main > .desk-topbar h2,.desk-main > .desk-topbar p{color:#000 !important;}
  .doc-actions,.modal-close{display:none !important;}
  body > .modal-backdrop:has(~ .modal-backdrop){display:none !important;} /* print only the top-most document */
  .doc-fromto{background:#f3f3f3 !important;}
}

@media print{
  .sidebar,.mobile-topbar,.desk-bottom-nav,.drawer-backdrop,.btn,.toast,#hamburgerBtn,.modal-close,input[type="search"]{display:none !important;}
  .desk-shell{display:block !important;}
  .desk-main{padding:0 !important;max-width:100% !important;}
  body{background:#fff !important;}
  .panel,.kcard{border:1px solid #ccc !important;box-shadow:none !important;break-inside:avoid;}
  table{min-width:0 !important;font-size:11px !important;}
  .modal-backdrop{position:static !important;background:none !important;padding:0 !important;display:block !important;}
  .modal{box-shadow:none !important;max-width:100% !important;max-height:none !important;margin:0 !important;}
  /* A modal (receipt, etc.) prints on its own — the page underneath it,
     with its search boxes, headings and full tables, never should. */
  body:has(.modal-backdrop) #app,
  body:has(.modal-backdrop) .rep-shell{display:none !important;}
}

/* ===== Store desk (2026-09-28) ===== */
.note-line{background:var(--blue-light);border-radius:9px;padding:7px 10px;margin:8px 0 2px;font-size:12.5px;color:var(--navy-deep);line-height:1.45;overflow-wrap:anywhere;}
.note-line b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--blue);margin-bottom:1px;}
.store-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px;}
.store-act{background:var(--navy-deep);color:#fff;border:none;border-radius:12px;padding:16px 12px;text-align:left;cursor:pointer;box-shadow:var(--shadow-soft);transition:transform .12s;}
.store-act:nth-child(1){background:linear-gradient(135deg,#1E9E5A,#157544);}
.store-act:nth-child(2){background:linear-gradient(135deg,var(--red),#9E1628);}
.store-act:nth-child(3){background:linear-gradient(135deg,var(--blue),var(--navy));}
.store-act:nth-child(4){background:linear-gradient(135deg,#B8790A,#8A5A06);}
.store-act:hover{transform:translateY(-2px);}
.store-act b{display:block;font-family:'Manrope';font-size:16px;}
.store-act span{font-size:11.5px;opacity:.85;}
.todo-card{display:flex;gap:12px;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;box-shadow:var(--shadow-soft);cursor:pointer;transition:box-shadow .15s;}
.todo-card:hover{box-shadow:var(--shadow);}
.todo-main{min-width:0;flex:1;}
.todo-main h5{font-size:14px;margin:4px 0 2px;}
.todo-main .meta{font-size:12px;color:var(--slate);overflow-wrap:anywhere;}
.todo-tag{font-size:10px;font-weight:800;letter-spacing:.05em;padding:3px 7px;border-radius:6px;margin-right:6px;}
.todo-tag.amber{background:var(--amber-light);color:var(--amber);}
.todo-tag.blue{background:var(--blue-light);color:var(--blue);}
.todo-tag.green{background:var(--green-light);color:var(--green);}
.todo-tag.red{background:var(--red-light);color:var(--red);}
.todo-act{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;}
.todo-act .btn{min-width:84px;}
.todo-more,.req-more{font-size:11px;color:var(--blue);font-weight:700;margin-top:4px;}
.req-line{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-top:10px;border-top:1px solid var(--line);padding-top:8px;cursor:pointer;}
@media(max-width:860px){.store-actions{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.todo-card{flex-direction:column;align-items:stretch;}.todo-act{flex-direction:row;justify-content:space-between;align-items:center;}}
@media print{.note-line{background:#f1f1f1 !important;}}
.store-tbl table{min-width:0;}
@media(max-width:600px){.store-tbl th,.store-tbl td{padding:8px 6px;font-size:12px;}}
.store-tbl .show-sm{display:none;}
@media(max-width:600px){.store-tbl .hide-sm{display:none;}.store-tbl .show-sm{display:block;}}

/* ===== 2026-09-30: phones (iPhone bottom bar, menus), messages, print ===== */
/* iPhone: a text box under 16px makes Safari zoom in when tapped — the
   screen then stays zoomed and the bottom menu sits off-screen until you
   pinch out. 16px stops that zoom. */
@media (max-width:860px){
  input,select,textarea{font-size:16px !important;}
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{min-height:100vh;min-height:100dvh;}
.rep-shell{min-height:100vh;min-height:100dvh;}

/* Field app bottom menu: fixed to the screen (not to the page), above the
   iPhone home bar, never hidden by scrolling. */
.rep-shell .bottom-nav{position:fixed;left:0;right:0;bottom:0;margin:0 auto;z-index:400;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));transform:translateZ(0);-webkit-transform:translateZ(0);
  box-shadow:0 -4px 16px rgba(11,42,74,.06);}
.rep-shell .bottom-nav.nav-hidden{transform:none;}
.rep-shell .app-body{padding-bottom:calc(96px + env(safe-area-inset-bottom));}
.cart-bar{bottom:calc(78px + env(safe-area-inset-bottom));}
.desk-bottom-nav{padding-bottom:calc(10px + env(safe-area-inset-bottom)) !important;transform:translateZ(0);}
.brand-bar{padding-top:env(safe-area-inset-top);height:calc(58px + env(safe-area-inset-top));}
@media(max-width:860px){ .mobile-topbar{padding-top:calc(12px + env(safe-area-inset-top)) !important;} }

/* Field app ☰ menu: it must sit ABOVE its dark backdrop (it sat under it,
   so every tap on the menu hit the backdrop and just closed it). */
.rep-drawer{z-index:2700;padding-top:calc(16px + env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom));}
.rep-drawer-backdrop{display:none;}
.rep-drawer-backdrop.open{display:block;z-index:2600 !important;}

/* Back button in the field app header */
.app-header .back-btn{flex:none;}

/* Messages float over everything, at the top of the screen, so an error
   is seen wherever you are on a long form. */
.toast{top:calc(14px + env(safe-area-inset-top));bottom:auto !important;transform:translateX(-50%) translateY(-20px);z-index:6000;max-width:calc(100% - 28px);text-align:center;}
.toast.show{transform:translateX(-50%) translateY(0);}
.notice-stack{position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top));transform:translateX(-50%);width:min(460px,calc(100% - 24px));z-index:6500;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.notice{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:12px 12px 12px 14px;border-radius:12px;font-size:13.5px;font-weight:600;line-height:1.4;
  box-shadow:0 14px 30px rgba(7,27,49,.28);background:var(--navy-deep);color:#fff;animation:noticeIn .2s ease;cursor:pointer;}
.notice-error{background:#B3182B;}
.notice-success{background:#157544;}
.notice-ic{flex:none;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;}
.notice-text{flex:1;min-width:0;overflow-wrap:anywhere;}
.notice-x{flex:none;background:none;border:none;color:rgba(255,255,255,.8);font-size:14px;padding:0 2px;}
.notice.leaving{opacity:0;transform:translateY(-6px);transition:all .2s ease;}
@keyframes noticeIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.notice{animation:none;}}

/* "Filled in with what you typed before" */
.draft-flag{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--blue-light);color:var(--navy-deep);border-radius:9px;padding:8px 10px;margin:-4px 0 12px;font-size:12.5px;font-weight:600;}
.draft-flag button{background:none;border:none;color:var(--blue);font-weight:700;font-size:12.5px;text-decoration:underline;padding:0;}

/* Save / Share sheet (phones) */
.share-sheet-backdrop{position:fixed;inset:0;background:rgba(7,27,49,.5);z-index:5500;display:flex;align-items:flex-end;justify-content:center;}
.share-sheet{background:#fff;width:100%;max-width:480px;border-radius:18px 18px 0 0;padding:10px 18px calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:9px;animation:sheetUp .2s ease;}
.share-sheet h4{font-size:15px;margin:4px 0 0;}
.share-sheet .share-status{font-size:12px;color:var(--slate);margin:0 0 4px;}
.share-grip{width:40px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 4px;}
@keyframes sheetUp{from{transform:translateY(40px);opacity:.6;}to{transform:none;opacity:1;}}
@media(min-width:861px){.share-sheet-backdrop{align-items:center;}.share-sheet{border-radius:16px;}}
@media print{.notice-stack,.share-sheet-backdrop,.toast{display:none !important;}}

/* ===== Carton report ===== */
.cr-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px;}
@media(max-width:860px){.cr-summary{grid-template-columns:repeat(2,minmax(0,1fr));}}
.cr-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.cr-controls input[type="date"]{padding:8px 10px;border:1.5px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);}
.cr-controls label.cr-check{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--slate);}
.cr-panel{padding:0;overflow:hidden;}
.cr-panel .panel-head{padding:14px 16px 10px;margin:0;}
.cr-scroll{overflow:auto;max-height:70vh;-webkit-overflow-scrolling:touch;border-top:1px solid var(--line);}
.cr-table{border-collapse:separate;border-spacing:0;min-width:0;width:max-content;min-width:100%;font-size:13px;}
.cr-table th,.cr-table td{padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:#fff;}
.cr-table thead th{position:sticky;top:0;z-index:2;background:#F3F6FA;color:var(--slate);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;
  white-space:normal;vertical-align:bottom;min-width:74px;max-width:110px;line-height:1.25;}
.cr-table .num{text-align:right;font-variant-numeric:tabular-nums;}
.cr-table td.zero{color:#C3CCD8;}
.cr-table .sticky-l{position:sticky;left:0;z-index:1;box-shadow:1px 0 0 var(--line);}
.cr-table thead .sticky-l{z-index:3;}
.cr-table .who b{display:block;font-size:13px;color:var(--ink);}
.cr-table .who span{display:block;font-size:11px;color:var(--slate);}
.cr-table .col-total{background:#F8FAFD;font-weight:800;color:var(--navy-deep);}
.cr-table thead .col-total{background:#E9EEF5;color:var(--navy-deep);}
.cr-table tfoot td{position:sticky;background:#F3F6FA;font-weight:800;color:var(--navy-deep);border-bottom:none;}
.cr-table tfoot tr.tot td{bottom:31px;border-top:2px solid var(--navy);}
.cr-table tfoot tr.share td{bottom:0;font-weight:600;font-size:11.5px;color:var(--slate);}
.cr-table tfoot .sticky-l{z-index:3;}
.cr-table tbody tr:hover td{background:#FAFCFF;}
.cr-table .retired{display:block;font-size:9.5px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--amber);}
.cr-check-ok{font-size:12px;color:var(--green);font-weight:600;}
.cr-check-bad{font-size:12px;color:var(--red);font-weight:600;}
@media print{.cr-scroll{max-height:none;overflow:visible;}.cr-table tfoot td,.cr-table thead th,.cr-table .sticky-l{position:static !important;}}

/* ===== Commission rules (2026-09-30b) ===== */
.comm-help{font-size:12.5px;color:var(--slate);margin:-2px 0 14px;line-height:1.5;max-width:90ch;}
.comm-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;}
.comm-group{border:1px solid var(--line);border-radius:12px;padding:12px;background:#FBFCFE;display:flex;flex-direction:column;gap:8px;}
.comm-scope{display:flex;flex-wrap:wrap;gap:6px;}
.comm-scope span{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:100px;background:#EEF2F7;color:var(--slate);}
.comm-scope span.on{background:var(--blue-light);color:var(--blue);}
.comm-band{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 10px;font-size:13px;}
.comm-band-actions{display:flex;gap:6px;flex:none;}
.comm-add-band{align-self:flex-start;}
.seg{display:flex;background:#EEF2F7;border-radius:10px;padding:3px;margin-bottom:14px;}
.seg button{flex:1;border:none;background:none;padding:9px 8px;border-radius:8px;font-weight:700;font-size:13px;color:var(--slate);}
.seg button.on{background:#fff;color:var(--navy-deep);box-shadow:var(--shadow-soft);}
.comm-range{display:flex;align-items:center;gap:8px;}
.comm-range span{font-size:12.5px;color:var(--slate);font-weight:600;}
.comm-range input{flex:1;min-width:0;}
.comm-who{display:grid;grid-template-columns:1fr 1fr;gap:0 10px;}
@media(max-width:600px){.comm-who{grid-template-columns:1fr;}}
.comm-preview{background:var(--blue-light);color:var(--navy-deep);border-radius:10px;padding:10px 12px;font-size:12.5px;line-height:1.5;margin:4px 0 14px;}
.comm-actions{display:flex;gap:8px;flex-wrap:wrap;}
.comm-actions .btn{flex:1;}
.comm-card{background:linear-gradient(135deg,#157544,#1E9E5A);color:#fff;border-radius:14px;padding:14px 15px;margin-bottom:12px;box-shadow:var(--shadow-soft);}
.comm-card-top{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:6px;}
.comm-card-top span{display:block;font-size:11.5px;opacity:.85;font-weight:600;}
.comm-card-top b{display:block;font-family:'Manrope';font-size:22px;font-weight:800;}
.comm-card-ctn{text-align:right;}
.comm-card-ctn b{font-size:16px;}
.comm-card-line{border-top:1px solid rgba(255,255,255,.2);padding-top:8px;margin-top:8px;}
.comm-card-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;}
.comm-card-next{font-size:12px;opacity:.9;margin-top:3px;}
.comm-card .pbar{background:rgba(255,255,255,.25);margin-top:6px;}
.comm-card .pbar i{background:#fff;}
.comm-card-note{font-size:11px;opacity:.8;margin-top:8px;}

/* ===== Messages & alerts (2026-09-30c) ===== */
.msg-cfg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:12px;}
@media(max-width:600px){.msg-cfg-grid{grid-template-columns:1fr;}}
.msg-cfg{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#FBFCFE;}
.msg-cfg h5{font-size:14px;margin:0 0 3px;}
.msg-cfg p.muted{font-size:12px;margin:0 0 8px;line-height:1.45;}
.msg-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 0;font-size:13px;}
.msg-row > span{color:var(--slate);font-size:12.5px;}
.msg-row input[type="time"],.msg-row input[type="number"],.msg-row select{padding:6px 8px;border:1.5px solid var(--line);border-radius:8px;background:#fff;}
.msg-row input[type="number"]{width:78px;}
.msg-switch{display:flex;align-items:center;gap:8px;cursor:pointer;}
.msg-switch input{width:18px;height:18px;accent-color:var(--green);}
.msg-switch b{font-size:13px;}
.msg-switch small{display:block;font-size:11px;color:var(--slate);font-weight:500;}
.msg-group{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--navy-deep);margin:16px 0 8px;}
.msg-group small{text-transform:none;letter-spacing:0;font-weight:500;color:var(--slate);margin-left:6px;}
.msg-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;}
@media(max-width:600px){.msg-list{grid-template-columns:1fr;}}
.msg-card{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;display:flex;flex-direction:column;gap:8px;}
.msg-card.off{background:#F7F8FA;}
.msg-card.off textarea,.msg-card.off .msg-preview{opacity:.55;}
.msg-card-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;}
.msg-card-head b{font-size:13.5px;}
.msg-card-head small{display:block;font-size:11.5px;color:var(--slate);margin-top:2px;line-height:1.4;}
.msg-card textarea{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:9px 10px;font:inherit;font-size:13px;resize:vertical;min-height:74px;}
.msg-vars{display:flex;flex-wrap:wrap;gap:5px;}
.msg-vars .chip{font-size:11px;padding:3px 8px;cursor:pointer;background:#EEF2F7;border:none;border-radius:100px;color:var(--navy-deep);font-weight:600;}
.msg-preview{background:#E9F7EF;border-radius:10px 10px 10px 2px;padding:9px 11px;font-size:12.5px;line-height:1.45;color:#16392A;}
.msg-preview small{display:block;font-size:10.5px;color:var(--slate);margin-top:5px;}
.msg-actions{display:flex;gap:6px;flex-wrap:wrap;}
.msg-toggle{position:relative;flex:none;width:40px;height:22px;cursor:pointer;}
.msg-toggle input{opacity:0;width:0;height:0;}
.msg-toggle i{position:absolute;inset:0;background:#CBD3DE;border-radius:22px;transition:background .15s;}
.msg-toggle i::after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;}
.msg-toggle input:checked + i{background:var(--green);}
.msg-toggle input:checked + i::after{transform:translateX(18px);}
.comm-ovr{font-size:11px;color:var(--amber);font-weight:600;margin-top:3px;line-height:1.35;}
.comm-ovr i{color:var(--slate);font-weight:500;}
.comm-period{font-size:12px;color:var(--slate);font-weight:600;display:flex;align-items:center;gap:6px;}
.comm-period select{padding:4px 6px;border:1.5px solid var(--line);border-radius:7px;font-size:12px;font-weight:700;color:var(--navy-deep);background:#fff;}
.seg.seg-sm{margin-bottom:0;}
.seg.seg-sm button{padding:7px 6px;font-size:12.5px;}

/* ===== Sent messages report ===== */
.log-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.log-filters input,.log-filters select{padding:7px 9px;border:1.5px solid var(--line);border-radius:8px;background:#fff;font-size:13px;}
.log-filters input[type="search"]{flex:1 1 200px;min-width:0;}
.log-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:10px;}
@media(max-width:860px){.log-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}}
.log-groups{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-bottom:12px;}
@media(max-width:860px){.log-groups{grid-template-columns:1fr;}}
.log-groups h6{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);margin:0 0 6px;}
.log-chip{display:inline-flex;align-items:center;gap:6px;margin:0 6px 6px 0;padding:5px 10px;border-radius:100px;border:1px solid var(--line);background:#fff;font-size:12px;color:var(--ink);cursor:pointer;}
.log-chip b{color:var(--navy-deep);}
.log-chip.on{background:var(--navy-deep);color:#fff;border-color:var(--navy-deep);}
.log-chip.on b{color:#fff;}
.log-list{display:flex;flex-direction:column;gap:8px;max-height:640px;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-right:2px;}
.log-row{display:block;width:100%;text-align:left;border:1px solid var(--line);border-radius:11px;background:#fff;padding:10px 12px;cursor:pointer;font:inherit;color:inherit;transition:border-color .12s,box-shadow .12s;}
.log-row:hover{border-color:#C9D4E3;box-shadow:var(--shadow-soft);}
.log-row-top{display:flex;align-items:center;gap:8px;}
.log-type{font-weight:700;font-size:13px;color:var(--navy-deep);}
.log-when{margin-left:auto;font-size:11.5px;color:var(--slate);white-space:nowrap;}
.log-to{font-size:12.5px;margin-top:3px;}
.log-about{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;}
.log-about span{font-size:11px;background:#EEF2F7;color:var(--slate);border-radius:100px;padding:2px 8px;font-weight:600;}
.log-text{font-size:12.5px;color:#334155;margin-top:6px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.msg-doc-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:18px;}
@media(max-width:700px){.msg-doc-grid{grid-template-columns:1fr;}}
.phone-bubble-wrap{background:#EEF1F5;border-radius:14px;padding:12px;}
.phone-to{font-size:11.5px;color:var(--slate);font-weight:700;margin-bottom:8px;text-align:center;}
.phone-bubble{background:#fff;border-radius:14px 14px 14px 3px;padding:11px 13px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 1px 2px rgba(0,0,0,.06);}
.phone-meta{font-size:11px;color:var(--slate);margin-top:6px;}
.msg-doc-table{width:100%;min-width:0;font-size:13px;}
.msg-doc-table th{width:92px;vertical-align:top;font-size:11px;padding:7px 8px 7px 0;}
.msg-doc-table td{padding:7px 0;vertical-align:top;}
.msg-thread{display:flex;flex-direction:column;gap:6px;}
.msg-thread button{text-align:left;border:1px solid var(--line);background:#FBFCFE;border-radius:9px;padding:7px 9px;font:inherit;cursor:pointer;}
.msg-thread span{display:block;font-size:12px;font-weight:700;color:var(--navy-deep);}
.msg-thread small{display:block;font-size:11.5px;color:var(--slate);margin-top:2px;}
.msg-preview span{white-space:pre-wrap;}

/* Sent messages: clickable totals, actions, print layout */
.log-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.log-kcard{text-align:left;font:inherit;cursor:pointer;width:100%;}
.log-kcard:hover{box-shadow:var(--shadow);border-color:#cfd8e6;}
.log-kcard.on{border-color:var(--kc,var(--blue));box-shadow:0 0 0 2px color-mix(in srgb,var(--kc,var(--blue)) 25%,transparent);}
.log-row-top .badge + .badge{margin-left:4px;}
.msg-print{font-size:11px;color:#111;}
.msg-print-filters{margin:0 0 8px;color:#475569;}
.msg-print table{width:100%;border-collapse:collapse;margin-bottom:10px;}
.msg-print th,.msg-print td{border:1px solid #d6dde8;padding:4px 6px;vertical-align:top;text-align:left;}
.msg-print th{background:#f1f5f9;font-weight:700;}
.msg-print-kpis td{font-size:14px;font-weight:700;}
.msg-print small{color:#64748b;}
.msg-print-text{white-space:pre-wrap;width:38%;}
.log-row-top .badge:not(.green):not(.red):not(.blue):not(.amber){background:#eef2f7;color:#475569;}

/* Tally setup */
.ts-step{margin-bottom:14px;}
.ts-step-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;}
.ts-step-head h4{margin:0 0 3px;}
.ts-step-head p{font-size:13px;line-height:1.5;margin:0;}
.ts-step-state{margin-left:auto;flex:none;}
.ts-num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--navy-deep);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;}
.ts-conn{display:grid;gap:8px;margin-bottom:12px;font-size:13px;}
.ts-field{margin-bottom:12px;}
.ts-field input.ts-filled{background:#F3FBF6;}
.ts-check{display:flex;gap:7px;align-items:flex-start;font-size:12.5px;margin-top:5px;line-height:1.4;}
.ts-check:empty{display:none;}
.ts-pill{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;background:#94A3B8;}
.ts-pill.ts-ok{background:var(--green);}
.ts-pill.ts-warn{background:#E3A008;}
.ts-pill.ts-err{background:var(--red);}
.ts-pill.ts-info{background:#64748B;}
.ts-where{display:block;color:var(--slate);font-size:11.5px;margin-top:4px;}
.ts-truck{display:block;color:var(--navy);font-size:12px;margin-top:4px;}
.ts-bool{margin:6px 0 12px;align-items:flex-start;}
.ts-bool span{display:flex;flex-direction:column;gap:2px;}
.ts-bool small{color:var(--slate);font-size:12px;font-weight:400;}
.ts-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
@media(max-width:860px){.ts-modes{grid-template-columns:1fr;}}
.ts-mode{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;display:flex;flex-direction:column;gap:5px;background:#fff;}
.ts-mode input{position:absolute;opacity:0;pointer-events:none;}
.ts-mode b{font-size:14px;color:var(--navy-deep);}
.ts-mode span{font-size:12.5px;color:var(--slate);line-height:1.45;}
.ts-mode.on{border-color:var(--navy);box-shadow:0 0 0 3px rgba(11,42,74,.08);background:#F8FAFD;}
.ts-alert{background:#FEF3F2;border:1px solid #F5C2BD;color:#8A1C12;border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.5;}
.ts-note{background:#F1F5F9;border-radius:10px;padding:10px 12px;font-size:13px;color:var(--slate);}
.ts-allok{background:#ECFDF3;border:1px solid #ABEFC6;color:#05603A;border-radius:10px;padding:12px;font-weight:600;font-size:13.5px;}
.ts-problems{display:grid;gap:8px;}
.ts-problem{display:flex;gap:9px;align-items:flex-start;text-align:left;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;font:inherit;font-size:13px;line-height:1.45;cursor:pointer;}
.ts-problem.ts-err{border-color:#F5C2BD;}
.ts-problem.ts-warn{border-color:#F7D98B;}

/* Licence banner */
.lic-bar{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:11px 14px;margin:0 0 14px;font-size:13.5px;line-height:1.5;}
.lic-bar b{flex:none;}
.lic-locked{background:#FEF3F2;border:1px solid #F5C2BD;color:#8A1C12;}
.lic-warn{background:#FFFAEB;border:1px solid #FEDF89;color:#7A4D05;}
#repLic .lic-bar{margin:8px 12px 0;}
.lic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.lic-state{font-size:15px;margin-bottom:12px;}

/* Carton report: phones get cards; the pinned name column never covers the numbers */
.cr-table .sticky-l.who{white-space:normal;min-width:150px;max-width:220px;}
.cr-table .who span{white-space:normal;}
.cr-mobile{display:none;}
@media (max-width:760px){
  .cr-mobile{display:grid;gap:10px;padding:12px;border-top:1px solid var(--line);background:#F6F8FB;}
  .cr-desktop{display:none;}
}
.cr-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;}
.cr-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
.cr-card-head b{display:block;font-size:14px;color:var(--ink);}
.cr-card-head span{display:block;font-size:11.5px;color:var(--slate);line-height:1.35;margin-top:2px;}
.cr-card-tot{text-align:right;flex:none;}
.cr-card-tot b{font-size:20px;font-family:'Manrope',Inter,sans-serif;color:var(--navy-deep);font-variant-numeric:tabular-nums;}
.cr-card-items{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px;display:grid;gap:5px;}
.cr-card-items div{display:flex;justify-content:space-between;gap:10px;font-size:13px;}
.cr-card-items span{color:var(--slate);}
.cr-card-items em{font-style:normal;color:var(--amber);font-size:11px;}
.cr-card-items b{font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;}
.cr-card-items small{color:var(--slate);font-weight:600;margin-left:4px;}
.cr-card-total{border:1.5px solid var(--navy);background:#F8FAFD;}
/* Print / PDF (also from a phone): always the full table */
.print-root .cr-mobile{display:none !important;}
.print-root .cr-desktop{display:block !important;}
.print-root .cr-scroll{max-height:none;overflow:visible;}
.print-root .cr-table tfoot td,.print-root .cr-table thead th,.print-root .cr-table .sticky-l{position:static !important;}

/* Tap-to-see-the-breakdown */
.cr-tap{cursor:pointer;}
.cr-table td.cr-tap:hover,.cr-table th.cr-tap:hover{background:#EEF4FF;color:var(--blue);text-decoration:underline;}
.cr-card-head.cr-tap:active,.cr-card-items .cr-tap:active{background:#EEF4FF;}
.cr-card-items .cr-tap{border-radius:6px;padding:2px 4px;margin:0 -4px;}
.cr-card-items .cr-tap b::after{content:' ›';color:var(--slate);font-weight:600;}
#deskMain table tbody tr:not(.clickable-row) td{cursor:default;}
/* Detail sheet */
.ds{max-width:860px;width:calc(100% - 24px);}
.ds-sub{color:var(--slate);font-size:13px;margin:-4px 0 12px;}
.ds-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px;}
.ds-kpis div{background:#F6F8FB;border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
.ds-kpis b{display:block;font-size:17px;font-family:'Manrope',Inter,sans-serif;color:var(--navy-deep);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.ds-kpis span{font-size:11.5px;color:var(--slate);}
.ds-h{font-size:13px;margin:14px 0 6px;color:var(--navy-deep);}
.ds-table-wrap{overflow-x:auto;}
.ds-table{width:100%;border-collapse:collapse;font-size:13px;}
.ds-table th,.ds-table td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;}
.ds-table th{background:#F3F6FA;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--slate);}
.ds-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.ds-table tr.ds-link{cursor:pointer;}
.ds-table tr.ds-link:hover td{background:#EEF4FF;}
.ds-table tr.ds-link td:first-child b::after{content:' ›';color:var(--slate);}
.ds-table .ds-tot td{font-weight:800;background:#F3F6FA;border-top:2px solid var(--navy);}
.ds-kv{width:100%;border-collapse:collapse;font-size:14px;}
.ds-kv th{width:38%;text-align:left;color:var(--slate);font-weight:600;font-size:12.5px;padding:9px 10px 9px 0;border-bottom:1px solid var(--line);vertical-align:top;}
.ds-kv td{padding:9px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere;}
.ds-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;padding-top:12px;margin-top:12px;border-top:1px solid var(--line);position:sticky;bottom:-1px;background:#fff;}
@media (max-width:600px){
  .ds-backdrop{align-items:flex-end;}
  .ds{width:100%;max-height:92vh;border-radius:16px 16px 0 0;}
  .ds-kpis{grid-template-columns:repeat(2,1fr);}
  .ds-actions .btn{flex:1;white-space:nowrap;padding-left:6px;padding-right:6px;}
  .ds-table th,.ds-table td{padding:7px 6px;font-size:12.5px;}
  .ds-stack thead{display:none;}
  .ds-stack,.ds-stack tbody,.ds-stack tfoot,.ds-stack tr,.ds-stack td{display:block;width:100%;}
  .ds-stack tr{border:1px solid var(--line);border-radius:10px;margin-bottom:8px;padding:4px 10px;}
  .ds-stack td{border:none;padding:4px 0;display:flex;justify-content:space-between;gap:12px;text-align:right;}
  .ds-stack td.num{text-align:right;}
  .ds-stack td[data-l]::before{content:attr(data-l);color:var(--slate);font-size:12px;font-weight:600;text-align:left;flex:none;}
  .ds-stack td:not([data-l]){justify-content:space-between;}
  .ds-stack .ds-tot{background:#F3F6FA;}
  .ds-stack .ds-tot td{background:none;border:none;}
}
.print-root .ds-actions{display:none !important;}
.print-root .ds-table thead{display:table-header-group !important;}
.print-root .ds-table,.print-root .ds-table tbody,.print-root .ds-table tfoot{display:table-row-group;}
.print-root .ds-table{display:table !important;}
.print-root .ds-table tr{display:table-row !important;border:none !important;}
.print-root .ds-table td{display:table-cell !important;}
.print-root .ds-table td::before{content:none !important;}

/* Searchable dropdowns */
select.ss-native{position:absolute !important;opacity:0 !important;pointer-events:none !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;border:0 !important;}
.ss-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:42px;padding:9px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:16px;text-align:left;cursor:pointer;}
@media(min-width:701px){.ss-trigger{font-size:14px;}}
.ss-trigger:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(11,42,74,.1);}
.ss-trigger:disabled{background:#F3F6FA;color:var(--slate);cursor:not-allowed;}
.ss-trigger .ss-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ss-trigger.ss-empty .ss-label{color:var(--slate);}
.ss-trigger .ss-caret{color:var(--slate);font-size:12px;flex:none;}
.ss-trigger.ss-invalid{border-color:var(--red);box-shadow:0 0 0 3px rgba(210,38,58,.12);}
.ss-backdrop{position:fixed;inset:0;z-index:5000;}
.ss-panel{position:fixed;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 36px rgba(7,27,49,.22);display:flex;flex-direction:column;overflow:hidden;min-width:240px;}
.ss-search{margin:8px;padding:9px 11px;border:1.5px solid var(--line);border-radius:9px;font-size:16px;width:auto;}
@media(min-width:701px){.ss-search{font-size:14px;}}
.ss-search:focus{outline:none;border-color:var(--navy);}
.ss-list{overflow-y:auto;padding:0 6px 6px;-webkit-overflow-scrolling:touch;}
.ss-opt{padding:9px 10px;border-radius:8px;cursor:pointer;font-size:14px;line-height:1.35;}
.ss-opt:hover,.ss-opt.ss-act{background:#EEF4FF;}
.ss-opt.ss-cur{font-weight:700;color:var(--navy-deep);}
.ss-opt.ss-cur::after{content:' ✓';color:var(--green);}
.ss-opt.ss-dis{color:#B6C0CD;cursor:not-allowed;}
.ss-group{padding:8px 10px 4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--slate);}
.ss-more{padding:10px;font-size:12px;color:var(--slate);text-align:center;}
.ss-backdrop.ss-phone{background:rgba(7,27,49,.45);}
.ss-phone .ss-panel{left:0;right:0;bottom:0;top:auto;max-height:82vh;border-radius:16px 16px 0 0;}
.ss-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 2px;}
.ss-head b{font-size:15px;}
.ss-x{border:none;background:#F1F5F9;border-radius:50%;width:32px;height:32px;font-size:14px;cursor:pointer;}
.ss-phone .ss-opt{padding:12px 10px;font-size:15px;border-bottom:1px solid #F1F4F8;border-radius:0;}
@media print{.ss-trigger{border:none;padding:0;min-height:0;}.ss-caret{display:none;}}
.as-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:4px 0 10px;}
@media(max-width:760px){.as-kpis{grid-template-columns:repeat(2,1fr);}}
.as-bar{flex:1;min-width:60px;height:8px;background:#EEF2F7;border-radius:6px;overflow:hidden;}
.as-bar span{display:block;height:100%;border-radius:6px;}

/* Printing: never cut at one screen. The app scrolls inside a full-height
   page on screen; on paper everything flows onto as many pages as needed. */
@media print{
  html,body{height:auto !important;min-height:0 !important;max-height:none !important;overflow:visible !important;max-width:none !important;}
  #app,.desk-shell,.desk-main,#deskMain,.rep-shell,.app-body,#repBody,.modal-backdrop,.modal,.doc,.ds,.ds-doc,
  .table-wrap,.table-wrap-scroll,.ds-table-wrap,.cr-scroll,.log-list,.msg-thread{height:auto !important;max-height:none !important;overflow:visible !important;}
  .modal-backdrop{position:static !important;inset:auto !important;}
  tr,.row-card,.kcard,.cr-card{break-inside:avoid;}
}
.rs-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
@media(max-width:860px){.rs-grid{grid-template-columns:1fr;}}
.rs-keep{margin:6px 0 0;padding-left:18px;font-size:13.5px;line-height:1.7;}
.rs-confirm{border:1.5px solid #F5C2BD;}
.rs-list div{display:flex;justify-content:space-between;gap:12px;padding:7px 2px;border-bottom:1px solid var(--line);font-size:13.5px;}
.rs-list b{font-variant-numeric:tabular-nums;color:var(--red);}
.rs-list .rs-zero b,.rs-list .rs-zero span{color:var(--slate);font-weight:400;}
/* Form field guidance (vehicle fuel / load etc.) */
.field-hint{font-size:11.5px;line-height:1.5;color:var(--muted,#5b6b7b);background:#f4f8fc;border:1px solid #e1e9f2;border-radius:8px;padding:8px 10px;margin-top:6px;}
.field-hint b{color:var(--navy-deep,#0b2545);}
.field-calc{margin-top:6px;padding-top:6px;border-top:1px dashed #cdd9e6;color:#0b5132;}
.field-calc .calc-warn{color:#a4440b;font-weight:600;}
.input-unit{display:flex;align-items:stretch;}
.input-unit input{flex:1;border-top-right-radius:0;border-bottom-right-radius:0;min-width:0;}
.input-unit span{display:flex;align-items:center;padding:0 10px;background:#eef3f8;border:1px solid #d5dee8;border-left:0;border-radius:0 8px 8px 0;font-size:12px;font-weight:700;color:#36495e;}