@import "vars.css";

body {
  background: var(--darkGreyColor3);
}

.bg-logo{
  position:fixed;top:50%;left:50%;
  width:min(85vw,900px);
  height:auto;
  transform:translate(-50%,-50%) scale(1.33);
  opacity:.08;transition:all .8s ease;
  z-index:-1;pointer-events:none;user-select:none;
}

.bg-logo.animated{
  animation:zoomIn .5s ease-out forwards,slowRotate 360s linear infinite 4s;
}

.shipment-box{
  width:100%;max-width:1240px;margin:0 auto;padding:1.5rem;
  display:flex;flex-direction:column;gap:1rem;position:relative;z-index:1;
}

.shipment-controls{
  display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
  padding:1.25rem;background:var(--whiteColor);
  border:1px solid var(--lightGreyColor3);border-radius:var(--r-lg);box-shadow:var(--sh-sm);
}

.shipment-controls h1{
  font-size: clamp(1.3rem, calc(100vw / 1024), 1.66rem);
  margin-bottom:.35rem;
}

.shipment-controls p{color:var(--lightGreyColor6);line-height:1.5;}

.shipment-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto;}

.shipment-distance{
  flex:0 0 auto;padding:.6rem .85rem;
  background:var(--secondaryColorDim);
  color:var(--primaryColor);
  font-weight:bold;font-size:.85rem;
  border-radius: 8px;
  box-shadow:0 4px 6px var(--blackColorDim);
}

.shipment-actions .btn{
  padding: 1rem;
  margin: 0.25rem;
  width: 20vw;
  border:none;
  font-size: clamp(1rem, calc(100vw / 1024), 1.33rem);
  font-weight:bold;
  box-shadow: 0 5px 10px var(--blackColorDim);

}

.shipment-actions #shareLocation{
  background:var(--blackColor);color:var(--whiteColor);
}

.shipment-actions #stopLocation{
  background:var(--whiteColor);color:var(--blackColor);
}

.shipment-actions #scanShipment{
  background:var(--blackColor);color:var(--whiteColor);
}

.shipment-actions .btn:hover:not(:disabled){
  background:var(--primaryColor);color:var(--whiteColor);border-color:var(--primaryColor);
}

.shipment-actions .btn:disabled{opacity:.38;cursor:not-allowed;transform:none;}

.shipment-status{
  margin: 0 auto;
  width:100%;
  height: 5rem;
  overflow-y: auto;
  background:var(--white);
  opacity: .6;
  font-size: clamp(.9rem, calc(100vw / 1024), 1.1rem);
  padding: 0.5rem;
  font-weight: normal;
  font-style: italic;
  box-shadow:0 4px 6px var(--blackColorDim);
  border-radius: 8px;
  color:var(--blackColor);
  user-select: text;
}

.shipment-log-entry{
  display:flex;
  align-items:baseline;
  gap:.5rem;
  min-height:1.5rem;
  line-height:1.5;
}

.shipment-log-time{
  flex:0 0 auto;
  color:var(--lightGreyColor6);
  font-variant-numeric:tabular-nums;
}

.shipment-log-entry.shipment-error{color:#b91c1c;}

.shipment-scanner{
  width:100%;
  padding:1rem;
  background:var(--whiteColor);
  border:1px solid var(--lightGreyColor3);
  border-radius:var(--r-lg);
}

.shipment-scanner-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1rem;
}

.shipment-scanner-header h2{font-size:1.2rem;margin-bottom:.35rem;}
.shipment-scanner-header .btn{padding:.65rem 1rem;border:0;}
#qrReader{width:100%;max-width:640px;margin:0 auto;overflow:hidden;}

.shipment-map{
  width:100%;
  height:min(70vh,720px);min-height:420px;
  border:1px solid var(--whiteColorDim);border-radius:var(--r-lg);box-shadow:var(--sh-md);
}

.shipment-marker{
  background:transparent;
  border:0;
}

.shipment-marker__pin{
  position:relative;
  width:38px;height:38px;
  display:grid;place-items:center;
  color:var(--whiteColor);background:rgba(37,99,235,.82);
  border:2px solid var(--whiteColor);border-radius:50%;
  box-shadow:0 2px 7px rgba(0,0,0,.25);
  font-size:1rem;
}

.shipment-marker__pin::after{
  content:"";
  position:absolute;left:50%;bottom:-7px;
  width:12px;height:12px;
  background:inherit;border-right:2px solid var(--whiteColor);border-bottom:2px solid var(--whiteColor);
  transform:translateX(-50%) rotate(45deg);
}

.shipment-marker__pin i{position:relative;z-index:1;}

.shipment-marker--operator .shipment-marker__pin{background:rgba(220,38,38,.82);}

.shipment-marker.is-refreshing .shipment-marker__pin{animation:locationRefresh .65s ease-out;}
.shipment-accuracy.is-refreshing{animation:accuracyRefresh .65s ease-out;}

@keyframes locationRefresh{
  0%{transform:scale(1);box-shadow:0 2px 7px rgba(0,0,0,.25);}
  45%{transform:scale(1.22);box-shadow:0 0 0 10px rgba(51,204,255,.18);}
  100%{transform:scale(1);box-shadow:0 2px 7px rgba(0,0,0,.25);}
}

@keyframes accuracyRefresh{
  0%,100%{stroke-opacity:.55;fill-opacity:.05;}
  45%{stroke-opacity:1;fill-opacity:.18;}
}

@keyframes zoomIn{
  0%{transform:translate(-50%,-50%) scale(.01);opacity:0;}
  100%{transform:translate(-50%,-50%) scale(1.33);opacity:.08;}
}

@keyframes slowRotate{
  from{transform:translate(-50%,-50%) scale(1.33) rotate(0deg);}
  to{transform:translate(-50%,-50%) scale(1.33) rotate(360deg);}
}

@media (prefers-reduced-motion:reduce){
  .bg-logo.animated{animation:zoomIn .5s ease-out forwards;}
  .shipment-marker.is-refreshing .shipment-marker__pin,.shipment-accuracy.is-refreshing{animation:none;}
}

@media (max-width:1024px){
  .shipment-box{padding:0;gap:0}
  .shipment-controls{border-radius: 0}
  .shipment-actions{width:100vw;margin-left:0;}
  .shipment-distance{width:100%;text-align:center;}
  .shipment-actions .btn{width:80vw;}
  .shipment-scanner{border-radius:0;}
  .shipment-scanner-header{flex-direction:column;}
  .shipment-map{min-height:360px;border-radius: 0}
  .shipment-status{height:3.2rem;font-size: 0.8rem;}
}