/* UI 870 · Staff Luxury Design – scoped to admin/driver only */
body.ui870-staff{--g870-bg:#f3efe7;--g870-card:#fffdf8;--g870-ink:#1c1914;--g870-muted:#756d61;--g870-gold:#b68b3b;--g870-gold2:#e9d39a;--g870-dark:#171613;--g870-dark2:#242019;--g870-line:rgba(91,73,39,.14);background:radial-gradient(circle at 10% 0%,#fffaf0 0,#f3efe7 34%,#ece6db 100%);color:var(--g870-ink)}
body.ui870-staff .app{background:transparent;min-height:100dvh}
body.ui870-staff header.hero{position:relative;overflow:hidden;margin:0;padding:calc(16px + env(safe-area-inset-top)) 18px 24px;background:linear-gradient(145deg,#0d0d0c 0%,#1a1814 55%,#352919 100%);color:#fff;border-radius:0 0 28px 28px;box-shadow:0 16px 36px rgba(22,18,12,.18)}
body.ui870-staff header.hero:before{content:"";position:absolute;inset:auto -70px -90px auto;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(219,180,94,.24),rgba(219,180,94,0) 70%);pointer-events:none}
body.ui870-staff header.hero:after{content:"";position:absolute;left:-60px;top:-80px;width:190px;height:190px;border-radius:50%;border:1px solid rgba(233,211,154,.12);pointer-events:none}
body.ui870-staff header.hero .brandrow,body.ui870-staff header.hero .eyebrow,body.ui870-staff header.hero h1,body.ui870-staff header.hero p{position:relative;z-index:1}
body.ui870-staff header.hero .logo{filter:drop-shadow(0 6px 18px rgba(0,0,0,.28));max-width:174px}
body.ui870-staff header.hero .sync{width:42px;height:42px;border-radius:14px;border:1px solid rgba(233,211,154,.25);display:grid;place-items:center;background:rgba(255,255,255,.07);backdrop-filter:blur(10px);color:#f2d993;font-size:20px;box-shadow:inset 0 1px rgba(255,255,255,.08)}
body.ui870-staff header.hero .eyebrow{margin-top:16px;color:#d9bc74;letter-spacing:1.8px;font-size:10px;font-weight:900}
body.ui870-staff header.hero h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(30px,8vw,46px);line-height:1.05;margin:5px 0 8px;font-weight:500;letter-spacing:-.7px}
body.ui870-staff header.hero p{margin:0;color:rgba(255,255,255,.66);font-size:12px}
.ui870-role-pill{margin-left:auto;margin-right:8px;padding:7px 10px;border-radius:999px;background:linear-gradient(135deg,#f4dea5,#b88a34);color:#19150f;font-size:9px;font-weight:950;letter-spacing:1.1px;box-shadow:0 6px 20px rgba(183,139,55,.22);white-space:nowrap}
body.ui870-driver .ui870-role-pill:before{content:"FAHRER"}
body.ui870-admin .ui870-role-pill:before{content:"ADMIN"}

body.ui870-staff .content,body.ui870-staff section.page,body.ui870-staff section.topproducts,body.ui870-staff section.adminpage,body.ui870-staff section.tourmanager,body.ui870-staff section.rewardpage,body.ui870-staff section.smartactions{padding-left:14px;padding-right:14px}
.ui870-staff-welcome{margin:-11px 14px 14px;padding:15px;border:1px solid rgba(180,139,56,.18);background:linear-gradient(135deg,rgba(255,253,248,.98),rgba(249,241,223,.96));border-radius:20px;box-shadow:0 13px 34px rgba(42,34,20,.08);position:relative;z-index:3}
.ui870-staff-welcome .ui870-welcome-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ui870-staff-welcome small{display:block;color:#9a762f;font-size:9px;font-weight:950;letter-spacing:1.3px;text-transform:uppercase}
.ui870-staff-welcome b{display:block;margin-top:3px;font:600 18px/1.15 Georgia,"Times New Roman",serif;color:#221d15}
.ui870-staff-welcome span{display:block;margin-top:4px;color:#766e62;font-size:11px;line-height:1.4}
.ui870-staff-welcome .ui870-status-dot{width:10px;height:10px;border-radius:50%;background:#4caa6f;box-shadow:0 0 0 5px rgba(76,170,111,.12)}
.ui870-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.ui870-quick button{border:1px solid #e6ddcd;background:#fffdf9;color:#2b251c;border-radius:13px;padding:10px 7px;font:inherit;font-size:10px;font-weight:850;box-shadow:0 5px 12px rgba(40,31,16,.04)}
.ui870-quick button:active{transform:scale(.98);background:#f7ecd2}

body.ui870-staff .driver-home{display:grid;gap:10px}
body.ui870-staff .driver-tour-card,body.ui870-staff .driver-offline-card,body.ui870-staff .route44-live,body.ui870-staff .pro-dashboard,body.ui870-staff .morecard,body.ui870-staff .admincard,body.ui870-staff .next-stop,body.ui870-staff .kpi,body.ui870-staff .timeline,body.ui870-staff .suggestion,body.ui870-staff .notifycard,body.ui870-staff .mhd-dashboard-card,body.ui870-staff .dc-dashboard-card{border:1px solid var(--g870-line)!important;background:linear-gradient(160deg,#fffefa,#fffaf0)!important;border-radius:20px!important;box-shadow:0 10px 30px rgba(49,39,22,.07)!important;color:var(--g870-ink)!important}
body.ui870-staff .driver-tour-card{padding:16px!important;border-color:rgba(184,139,52,.2)!important;background:linear-gradient(135deg,#fffdf8,#f6ead0)!important}
body.ui870-staff .driver-tour-label,body.ui870-staff .small,body.ui870-staff .label{color:#96712c!important;letter-spacing:1.15px!important;font-weight:900!important}
body.ui870-staff .driver-tour-name b{font-family:Georgia,"Times New Roman",serif;font-size:20px;color:#211c15}
body.ui870-staff .driver-tour-name span,body.ui870-staff .prodmeta,body.ui870-staff .adminmeta,body.ui870-staff .smallexplain{color:#756d61!important}
body.ui870-staff .driver-change,body.ui870-staff .newtourbtn,body.ui870-staff .rewardadmin,body.ui870-staff .goalbtn,body.ui870-staff .rolebtn,body.ui870-staff button.primary{border:0!important;background:linear-gradient(135deg,#1a1814,#33291c)!important;color:#f5dfa7!important;border-radius:13px!important;box-shadow:0 8px 18px rgba(21,18,12,.13)!important;font-weight:850!important}
body.ui870-staff .driver-progress{margin-top:14px;padding-top:12px;border-top:1px solid rgba(120,91,35,.12)}
body.ui870-staff .driver-progress b{color:#211b13;font-size:19px}
body.ui870-staff .driver-progress span{color:#8f816d;font-size:8px;letter-spacing:.9px}
body.ui870-staff .progress{background:#e9dfcc!important}
body.ui870-staff .progress i{background:linear-gradient(90deg,#b48938,#e4c87f)!important}
body.ui870-staff .driver-steps{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:8px}
body.ui870-staff .driver-step{min-height:52px;border:1px solid #e0d6c5!important;border-radius:15px!important;background:#fffdfa!important;color:#31291f!important;font-size:10px!important;font-weight:900!important;box-shadow:0 7px 20px rgba(45,35,20,.05)}
body.ui870-staff .driver-step.driver-start{background:linear-gradient(135deg,#1a1814,#33281b)!important;color:#f3d891!important;border-color:#33291d!important}
body.ui870-staff .driver-offline-card{padding:14px!important}
body.ui870-staff .driver-offline-button{border:0!important;border-radius:13px!important;background:#ede1c5!important;color:#4f3b18!important;font-weight:900!important}
body.ui870-staff .driver-hint{color:#81776a!important;font-size:10px!important;padding:0 4px}
body.ui870-staff .driver-section-title{margin-top:18px;margin-bottom:8px}
body.ui870-staff .driver-section-title b{font-family:Georgia,"Times New Roman",serif;font-size:18px;color:#251f17}
body.ui870-staff .driver-section-title span{color:#8b8173}
body.ui870-staff input.search,body.ui870-staff input.customersearch,body.ui870-staff .shop-search,body.ui870-staff input,body.ui870-staff select,body.ui870-staff textarea{border:1px solid #ded5c6!important;background:#fffefa!important;color:#211d17!important;border-radius:14px!important;box-shadow:none!important}
body.ui870-staff input:focus,body.ui870-staff select:focus,body.ui870-staff textarea:focus{outline:none!important;border-color:#b58a38!important;box-shadow:0 0 0 3px rgba(181,138,56,.12)!important}

body.ui870-staff .route44-live{overflow:hidden}
body.ui870-staff .route44-head{background:linear-gradient(135deg,#1a1814,#30271c)!important;color:#fff!important;padding:13px 14px!important}
body.ui870-staff .route44-head small{color:#d7b967!important}
body.ui870-staff .route44-progress{background:rgba(255,255,255,.09)!important;color:#f2d895!important}
body.ui870-staff .route44-next{background:#fffaf0!important}
body.ui870-staff .route44-next-num{background:linear-gradient(135deg,#b88935,#dfc272)!important;color:#1b1711!important}
body.ui870-staff .route44-maptools{padding:10px!important;background:#fffefa!important}
body.ui870-staff button.secondary{border:1px solid #d9cfbf!important;background:#fffdf8!important;color:#3b3328!important;border-radius:13px!important;font-weight:800!important}

body.ui870-staff .pagehero,body.ui870-staff .producthero,body.ui870-staff .adminhero,body.ui870-staff .tourhero{position:relative;overflow:hidden;border-radius:22px!important;background:linear-gradient(145deg,#171613,#30271d)!important;color:#fff!important;padding:20px!important;margin-top:12px!important;box-shadow:0 12px 30px rgba(21,17,11,.13)!important}
body.ui870-staff .pagehero:after,body.ui870-staff .producthero:after,body.ui870-staff .adminhero:after,body.ui870-staff .tourhero:after{content:"";position:absolute;right:-42px;bottom:-70px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(220,181,92,.24),transparent 70%)}
body.ui870-staff .pagehero h2,body.ui870-staff .producthero h2,body.ui870-staff .adminhero h2,body.ui870-staff .tourhero h2{position:relative;z-index:1;font:500 29px/1.05 Georgia,"Times New Roman",serif!important;color:#fff!important;margin:5px 0 7px!important}
body.ui870-staff .pagehero p,body.ui870-staff .producthero p,body.ui870-staff .adminhero p,body.ui870-staff .tourhero p{position:relative;z-index:1;color:rgba(255,255,255,.68)!important}
body.ui870-staff .pagehero .small,body.ui870-staff .producthero .small,body.ui870-staff .adminhero .small,body.ui870-staff .tourhero .small,body.ui870-staff .pagehero .eyebrow{position:relative;z-index:1;color:#d7b867!important}

body.ui870-staff nav.bottom{position:fixed!important;left:10px!important;right:10px!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;width:auto!important;border:1px solid rgba(118,91,44,.17)!important;background:rgba(255,253,248,.92)!important;backdrop-filter:blur(16px) saturate(150%);border-radius:20px!important;box-shadow:0 14px 35px rgba(32,25,14,.15)!important;padding:5px!important;z-index:8000!important}
body.ui870-staff nav.bottom .tabs{gap:2px}
body.ui870-staff nav.bottom .tab{min-width:0!important;border-radius:14px!important;color:#807566!important;font-size:8px!important;padding:7px 2px!important;transition:.15s ease}
body.ui870-staff nav.bottom .tab b{font-size:18px!important;color:#6f665b!important}
body.ui870-staff nav.bottom .tab.active{background:linear-gradient(135deg,#1c1914,#362b1e)!important;color:#f5dda0!important;box-shadow:0 7px 16px rgba(22,18,12,.18)!important}
body.ui870-staff nav.bottom .tab.active b{color:#f2d893!important}
body.ui870-staff .app{padding-bottom:98px!important}

body.ui870-staff details.driver-more{border:1px solid var(--g870-line);border-radius:18px;background:rgba(255,253,248,.7);padding:5px 10px}
body.ui870-staff details.driver-more summary{padding:10px 4px;color:#5b5145;font-weight:800}

body.ui870-admin #adminPage .admincard,body.ui870-admin #systemStatusPage .admincard{padding:15px!important}
body.ui870-admin #adminUsersList>*{border-radius:17px!important;box-shadow:0 7px 18px rgba(45,35,20,.05)!important}
body.ui870-admin #morePage .morecard{padding:15px!important}

@media(min-width:760px){
 body.ui870-staff header.hero{padding-left:max(28px,calc((100vw - 1080px)/2));padding-right:max(28px,calc((100vw - 1080px)/2));border-radius:0 0 34px 34px}
 body.ui870-staff .content,body.ui870-staff section.page,body.ui870-staff section.topproducts,body.ui870-staff section.adminpage,body.ui870-staff section.tourmanager,body.ui870-staff section.rewardpage,body.ui870-staff section.smartactions{max-width:1080px;margin-left:auto!important;margin-right:auto!important;padding-left:24px;padding-right:24px}
 .ui870-staff-welcome{max-width:1032px;margin:-11px auto 18px}
 body.ui870-staff .driver-home{grid-template-columns:1.2fr .8fr;align-items:start}
 body.ui870-staff .driver-tour-card{grid-column:1/-1}
 body.ui870-staff .driver-steps{grid-column:1/-1}
 body.ui870-staff .driver-offline-card{grid-column:1/-1}
 body.ui870-staff nav.bottom{left:50%!important;right:auto!important;transform:translateX(-50%);width:min(720px,calc(100vw - 28px))!important}
}
@media(max-width:430px){
 body.ui870-staff header.hero{padding-left:14px;padding-right:14px;padding-bottom:22px}
 body.ui870-staff header.hero .logo{max-width:145px}
 .ui870-role-pill{font-size:8px;padding:6px 8px;margin-right:5px}
 .ui870-staff-welcome{margin-left:10px;margin-right:10px;padding:13px}
 .ui870-quick{grid-template-columns:repeat(2,1fr)}
 body.ui870-staff .driver-steps{grid-template-columns:1fr}
 body.ui870-staff .driver-step{min-height:46px}
 body.ui870-staff nav.bottom .tab{font-size:7px!important}
 body.ui870-staff nav.bottom .tab b{font-size:17px!important}
}
